flutter pub add date_range_picker基于插件公开信息、社区数据与项目使用情况整理的选型参考。
date_range_picker 包提供了一个适用于移动设备的日期范围选择器小部件，该小部件以对话框形式显示，用于选择开始日期和结束日期。它专为面向移动平台的 Flutter 应用程序设计，为用户提供直观的日期范围选择界面。该包与 Flutter 的材料设计原则无缝集成，并支持对选择器的外观和行为进行自定义。它非常适合预订系统、日程安排应用程序，或任何需要日期范围输入的应用程序。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
Currently Flutter has supported date range picker, so I think my mission is done. Thanks for using my lib. Link: https://api.flutter.dev/flutter/material/showDateRangePicker.html
Add to pubspec.yaml in dependencies
date_range_picker: ^1.0.5
import 'package:date_range_picker/date_range_picker.dart' as DateRagePicker;
...
new MaterialButton(
color: Colors.deepOrangeAccent,
onPressed: () async {
final List<DateTime> picked = await DateRagePicker.showDatePicker(
context: context,
initialFirstDate: new DateTime.now(),
initialLastDate: (new DateTime.now()).add(new Duration(days: 7)),
firstDate: new DateTime(2015),
lastDate: new DateTime(DateTime.now().year + 2)
);
if (picked != null && picked.length == 2) {
print(picked);
}
},
child: new Text("Pick date range")
)
To change the colors to your preferred ones, you can wrap it in a Theme and a builder.
Theme(
data: Theme.of(context).copyWith(
accentColor: Colors.green,
primaryColor: Colors.black,
buttonTheme: ButtonThemeData(
highlightColor: Colors.green,
buttonColor: Colors.green,
colorScheme: Theme.of(context).colorScheme.copyWith(
secondary: Colors.red,
background: Colors.white,
primary: Colors.green,
primaryVariant: Colors.green,
brightness: Brightness.dark,
onBackground: Colors.green),
textTheme: ButtonTextTheme.accent)),
child: Builder(
builder: (context) => RaisedButton(
color: Color.fromRGBO(212, 20, 15, 1.0),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30.0)),
child: Padding(
padding: const EdgeInsets.only(top: 10.0, bottom: 10.0, left: 30.0, right: 30.0),
child: Text(
"Date Picker",
style: TextStyle(
color: primaryColor,
fontSize: 28,
fontWeight: FontWeight.w300,
),
),
),
onPressed: () async {
final List<DateTime> picked = await DateRangePicker.showDatePicker(
context: context,
initialFirstDate: new DateTime.now(),
initialLastDate: (new DateTime.now()).add(new Duration(days: 7)),
firstDate: new DateTime(2015),
lastDate: new DateTime(DateTime.now().year + 2));
if (picked != null && picked.length == 2) {
print(picked);
}
},
),
),
)