Flutter DateTimeRange 日期时间范围选择器-蒲公英云

Flutter DateTimeRange 日期时间范围选择器

在码农的世界里，优美的应用体验，来源于程序员对细节的处理以及自我要求的境界，年轻人也是忙忙碌碌的码农中一员，每天、每周，都会留下一些脚印，就是这些创作的内容，有一种执着，就是不知为什么，如果你迷茫，不妨来瞅瞅码农的轨迹。

如果你有兴趣你可以关注一下公众号 biglead 来获取最新的学习资料。

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(() {
    });
  }