前言
今天随手翻翻源码，突然看到 showDateRangePicker，心中狂喜。原来 Flutter 早已将 日期范围选择器 内置了，可能有些小伙伴已经知道，但应该还有一部分朋友不知道。想当年，为了日期范围选择可吃了不少坑。做为 Flutter 内置组件收集狂魔的我，自然要发篇文章来安利一下这个组件。另外，该组件已经收录入 FutterUnit ，可更新查看。
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. 日期范围选择器的其他参数
除了默认的必需参数外，还有一些参数用于指定相关文字。下面三张图中标注了相关文本对应的位置，如果需要修改相关文字，设置对应参数即可：
另外，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
