Flutter 自定义日期范围选择组件，使用更加灵活，满足UI设计需要

本文主要是介绍Flutter 自定义日期范围选择组件，使用更加灵活，满足UI设计需要，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、实现的效果图

二、虽然Flutter也为我们提供了日期范围选择组件showDateRangePicker，但是毕竟系统的UI不符合我们的设计风格，所以被迫只能自己实现一个了

• 系统样式
  

三、日历整体实现逻辑其实也很简单，如下：

• 首先获取每个月份具体有多少天

int _getMonthDays(DateTime time) {final start = DateTime(time.year, time.month);DateTime end;if (time.month == 12) {end = DateTime(time.year + 1);} else {end = DateTime(time.year, time.month + 1);}return end.difference(start).inDays;
}

• 在就是获取当月的1号是星期几

因为日历从左到右是：日, 一, 二, 三, 四, 五, 六，所以我们就可以根据1号是星期几来确定起始位置在哪里

int _getOffset(DateTime month){return [0, 1, 2, 3, 4, 5, 6, 0][month.weekday];
}

这样基本的日历绘制就没什么问题了，剩下的就是选中的逻辑处理了，完整代码请查看源代码

源代码下载地址

这篇关于Flutter 自定义日期范围选择组件，使用更加灵活，满足UI设计需要的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---