Flutter 다이얼로그 위젯 정리

사용자의 확인을 요구하거나 팝업메시지 등을 표시해주고 싶을 때 사용하는 다이얼로그 위젯에 대해 정리해보자.

 

요약 : AlertDialog, DatePicker, TimePicker

---

AlertDialog

- title : 제목 영역

- content : 내용 영역

- SingleChildScrollView, ListBody를 이용하면 스크롤 동작 가능

- action 프로퍼티에는 버튼 적용

- Navigator.of(context).pop() : 다이얼로그 닫기

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text('Alert Dialog test'),
            onPressed: () {
              showDialog(
                context: context,
                barrierDismissible: false, // 바깥 영역 터치시 닫을지 여부
                builder: (BuildContext context) {
                  return AlertDialog(
                    title: Text('팝업 메시지'),
                    content: SingleChildScrollView(
                      child: ListBody(
                        children: <Widget>[
                          Text('Alert Dialog 테스트'),
                          Text('ok 버튼 클릭하세요'),
                        ],
                      ),
                    ),
                    actions: <Widget>[
                      FlatButton(
                        child: Text('ok'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                      FlatButton(
                        child: Text('cancel'),
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                      ),
                    ],
                  );
                }
              );
            },
          )
        ],
      )
    );
  }
}

DatePicker

- builder 프로퍼티는 테마 설정할 때 사용 (지정 안하면 기본 테마)

- showDatePicker() 함수는 Future<DateTime> 타입 반환하는데 사용자가 선택할 데이터를 받는 용도

  Future타입은 값이 결정될 때까지 코드블록상태 유지.

- 사용자가 날짜를 선택하면 then() 메소드를 통해 결과 받는 부분을 사용할 수 있다. (setState를 통해 변수상태 갱신)

class _MyHomePageState extends State<MyHomePage> {

  DateTime _selectedDate;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('DatePicker test'),
              onPressed: () {
                Future<DateTime> selected = showDatePicker(
                  context: context,
                  initialDate: DateTime.now(), // 팝업시 최초 값
                  firstDate: DateTime(2015), // 달력 시작일
                  lastDate: DateTime(2025), // 달력 마지막일
                  builder: (BuildContext context, Widget child) {
                    return Theme(
                      data: ThemeData.light(), // 달력 테마
                      child: child
                    );
                  }
                );

                // 사용자가 날짜 선택하면
                selected.then((dateTime) { // dateTime은 사용자가 선택한 값
                  setState(() {
                    _selectedDate = dateTime;
                  });
                });
              },
            ),
            Text('$_selectedDate', style: TextStyle(fontSize: 30),)
          ],
        )
      ),
    );
  }
}

DatePicker 버튼과 날짜(현재는 선택되지 않았으므로 null)

firstDate, lastDate 적용된 모습 (2015년 ~ 2025년)

TimePicker

- showTimePicker()를 통해 호출

- initialTime 프로퍼티에 최초값 셋팅

- TimeOfDay.now() 함수는 현재시간 반환해줌 (hour와 minute 포함되어 있다)

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  var _selectedTime;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('TimePicker test'),
              onPressed: () {
                Future<TimeOfDay> selected = showTimePicker(
                  context: context,
                  initialTime: TimeOfDay.now(),
                );

                // 사용자가 날짜 선택하면
                selected.then((time) { // dateTime은 사용자가 선택한 값
                  setState(() {
                    _selectedTime = '${time.hour}:${time.minute}';
                  });
                });
              },
            ),
            Text('$_selectedTime', style: TextStyle(fontSize: 30),)
          ],
        )
      ),
    );
  }
}