[Flutter] Widget / 위젯 - 다이얼로그

 

다이얼로그

 

 

AlertDialog

showDialog()함수의 builder 프로퍼티에 AlertDialog 클래스의 인스턴스를 반환하는 함수를 작성한다.

 

간단하게 버튼을 넣어서, 클릭하면 다이얼로그가 뜨게끔 코드를 작성했다.

body: Column(
        children: <Widget>[
          ElevatedButton(
            child: Text('RasedButton'),
            onPressed: () {
              showDialog(
                  context: context,
                  barrierDismissible: false, // 바깥 터치해도 닫히는지
                  builder: (BuildContext context) {
                    return AlertDialog(
                        title: Text('제목'),
                        content: Text('hello'),
                        actions: <Widget>[
                          TextButton(
                            child: Text('OK'),
                            onPressed: () {
                              // 다이얼로그 닫기
                              Navigator.of(context).pop();
                            },
                          ),
                          TextButton(
                              child: Text('Cancel'),
                              onPressed: () {
                                //다이얼로그 닫기
                                Navigator.of(context).pop();
                              })
                        ]);
                  });
            },
          ),
        ],
      )

 

---

 

DatePicker

날짜를 선택할 때 사용.

DateTime? _selectedTime;


body: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              Future<DateTime?> selectedDate = showDatePicker(
                context: context,
                initialDate: DateTime.now(), // 초깃값
                firstDate: DateTime(2018), // 시작
                lastDate: DateTime(2030), // 마지막
                builder: (BuildContext? context, Widget? child) {
                  return Theme(
                    data: ThemeData.dark(), // 다크 테마
                    child: child!,
                  );
                },
              );

              // 여기서 사용자가 날짜를 선택할 때 까지 코드가 블록됨.

              selectedDate.then((dateTime) {
                setState(() {
                  _selectedTime = dateTime;
                });
              });

            },
            child: Text('Date Picker'),
          ),
          Text('$_selectedTime'),
        ],
      )

 

---

 

TimePicker

시간 설정할 때 사용.

String? _selectedTime;

body: Column(
        children: <Widget>[
          ElevatedButton(
            onPressed: () {
              Future<TimeOfDay?> selectedTime = showTimePicker(
                context: context,
                initialTime: TimeOfDay.now(), // 초깃값
              );

              // 여기서 사용자가 날짜를 선택할 때 까지 코드가 블록됨.

              selectedTime.then((timeOfDay) {
                setState(() {
                  _selectedTime = '${timeOfDay!.hour}:${timeOfDay!.minute}';
                });
              });

            },
            child: Text('Date Picker'),
          ),
          Text('$_selectedTime'),
        ],
      )

 

 

---

 

서적 : 오준석의 플러터 생존코딩