🧩 项目信息:
- 示例预览地址: https://knight-l.github.io/y_calendar/
- github主页: https://github.com/knight-L/y_calendar
- pub主页: https://pub.dev/packages/y_calendar
✨ 特性
- 📅 单日期选择 - 简洁直观的单日期选择功能
- 📆 日期范围选择 - 灵活的日期范围选择,适用于各种场景
- 🌓 深/浅色主题 - 自动适应系统主题,提供良好的视觉体验
- 🎨 Material 风格 - 遵循 Material Design 设计规范
- 🚀 预设快捷选项 - 支持添加常用日期预设,提高用户效率
📱 效果展示
范围选择 | 单日期选择 | 主题适配 |
---|---|---|
![]() |
![]() |
![]() |
🛠️ 安装
在 pubspec.yaml 文件中添加依赖:
dependencies:y_calendar: ^1.0.5
然后运行:
flutter pub get
📖 使用指南
导入包
import 'package:y_calendar/y_calendar.dart';
import 'package:intl/intl.dart'; // 用于格式化日期
单日期选择
ElevatedButton(onPressed: () async {DateTime? date = await YCalendar<DateTime>().showBottomSheet(context);if (date != null) {// 使用选中的日期String formattedDate = DateFormat('yyyy-MM-dd').format(date);print('选中日期: $formattedDate');}},child: Text('单个日期选择'),
)
日期范围选择
ElevatedButton(onPressed: () async {List<DateTime>? dateRange = await YCalendar<List<DateTime>>().showBottomSheet(context);if (dateRange != null) {// 使用选中的日期范围String start = DateFormat('yyyy-MM-dd').format(dateRange[0]);String end = dateRange.length > 1 ? DateFormat('yyyy-MM-dd').format(dateRange[1]) : start;print('选中范围: $start 至 $end');}},child: Text('范围选择'),
)
添加预设日期选项
final DateTime nowTime = DateTime.now();
final Map<String, List<DateTime>> presets = {'本周': DateUtil.getThisWeek(nowTime),'上周': DateUtil.getLastWeek(nowTime),'下周': DateUtil.getNextWeek(nowTime),'本月': DateUtil.getThisMonth(nowTime),'上月': DateUtil.getLastMonth(nowTime),'下月': DateUtil.getNextMonth(nowTime),
};
List<DateTime>? dateRange = await
YCalendar<List<DateTime>>(presets: presets,
).showBottomSheet(context);
⚙️ 自定义配置
YCalendar<DateTime>(title: "选择日期", // 日历标题color: Colors.blue, // 主题颜色minDate: DateTime(2023, 1, 1), // 最小可选日期maxDate: DateTime(2023, 12, 31), // 最大可选日期defaultDate: DateTime.now(), // 默认选中日期round: BorderRadius.vertical(top: Radius.circular(20.0)), // 圆角设置showConfirm: true, // 是否显示确认按钮closeOnClickOverlay: true, // 点击遮罩层是否关闭confirmText: "确定", // 确认按钮文字height: 400.0, // 日历高度
).showBottomSheet(context)
📋 API 参数
参数 | 类型 | 默认值 | 描述 |
---|---|---|---|
title | String | "日期选择" | 日历标题 |
color | Color? | null | 主题颜色,影响按钮和选中日期的颜色 |
minDate | DateTime? | 去年 1 月 | 最小可选日期 |
maxDate | DateTime? | 明年 12 月 | 最大可选日期 |
defaultDate | T? | null | 默认选中的日期 |
round | BorderRadiusGeometry | BorderRadius.vertical(top: Radius.circular(20.0)) | 圆角设置 |
showConfirm | bool | true | 是否显示确认按钮 |
closeOnClickOverlay | bool | true | 点击遮罩层是否关闭 |
confirmText | String | "确定" | 确认按钮文字 |
height | double | 400.0 | 日历高度 |
presets | Map<String, List |
null | 预设日期选项 |
💡 技术亮点
- 泛型设计:使用泛型 YCalendar
支持不同类型的日期选择(单日期或日期范围) - 灵活的日期计算:提供丰富的日期计算工具方法
- 自适应布局:使用 Flutter 布局系统实现自适应界面
- 高度可定制:提供多种自定义选项,满足不同场景需求
- 简洁的 API:简单易用的 API 设计,降低使用门槛
🔍 应用场景
- 酒店/机票预订应用中的日期选择
- 日程管理应用中的日期范围选择
- 任何需要日期输入的表单
- 日历视图展示