Flutter 组件集录 | 日期范围组件 – DateRangePickerDialog

继续创造，加速成长！这是我参加「日新方案 10 月更文挑战」的第 3 天，点击检查活动概况

---

前语

今天顺手翻翻源码，忽然看到 showDateRangePicker，心中狂喜。原来 Flutter 早已将 日期规模选择器 内置了，或许有些小伙伴现已知道，但应该还有一部分朋友不知道。想当年，为了日期规模选择可吃了不少坑。做为 Flutter 内置组件收集狂魔的我，自然要发篇文章来安利一下这个组件。另外，该组件现已收录入 FutterUnit ，可更新检查。

1	2	3

---

1. 日期规模选择器的运用

如下所示，是最简略的日期选择器操作示意：点击选择按钮时，触发下面代码中的 _show 办法：

主界面	选择器界面	保存后界面

showDateRangePicker 是 Flutter 内置的办法，用于弹出日期规模的对话框。其间必传的参数有三个：

参数	类型	描述
context	BuildContext	构建上下文
firstDate	DateTime	可选择的最早日期
lastDate	DateTime	可选择的最晚日期

该办法回来 DateTimeRange? 泛型的 Future 目标，如下代码所示：能够经过 async/await 来等待 showDateRangePicker 任务的完结，获取 DateTimeRange? 结果目标。

void _show() async {
  DateTime firstDate = DateTime(2021, 1, 1);
  DateTime lastDate = DateTime.now();
  DateTimeRange? range = await showDateRangePicker(
    context: context,
    firstDate: firstDate,
    lastDate: lastDate,
  );
  print(range);
}

---

2. 日期规模选择器的言语

默许状况下，你会发现选择器是 英文 的（左图），怎么能改成中文呢？

英文	中文

默许状况下，运用是不支持多言语，关于日历这种内置组件的多言语，能够经过参加 flutter_localizations 依靠实现：

dependencies:
  flutter_localizations:
    sdk: flutter

在 MaterialApp 中指定 localizationsDelegates 和 supportedLocales 。假如运用自身没有多言语的需求，能够指定只支持中文：

假如需求多言语，能够经过 locale 参数指定言语。假如未指定的话，会运用当前项目中的当前言语。

简略瞄一眼 showDateRangePicker 源码，能够看出 locale 非空时，会经过 Localizations.override 来让子树运用指定的 locale 言语：

---

3. 日期规模选择器的其他参数

除了默许的必需参数外，还有一些参数用于指定相关文字。下面三张图中标示了相关文本对应的位置，假如需求修正相关文字，设置对应参数即可：

1	2	3

---

另外，showDateRangePicker 办法中能够传入 initialDateRange 设置弹出时的默许时间规模； currentDate 能够设置当前日期，如下右图的 8 日 ：

DateTimeRange? range = await showDateRangePicker(
    context: context,
    firstDate: firstDate,
    lastDate: lastDate,
    initialDateRange: DateTimeRange(
      start: DateTime(2022, 10, 1),
      end: DateTime(2022, 10, 6),
    ),
    currentDate: DateTime(2022, 10, 8)
 );

未设置默许状况	设置默许值

---

4. 源码简看

showDateRangePicker 办法，本质上便是便是经过 showDialog 办法展现对话框：

其间的内容是 DateRangePickerDialog 组件，办法中的绝大多数参数都是为了创建 DateRangePickerDialog 目标而准备的。

---

DateRangePickerDialog 便是一个很一般的 StatefulWidget 的派生类：

依靠 _DateRangePickerDialogState 状况类进行组件构建。假如在开发中，DateRangePickerDialog 无法满意运用需求，能够将代码复制一份进行魔改。

@override
State<DateRangePickerDialog> createState() => _DateRangePickerDialogState();

---

如下所示，能够在月份条目下叠放月份信息，看起来更直观；或许修正选中时的激活端点的装修：

月份布景	修正端点装修

如下稍微翻翻源码，能够找到每个月份是经过 _MonthItem 组件构建的，所以需求对条目进行魔改，就在这儿处理：

在 _MonthItemState 中，有 _buildDayItem 办法，如下是两端激活处的 BoxDecoration 装修目标。 Decoration 的自定义才能十分强， BoxDecoration 假如无法满意需求，能够经过自定义 Decoration 进行绘制。

捉住这些核心的构建处理场合，咱们能够更灵活地依据具体需求来魔改。而不是让运用千篇一律，究竟 Flutter 结构中封装的组件只能满意大多数的基本运用场景，并不能一无是处。

需求是无限的，改变也是无限的，能应对改变的只要改变自身，能操纵改变的是咱们编程者。

期望经过本文能够让更多的朋友知道 DateRangePickerDialog 的存在，让你的日期选择需求变得简略。那本文就到这儿，谢谢观看 ~

---

更多 Flutter 内置组件介绍，欢迎重视 《Flutter 组件集录》 专栏。

• @张风捷特烈 2022.10.10 未允禁转
• 我的 公众号: 编程之王
• 我的 github 主页:toly1994328