Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

DatePicker

Flutter does not have a DatePicker control. Use the showDatePicker method to pop up the date selection control. The basic usage of Flutter is as follows:

RaisedButton(
  onPressed: () async {
    var result = await showDatePicker(
        context: context,
        initialDate: DateTime.now(),
        firstDate: DateTime(2020),
        lastDate: DateTime(2021));
    print('$result'); },)Copy the code

InitialDate Initialization time, usually set to the current time.

FirstDate indicates the start time. When set, the selector cannot select a time less than this value.

LastDate indicates the end time. When set, the selector cannot select a time greater than this value.

The showDatePicker method is the Future method that returns the selected date by clicking the OK button in the date selection control.

The effect is as follows:

The selectableDayPredicate argument controls the optional date. Returning true indicates that the date is optional.

showDatePicker(
  selectableDayPredicate: (DateTime day) {
    return day.difference(DateTime.now()).inDays < 2; },...).Copy the code

The time before the day after tomorrow is optional. The effect is as follows:

Dates 19 and later become gray and cannot be selected.

The Builder parameter is used to set a child control, such as a dark theme.

showDatePicker(
  builder: (context, child) {
    returnTheme( data: ThemeData.dark(), child: child, ); },...).Copy the code

The effect is as follows:

Chinese support

Added internationalization handling and support in pubspec.yaml:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter    
Copy the code

Add internationalization support to the top-level control MaterialApp:

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
  ],
  supportedLocales: [
    const Locale('zh'.'CH'),
    const Locale('en'.'US'),
  ],
  locale: Locale('zh'),...).Copy the code

Set the local parameters of showDatePicker as follows:

showDatePicker(
  locale: Locale('zh'),...).Copy the code

The effect is as follows:

TimePicker

TimePicker, like DatePicker, requires the showTimePicker method, which is used as follows:

RaisedButton(
  onPressed: () async{ showTimePicker( context: context, initialTime: TimeOfDay.now()); },)Copy the code

The effect is as follows:

The Builder parameter is used to control the child control. It can be set to a dark theme like the DatePicker, and it can be set to display for 24 hours.

showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (context, child) {
      return MediaQuery(
        data: MediaQuery.of(context)
            .copyWith(alwaysUse24HourFormat: true),
        child: child,
      );
    });
Copy the code

The effect is as follows:

Chinese support

Add internationalization support, step with DatePicker Chinese support, but not showTimePicker local parameter, using the builder parameter Settings, as follows:

showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
    builder: (context, child) {
      return Localizations(
          locale: const Locale('zh'),
          child: child,
          delegates: <LocalizationsDelegate>[
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate,
          ]
      );
    });
Copy the code

The effect is as follows:

CupertinoDatePicker

Ios style date picker, used as follows:

 var _dateTime = DateTime.now(); CupertinoDatePicker( initialDateTime: _dateTime, onDateTimeChanged: (date) { setState(() { _dateTime = date; }); },)Copy the code

The effect is as follows:

The mode parameter sets the date format:

  • Time: displays only the time.4 | 14 | PM
  • Date: displays only the date.July | 13 | 2012
  • DateAndTime: displays both the time and the date.Fri Jul 13 | 4 | 14 | PM

Set maximum date and minimum date:

CupertinoDatePicker(
  minimumDate: DateTime.now().add(Duration(days: - 1)),
  maximumDate: DateTime.now().add(Duration(days: 1)),...).Copy the code

The effect is as follows:

Using 24-hour system:

CupertinoDatePicker(
  use24hFormat: true,...).Copy the code

CupertinoTimerPicker

CupertinoTimerPicker is an ios style time picker. The basic usage is as follows:

CupertinoTimerPicker(
  onTimerDurationChanged: (Duration duration){
  },
)
Copy the code

The effect is as follows:

Set to display only hours and minutes:

CupertinoTimerPicker(
  mode: CupertinoTimerPickerMode.hm,
  ...
)
Copy the code

By default, CupertinoTimerPicker displays 0:0:0, set to display the current time:

var now = DateTime.now();
return Container(
  height: 200,
  child: CupertinoTimerPicker(
    initialTimerDuration: Duration(hours: now.hour,minutes: now.minute,seconds: now.second),
    onTimerDurationChanged: (Duration duration) {},
  ),
);
Copy the code

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com