showDateRangePicker 是Flutter提供的一个选择一段日期的日历选择器
1. showDateRangePicker
showDateRangePicker 定义
Future<DateTimeRange?> showDateRangePicker({
required BuildContext context,
DateTimeRange? initialDateRange,
required DateTime firstDate,
required DateTime lastDate,
DateTime? currentDate,
DatePickerEntryMode initialEntryMode = DatePickerEntryMode.calendar,
String? helpText,
String? cancelText,
String? confirmText,
String? saveText,
String? errorFormatText,
String? errorInvalidText,
String? errorInvalidRangeText,
String? fieldStartHintText,
String? fieldEndHintText,
String? fieldStartLabelText,
String? fieldEndLabelText,
Locale? locale,
bool useRootNavigator = true,
RouteSettings? routeSettings,
TextDirection? textDirection,
TransitionBuilder? builder,
})
showDateRangePicker 属性
| showDateRangePicker 属性 | 介绍 |
|---|---|
| context | @required BuildContext，上下文 context |
| initialDateRange | DateTimeRange 初始日期范围 |
| firstDate | @required DateTime 日历开始日期 |
| lastDate | @required DateTime 日历结束日期 |
| currentDate | 当前日期 |
| initialEntryMode | DatePickerEntryMode 日历弹框样式 calendar: 默认显示日历，可切换成输入模式，input:默认显示输入模式，可切换到日历，calendarOnly:只显示日历，inputOnly:只显示输入模式 |
| helpText | 左上角提示语 |
| cancelText | 取消按钮 文案 |
| confirmText | 确认按钮 文案 |
| saveText | 保存按钮 文案 |
| errorFormatText | 格式错误时下方提示 |
| errorInvalidText | 输入了不在 first 与 last 之间的日期提示语 |
| errorInvalidRangeText | 输入日期范围不合法 开始日期在结束日期之后 |
| fieldStartHintText | 开始日期 输入框默认提示语 |
| fieldEndHintText | 结束日期 输入框默认提示语 |
| fieldStartLabelText | 开始日期 输入框上方提示语 |
| fieldEndLabelText | 结束日期 输入框上方提示语 |
| locale | Locale 地区设置，以后多语言部分在详解 |
| useRootNavigator | 是否使用根导航，默认为 true，官方文档也没做详解，暂时没用到 |
| routeSettings | 路由设置，官方文档也没做详解，暂时没用到 |
| textDirection | 水平方向 显示方向 默认 ltr |
| builder | TransitionBuilder 创建器，和直接创建基本一致，可以定制主题 |
2. showDateRangePicker 实例
示例1 基本使用
Future<DateTimeRange?> _showRangeDatePickerForDay(BuildContext context) {
return showDateRangePicker(
context: context, // 上下文
firstDate: DateTime(2021, 10, 10), // 开始日期
lastDate: DateTime(2022, 10, 10), // 结束日期
currentDate: DateTime.now(), // 当前日期
initialDateRange: DateTimeRange(
start: DateTime.now().subtract(Duration(days: 5)),
end: DateTime.now().add(Duration(days: 5))), // 初始时间范围
initialEntryMode: DatePickerEntryMode
.calendar, // DatePickerEntryMode 日历弹框样式 calendar: 默认显示日历，可切换成输入模式，input:默认显示输入模式，可切换到日历，calendarOnly:只显示日历，inputOnly:只显示输入模式
helpText: "请选择日期区间", // 左上角提示语
cancelText: "取消", // 取消按钮 文案
confirmText: "确定", // 确认按钮 文案
saveText: "完成", // 保存按钮 文案
errorFormatText: "输入格式有误", // 格式错误时下方提示
errorInvalidRangeText: "开始日期不可以在结束日期之后", // 输入日期范围不合法 开始日期在结束日期之后
errorInvalidText: "输入不合法", // 输入了不在 first 与 last 之间的日期提示语
fieldStartHintText: "请输入开始日期", // 开始日期 输入框默认提示语
fieldEndHintText: "请输入结束日期", // 结束日期 输入框默认提示语
fieldStartLabelText: "开始日期", // 开始日期 输入框上方提示语
fieldEndLabelText: "结束日期", // 结束日期 输入框上方提示语
useRootNavigator: true, // 是否使用根导航，默认为 true，官方文档也没做详解，暂时没用到
textDirection: TextDirection.ltr, // 水平方向 显示方向 默认 ltr
);
}
125.gif
示例2 - 主题
Future<DateTimeRange?> _showRangeDatePickerForTheme(BuildContext context) {
return showDateRangePicker(
context: context, // 上下文
firstDate: DateTime(2021, 10, 10), // 开始日期
lastDate: DateTime(2022, 10, 10), // 结束日期
currentDate: DateTime.now(), // 当前日期
initialDateRange: DateTimeRange(
start: DateTime.now().subtract(Duration(days: 5)),
end: DateTime.now().add(Duration(days: 5))), // 初始时间范围
initialEntryMode: DatePickerEntryMode
.calendarOnly, // DatePickerEntryMode 日历弹框样式 calendar: 默认显示日历，可切换成输入模式，input:默认显示输入模式，可切换到日历，calendarOnly:只显示日历，inputOnly:只显示输入模式
helpText: "请选择日期区间", // 左上角提示语
cancelText: "取消", // 取消按钮 文案
confirmText: "确定", // 确认按钮 文案
saveText: "完成", // 保存按钮 文案
builder: (context, child) {
return Theme(
data: ThemeData(primaryColor: Colors.amber),
child: child!,
);
},
);
}
image.png
示例3 - 放大缩小动画
showDateRangePicker 实际上是调用showDialog，showDialog默认的转场动画是渐隐渐出，且无法修改转场动画。因而我们需要使用showGeneralDialog 来做转场动画，使用DateRangePickerDialog显示日历选择器
Future<DateTimeRange?> _showRangeDatePickerForAnimation(BuildContext context) {
return showGeneralDialog<DateTimeRange?>(
context: context,
pageBuilder: (context, animation1, animation2) {
return DateRangePickerDialog(
firstDate: DateTime(2021, 10, 10),
lastDate: DateTime(2022, 10, 10),
currentDate: DateTime.now(),
initialDateRange: DateTimeRange(
start: DateTime.now().subtract(Duration(days: 5)),
end: DateTime.now().add(Duration(days: 5))), // 初始时间范围
initialEntryMode: DatePickerEntryMode.calendar,
);
},
transitionDuration: Duration(milliseconds: 300),
transitionBuilder: (context, anim1, anim2, child) {
return ScaleTransition(
scale: CurvedAnimation(parent: anim1, curve: Curves.easeIn),
child: child,
);
},
);
}
126.gif
3. Demo
class MSRangeDatePickerDemo extends StatelessWidget {
const MSRangeDatePickerDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("MSRangeDatePickerDemo")),
body: SingleChildScrollView(
child: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
child: Text("RangeDatePicker"),
onPressed: () async {
DateTimeRange? _dateRangeTime =
await _showRangeDatePickerForDay(context);
if (_dateRangeTime == null) {
print("取消选择");
} else {
print("选择 $_dateRangeTime");
}
},
),
ElevatedButton(
child: Text("RangeDatePicker-Theme"),
onPressed: () async {
DateTimeRange? _dateRangeTime =
await _showRangeDatePickerForTheme(context);
if (_dateRangeTime == null) {
print("取消选择");
} else {
print("选择 $_dateRangeTime");
}
},
),
ElevatedButton(
child: Text("RangeDatePicker-Animation"),
onPressed: () async {
DateTimeRange? _dateRangeTime =
await _showRangeDatePickerForAnimation(context);
if (_dateRangeTime == null) {
print("取消选择");
} else {
print("选择 $_dateRangeTime");
}
},
),
],
),
),
),
);
}
Future<DateTimeRange?> _showRangeDatePickerForDay(BuildContext context) {
return showDateRangePicker(
context: context, // 上下文
firstDate: DateTime(2021, 10, 10), // 开始日期
lastDate: DateTime(2022, 10, 10), // 结束日期
currentDate: DateTime.now(), // 当前日期
initialDateRange: DateTimeRange(
start: DateTime.now().subtract(Duration(days: 5)),
end: DateTime.now().add(Duration(days: 5))), // 初始时间范围
initialEntryMode: DatePickerEntryMode
.calendar, // DatePickerEntryMode 日历弹框样式 calendar: 默认显示日历，可切换成输入模式，input:默认显示输入模式，可切换到日历，calendarOnly:只显示日历，inputOnly:只显示输入模式
helpText: "请选择日期区间", // 左上角提示语
cancelText: "取消", // 取消按钮 文案
confirmText: "确定", // 确认按钮 文案
saveText: "完成", // 保存按钮 文案
errorFormatText: "输入格式有误", // 格式错误时下方提示
errorInvalidRangeText: "开始日期不可以在结束日期之后", // 输入日期范围不合法 开始日期在结束日期之后
errorInvalidText: "输入不合法", // 输入了不在 first 与 last 之间的日期提示语
fieldStartHintText: "请输入开始日期", // 开始日期 输入框默认提示语
fieldEndHintText: "请输入结束日期", // 结束日期 输入框默认提示语
fieldStartLabelText: "开始日期", // 开始日期 输入框上方提示语
fieldEndLabelText: "结束日期", // 结束日期 输入框上方提示语
useRootNavigator: true, // 是否使用根导航，默认为 true，官方文档也没做详解，暂时没用到
textDirection: TextDirection.ltr, // 水平方向 显示方向 默认 ltr
);
}
Future<DateTimeRange?> _showRangeDatePickerForTheme(BuildContext context) {
return showDateRangePicker(
context: context, // 上下文
firstDate: DateTime(2021, 10, 10), // 开始日期
lastDate: DateTime(2022, 10, 10), // 结束日期
currentDate: DateTime.now(), // 当前日期
initialDateRange: DateTimeRange(
start: DateTime.now().subtract(Duration(days: 5)),
end: DateTime.now().add(Duration(days: 5))), // 初始时间范围
initialEntryMode: DatePickerEntryMode
.calendarOnly, // DatePickerEntryMode 日历弹框样式 calendar: 默认显示日历，可切换成输入模式，input:默认显示输入模式，可切换到日历，calendarOnly:只显示日历，inputOnly:只显示输入模式
helpText: "请选择日期区间", // 左上角提示语
cancelText: "取消", // 取消按钮 文案
confirmText: "确定", // 确认按钮 文案
saveText: "完成", // 保存按钮 文案
builder: (context, child) {
return Theme(
data: ThemeData(primarySwatch: Colors.amber),
child: child!,
);
},
);
}
Future<DateTimeRange?> _showRangeDatePickerForAnimation(
BuildContext context) {
return showGeneralDialog<DateTimeRange?>(
context: context,
pageBuilder: (context, animation1, animation2) {
return DateRangePickerDialog(
firstDate: DateTime(2021, 10, 10),
lastDate: DateTime(2022, 10, 10),
currentDate: DateTime.now(),
initialDateRange: DateTimeRange(
start: DateTime.now().subtract(Duration(days: 5)),
end: DateTime.now().add(Duration(days: 5))), // 初始时间范围
initialEntryMode: DatePickerEntryMode.calendar,
);
},
transitionDuration: Duration(milliseconds: 300),
transitionBuilder: (context, anim1, anim2, child) {
return ScaleTransition(
scale: CurvedAnimation(parent: anim1, curve: Curves.easeIn),
child: child,
);
},
);
}
}
127.gif
Flutter 之 日期时间选择器（iOS 风格）（九十一）
Flutter 之时间日期选择器（DatePicker，TimerPicker）（七十四）
网友评论