1. 다이얼로그

다이얼로그는 사용자의 확인을 요구하거나 메시지를 표시하는 용도로 사용한다.

1. AlertDialog

Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(
            child: FlatButton(
                child: Text("AlertDialog Button"),
                color: Colors.amber,
                onPressed: () {
                  showDialog(
                    context: context,
                    barrierDismissible: false,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text("Title"),
                        content: SingleChildScrollView(
                          child: ListBody(
                            children: [
                              Text("This is AlertDialog"),
                              Text("If you want exit, touch the button")
                            ],
                          ),
                        ),
                        actions: [
                          FlatButton(
                            child: Text("OK"),
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                          ),
                          FlatButton(
                              child: Text("Cancel"),
                              onPressed: () {
                                Navigator.of(context).pop();
                              })
                        ],
                      );
                    },
                  );
                }),
          )
        ],
      ),

Flutter 2.0으로 업그레이드 되면서 FlatButton의 사용법이 바뀌었다.

‣

2. DatePicker

class _MyHomePageState extends State<MyHomePage> {
  late DateTime _selectedTime;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Myongji College"),
        backgroundColor: Colors.red[600],
        centerTitle: true,
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(child: 
          RaisedButton(
          onPressed: () {
          Future<DateTime?> selectedDate = showDatePicker(
            context: context, 
            initialDate: DateTime.now(), 
            firstDate: DateTime(2021), 
            lastDate: DateTime(2023),
            builder: (BuildContext context, Widget? child){
              return Theme(
                data: ThemeData.dark(),
                child: child!,
                );
             },
            );
            selectedDate.then((dateTime) {
            setState(() {
              _selectedTime = dateTime!;
                });
              });
            },
            child: Text("Date Picker"),
            )
            ),Text("$_selectedTime")]),
    );
  }
}

3. TimePicker

class _MyHomePageState extends State<MyHomePage> {
  var _selectedTime;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Myongji College"),
        backgroundColor: Colors.red[600],
        centerTitle: true,
      ),
      body: Column(mainAxisAlignment: MainAxisAlignment.center, 
      children: [
        Center(
          child: RaisedButton(
            onPressed: () {
              Future<TimeOfDay?> selectedTime = showTimePicker(
                initialTime: TimeOfDay.now(),
                context: context,
              );
              selectedTime.then((TimeOfDay? time) {
                setState(() {
                  _selectedTime = "${time?.hour}:${time?.minute}";
                });
              });
            },
            child: Text("Time Picker"),
          ),
        ),
        Text("$_selectedTime"),
      ]),
    );
  }
}

2. 이벤트

onTap, onPressed 등의 이벤트를 기본 프로퍼티로 가지고 있지 않은 위젯에 이벤트를 적용할 수 있도록 해주는 위젯이다.

Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {
                print("GestureDetector Click!!");
              },
              child: Text("Click Me!!"),
            ),
            InkWell(
              onTap: () {
                print("InkWell Click!!");
              },
              child: Text("Click Me!!"),
            )
          ],
        ),
      ),

1. InkWell Shader compilation error

InkWell로 만든 Click Me!! 이벤트의 경우 클릭하면 다음과 같은 에러가 발생 할 수 있다.

이는 이전 Flutter 버전에서 지속적으로 반복되는 캐시가 비활성화되어 문제를 해결했었다.

그러나 현재 Fluter 엔진에서 문제를 해결 할 수 있어 에러가 발생한 것이다.

해결 방법은 코드창 하단에 있는 터미널(terminal) 에서 아래 명령어를 작성하면 된다.

flutter run --enable-software-rendering