尧图网站建设 尧图网络
  • 首页
  • 关于我们
  • 服务项目
  • 案例展示
  • 建站流程
  • 资讯中心
  • 联系我们
首页/资讯中心/详情

Flutter美观、易用的日历选择组件

Flutter美观、易用的日历选择组件
📅 发布时间:2026/6/19 18:22:15

🧩 项目信息:

  • 示例预览地址: 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 预设日期选项

💡 技术亮点

  1. 泛型设计:使用泛型 YCalendar 支持不同类型的日期选择(单日期或日期范围)
  2. 灵活的日期计算:提供丰富的日期计算工具方法
  3. 自适应布局:使用 Flutter 布局系统实现自适应界面
  4. 高度可定制:提供多种自定义选项,满足不同场景需求
  5. 简洁的 API:简单易用的 API 设计,降低使用门槛

🔍 应用场景

  • 酒店/机票预订应用中的日期选择
  • 日程管理应用中的日期范围选择
  • 任何需要日期输入的表单
  • 日历视图展示

相关新闻

  • 2025 年滤袋源头厂家最新推荐排行榜:PTFE/PPS/P84 等多材质滤袋优质品牌精选及选购参考
  • 2025 年激光粒度仪厂家最新推荐榜单:聚焦行业标杆与新兴势力,助力科研与生产精准选购纳米粒度及Zeta电位仪厂家推荐
  • 循环调用接口,使用promise.all的应用

最新新闻

  • 2026亲测:专业降AIGC软件选它准没错 - 降AI小能手
  • LeagueAkari:基于LCU API的英雄联盟客户端工具包实现多数据源整合架构设计
  • 2026防晒墨镜哪些品牌排名高?TOP5清单出炉 - 速递信息
  • 上海汽车音响改装选哪家?上海音乐人生,二十年赛事级连锁标杆门店 - 音乐人生汽车音响
  • 技术解析:从Tri-Plane到3D GAN,如何实现高效且一致的神经渲染
  • 通过Selenium实现网页截图来生成应用封面

日新闻

  • 5分钟掌握Python进化算法:Geatpy高性能优化工具完全指南
  • Microchip 24AA044 EEPROM选型与应用全指南:从参数解析到实战编程
  • 华为的鸿蒙到底有多牛?为什么称作遥遥领先?

周新闻

  • 3步解锁iOS设备:applera1n激活锁绕过完全指南
  • 39 2026 人工智能证书终极盘点,普通人选 AI 证书可以从这些方向入手
  • Redis 暴露公网有多危险?从端口检查到补救步骤

月新闻

  • 【总结】入门篇:50句话让你记住架构核心概念
  • WeChatMsg技术方案解析:实现Mac微信数据自主管理的完整解决方案
  • WeChatMsg:革新性微信数据备份方案,打造你的专属数字记忆库

关于尧图

  • 公司简介
  • 团队介绍
  • 企业文化
  • 荣誉资质

服务项目

  • 定制开发
  • 电商建站
  • UI 设计
  • 运维服务

快速链接

  • 案例展示
  • 建站流程
  • 常见问题
  • 资讯中心

联系方式

  • 📍北京市朝阳区互联网产业园 A 座 10 层
  • 📞400-888-8888
  • ✉️contact@rkmt.cn
  • 🕐周一至周日 9:00-21:00

© 2024 北京尧图网络科技有限公司 版权所有 | 京 ICP 备 XXXXXXXX 号