前言
Flutter默认使用的安卓时间选择器不好看,其他一些插件要么用的人太少,要么好几年没更新了。比如flutter_datetime_picker,是我喜欢的样式,但是两年没更新了,而且一直报错Error: 'DatePickerTheme' is imported from both,根本用不了。
以下介绍一下Flutter下的CupertinoDatePicker的详细使用方法。
导入
import 'package:flutter/cupertino.dart';
页面添加CupertinoDatePicker
SizedBox(
height: 200, //放在SizedBox里面可以限制高度
child: CupertinoDatePicker(
mode: CupertinoDatePickerMode.date, //设置只有日期的模式
initialDateTime: DateTime.now(), //初始时间
//下面的时间限制必须要有,不然会报错“_CupertinoDatePickerDateTimeState is only meant for dateAndTime mode or time mode”
maximumYear: 2025,
minimumYear: 2024,
minimumDate:
DateTime.now().add(const Duration(days: -1)), //可选择的最小日期
maximumDate: DateTime.now().add(const Duration(days: 300)),
onDateTimeChanged: (date) { //date就是每次选择的日期
print(date);
},
),
),
国际化
在pubspec.yaml里加上flutter_localizations或者intl,只用一个就可以了
dependencies:
flutter:
sdk: flutter
#国际化
flutter_localizations:
sdk: flutter
#或者使用intl
intl: ^0.17.0
MaterialApp下面添加以下内容:
MaterialApp(
locale: Locale('zh', 'CH'), //默认是中文
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
GlobalCupertinoLocalizations.delegate,
],
supportedLocales: [
const Locale('zh', 'CH'), //支持列表,中文
const Locale('en', 'US'), //支持列表,英文
],
......
另外一个CupertinoTimePicker的例子
ElevatedButton(
onPressed: () async {
showModalBottomSheet(
context: context,
builder: (context) {
return CupertinoTimerPicker(
mode: CupertinoTimerPickerMode.hms, //模式可以值选择时和分,或者加秒
minuteInterval: 1, //最小的分钟间隔
//设置默认的时间,路由自己设置或者是可以设置为当前数据的时分秒
initialTimerDuration:
Duration(hours: 2, minutes: 10, seconds: 54),
onTimerDurationChanged: (stime) {
print("$stime");
setState(() {
selectTimeStr2 = "$stime";
});
},);
});
},
child: Text("$timeM2$selectTimeStr2"))