Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge about "how to use Flutter to realize date and time selection class control and internationalization". In the actual case operation process, many people will encounter such difficulties. Next, let Xiaobian lead you to learn how to deal with these situations! I hope you can read carefully and learn something!

Note: No special instructions, Flutter version and Dart version are as follows:

Flutter version: 1.12.13+hotfix.5

Dart Version: 2.7.0

DatePicker

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

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

initialDate The initialization time, usually set to the current time.

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

lastDate indicates the end time, and when set, the selector cannot select a time greater than this value.

The showDatePicker method is the Future method, which returns the selected date after clicking the OK button of the date selection control.

The effects are as follows:

selectableDayPredicate parameter controls optional date, return true indicates optional date, usage is as follows:

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

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

Dates 19 and later are grayed out and not optional.

The builder parameter is used to set the child controls, such as setting the dark theme. Usage is as follows:

showDatePicker( builder: (context, child) { return Theme( data: ThemeData.dark(), child: child, ); }, ...)

The effects are as follows:

Chinese Support

Add internationalization, add support in pubspec.yaml:

dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter

Add internationalization support to the top control MaterialApp:

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

Set showDatePicker's local parameters as follows:

showDatePicker( locale: Locale('zh'), ...)

The effects are as follows:

TimePicker

TimePicker, like DatePicker, requires showTimePicker, which can be used as follows:

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

The effects are as follows:

The builder parameter is used to control child controls. You can set a dark theme like DatePicker. You can also set it to display for 24 hours. Usage is as follows:

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

The effects are as follows:

Chinese Support

To add internationalization support, the steps are the same as DatePicker Chinese support, but showTimePicker has no local parameter, use builder parameter settings, as follows:

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

The effects are as follows:

CupertinoDatePicker

ios style date selector, usage is as follows:

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

The effects are as follows:

The format of the date set by the mode parameter:

time: only show time, effect: 4| 14 | PM

date: date only, effect: July| 13 | 2012

dateAndTime: time and date are displayed, effect: Fri Jul 13| 4 | 14 | PM

Set maximum and minimum dates:

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

The effect is as follows:

Use the 24 hour clock:

CupertinoDatePicker( use24hFormat: true, ...) CupertinoTimerPicker

Cupertino TimerPicker is an ios style time picker. Its basic usage is as follows:

CupertinoTimerPicker( onTimerDurationChanged: (Duration duration){ },)

The effects are as follows:

Set to display only hours and minutes:

CupertinoTimerPicker( mode: CupertinoTimerPickerMode.hm, ...)

By default, CupertinoTimerPicker displays 0:0:0 and is 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) {}, ),);"How to use Flutter to realize date-time selection class control and internationalization" is introduced here, thank you for reading. If you want to know more about industry-related knowledge, you can pay attention to the website. Xiaobian will output more high-quality practical articles for everyone!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.