- Flutter 从入门 到精通系列文章在这里
- 当然也必需是要有源码的 在这里了
- github 有点慢
1 中文环境
在你的Flutter项目配置文件中添加语言国际化支持
dependencies:
flutter:
sdk: flutter
flutter_localizations:
sdk: flutter
然后在你的 Flutter 项目中的入口文件处配置中文环境,代码如下:
main() {
runApp(MaterialApp(
//不显示 debug标签
debugShowCheckedModeBanner: false,
//当前运行环境配置
locale: Locale("zh","CH"),
//程序支持的语言环境配置
supportedLocales: [Locale("zh","CH")],
//Material 风格代理配置
localizationsDelegates: [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
],
//显示的首页面
home: DemoDateRangPage(),
));
}
- Locale类是用来识别用户的语言环境
- GlobalMaterialLocalizations.delegate 为Material Components库提供了本地化的字符串
2 显示日期范围选择器
本次 Demo 是点击一个按钮显示一个日期范围选择器,页面 DemoDateRangPage 代码如下
class _DemoDateRangPageState extends State<DemoDateRangPage> {
String _dateSelectText;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("日期范围选择"),
),
body: Center(
child: Text("当前选择 $_dateSelectText"),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
showDateSelect();
},
child: Icon(Icons.select_all),
),
);
}
void showDateSelect() async {
//获取当前的时间
DateTime start = DateTime.now();
//在当前的时间上多添加4天
DateTime end = DateTime(start.year,start.month,start.day+4);
//显示时间选择器
DateTimeRange selectTimeRange = await showDateRangePicker(
//语言环境
locale: Locale("zh","CH"),
context: context,
//开始时间
firstDate: DateTime(2020, 1),
//结束时间
lastDate: DateTime(2022, 1),
cancelText: "取消",
confirmText: "确定",
//初始的时间范围选择
initialDateRange: DateTimeRange(start: start, end: end)
);
//结果
_dateSelectText = selectTimeRange.toString();
//选择结果中的开始时间
DateTime selectStart = selectTimeRange.start;
//选择结果中的结束时间
DateTime selectEnd = selectTimeRange.end;
setState(() {
});
}