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