Flutter提供了DatePicker组件进行时间选择。
日期组件及时间组件代码示例：
1import 'package:flutter/material.dart'; 2// 第三方插件，需要提前配置 3import 'package:date_format/date_format.dart'; 4 5class DatePickerPage extends StatefulWidget { 6 DatePickerPage({Key key}) : super(key: key); 7 8 @override 9 _DatePickerPageState createState() => _DatePickerPageState(); 10} 11 12class _DatePickerPageState extends State<DatePickerPage> { 13 14 // 初始化当前日期 15 DateTime _nowDate = DateTime.now(); 16 // 初始化当前时间 17 TimeOfDay _nowTime = TimeOfDay(hour: 12, minute: 30); 18 19 @override 20 void initState() { 21 super.initState(); 22 } 23 24 // 日期组件方法，异步调用(第一种调用方式) 25 // _showDatePicker(){ 26 // showDatePicker( 27 // context: context, 28 // initialDate: _nowDate, 29 // firstDate: DateTime(1980), 30 // lastDate: DateTime(2100) 31 // ).then((result){ 32 // // 异步回调的结果 33 // print(result); 34 // }); 35 // } 36 37 // 日期组件方法，异步调用(第二种调用方式) 38 void _showDatePicker() async{ 39 var result = await showDatePicker( 40 // 上下文环境 41 context:context, 42 // 初始化时间 43 initialDate:_nowDate, 44 // 最早时间 45 firstDate:DateTime(1980), 46 // 最晚时间 47 lastDate:DateTime(2100), 48 ); 49 // 异步回调的结果 50 print(result); 51 // 将选择的时间进行赋值 52 setState(() { 53 this._nowDate = result; 54 }); 55 } 56 57 // 时间选择器，异步调用 58 void _showTimePicker() async{ 59 var result = await showTimePicker( 60 // 上下文环境 61 context: context, 62 // 初始化时间 63 initialTime: _nowTime 64 ); 65 setState(() { 66 this._nowTime = result; 67 }); 68 } 69 70 @override 71 Widget build(BuildContext context) { 72 return Scaffold( 73 appBar: AppBar(title: Text("DatePicker")), 74 body:Column( 75 mainAxisAlignment: MainAxisAlignment.center, 76 children: <Widget>[ 77 Row( 78 mainAxisAlignment: MainAxisAlignment.center, 79 children: <Widget>[ 80 // 日期选择器 81 InkWell( // 点击有水波纹效果 82 child:Row( 83 mainAxisAlignment: MainAxisAlignment.center, 84 children: <Widget>[ 85 // 用第三方插件将选择的日期进行格式化 86 Text("${formatDate(_nowDate,[yyyy,'年',mm,'月',dd])}"), 87 Icon(Icons.arrow_drop_down) 88 ], 89 ), 90 onTap:this._showDatePicker 91 ), 92 93 // 时间选择器 94 InkWell( // 点击有水波纹效果 95 child:Row( 96 mainAxisAlignment: MainAxisAlignment.center, 97 children:<Widget>[ 98 // 将选择的时间进行格式化 99 Text("${_nowTime.format(context)}"), 100 Icon(Icons.arrow_drop_down) 101 ], 102 ), 103 onTap:this._showTimePicker 104 ) 105 ], 106 ) 107 ], 108 ) 109 ); 110 } 111}
效果图如下：
默认情况下，组件是英文格式的，如果要想将组件进行汉化，需要做以下操作：
1. 安装本地化的包。
1dependencies: 2 flutter: 3 sdk: flutter 4 date_format: ^1.0.6 5 flutter_localizations: 6 sdk: flutter
pubspec.yaml中配置保存后，在VS Code环境中会自动下载依赖包。
如果无法正常下载，执行 flutter pub get 。
2. 引入本地化文件包
1// main.dart 2 3// 引入本地化的包 4import 'package:flutter_localizations/flutter_localizations.dart';
3. 进行配置
1// main.dart 2 3Widget build(BuildContext context) { 4 return MaterialApp( 5 6 // 配置本地化 7 localizationsDelegates: [ 8 GlobalMaterialLocalizations.delegate, 9 GlobalWidgetsLocalizations.delegate, 10 ], 11 supportedLocales: [ 12 const Locale('zh', 'CH'), 13 const Locale('en', 'US'), 14 ], 15 locale: const Locale("zh"), 16 17 ); 18}
4. 完整示例
1// main.dart 2import 'package:flutter/material.dart'; 3 4// 引入本地化的包 5import 'package:flutter_localizations/flutter_localizations.dart'; 6 7// 引入路由管理 8import 'routes/Routes.dart'; 9 10// 主函数 11void main(){ 12 runApp(MyApp()); 13} 14 15class MyApp extends StatelessWidget{ 16 @override 17 Widget build(BuildContext context) { 18 return MaterialApp( 19 // 配置本地化 20 localizationsDelegates: [ 21 GlobalMaterialLocalizations.delegate, 22 GlobalWidgetsLocalizations.delegate, 23 ], 24 supportedLocales: [ 25 const Locale('zh', 'CH'), 26 const Locale('en', 'US'), 27 ], 28 locale: const Locale("zh"), 29 30 // 初始化的路由 31 initialRoute: '/', 32 // 监听路由事件 33 onGenerateRoute:onGenerateRoute, 34 // 主题 35 theme: ThemeData(primarySwatch:Colors.yellow), 36 // 关闭调试模式的图标 37 debugShowCheckedModeBanner: false, 38 39 40 ); 41 } 42}