[Flutter] Date Picker & Time Picker

Key Points

DateTime _selectedTime = DateTime.now()

: 시간을 받아오기 위해서 _selectedTime이라는 변수를 초기화 해줍니다.

 

ElevatedButton(style: ElevatedButton.styleFrom(primary: Colors.lightGreen)

: 버튼 종류에 따라, 스타일을 넣어주는 방식이 다른데 ElevatedButton과 RaisedButton간의 차이가 있다.

RaisedButton( color: Colors.red, // background textColor: Colors.red )
ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.red // bacground onPrimary: Colors.red)

 

Future<DateTime?> selectedDate = showDatePicker

: Future 타입은 미래에 DateTime 타입의 데이터를 받는다는 것을 정의한 타입입니다. Future은 값이 결정될 때까지 코드가 블록되고, then()메서드를 통해서 처리가 가능합니다. 

 

selectedDate.then((dateTime) {
  setState(() {
    _selectedTime =
        dateTime!; // renew _selectedTime by using setState function
  });
}

: Then() 메서드를 통해 결과를 받을 수 있습니다. 

 

DatePicker.dart

import 'package:flutter/material.dart';

class datepicker extends StatefulWidget {
  const datepicker({Key? key}) : super(key: key);

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

class _datepickerState extends State<datepicker> {
  DateTime _selectedTime = DateTime.now(); // Initialize DateTime

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('DatePicker'),
        backgroundColor: Colors.lightGreen,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // Align center
          children: [
            ElevatedButton(
              style: ElevatedButton.styleFrom(primary: Colors.lightGreen),
              onPressed: () {
                Future<DateTime?> selectedDate = showDatePicker(
                  // Future => then
                  context: context,
                  initialDate: DateTime.now(), // set initial date
                  firstDate: DateTime(2022), // set first date
                  lastDate: DateTime(2030), // set last date
                  builder: (BuildContext context, Widget? child) {
                    return Theme(
                      data: ThemeData.dark(), // Dark mode
                      child: child!,
                    );
                  },
                );
                selectedDate.then((dateTime) {
                  setState(() {
                    _selectedTime =
                        dateTime!; // renew _selectedTime by using setState function
                  });
                });
              },
              child: Text('Date Picker'),
            ),
            Text('$_selectedTime'), // show the selectedTime
          ],
        ),
      ),
    );
  }
}

 

TimePicker.dart

import 'package:flutter/material.dart';

class timepicker extends StatefulWidget {
  const timepicker({Key? key}) : super(key: key);

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

class _timepickerState extends State<timepicker> {
  DateTime _selectedTime = DateTime.now(); // Initialize DateTime

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Time Picker'),
          backgroundColor: Colors.lightGreen,
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                  style: ElevatedButton.styleFrom(primary: Colors.lightGreen),
                  onPressed: () {
                    Future<TimeOfDay?> selectedTime = showTimePicker(
                      initialTime: TimeOfDay.now(),
                      context: context,
                    );
                    selectedTime.then((timeOfDay) {
                      setState(() {
                        _selectedTime =
                            '${timeOfDay?.hour}:${timeOfDay?.minute}'
                                as DateTime;
                      });
                    });
                  },
                  child: Text('Time Picker')),
              Text('$_selectedTime'),
            ],
          ),
        ));
  }
}