flutter_date_pickers

允许使用日期选择器而无需对话框。为日期选择器提供了一些可自定义的样式。

一套日期选择器

  • DayPicker 单日选择
  • WeekPicker 整周选择
  • RangePicker 任意范围选择
  • MonthPicker 月份选择

demoDatePickers

如何样式化日期选择器

每个日期选择器的构造函数都接受一个样式对象作为参数（如果未传递样式，则使用默认值）。

对于单值选择器（DayPicker，MonthPicker），它是 DatePickerStyles 对象；

对于范围选择器（WeekPicker，RangePickers），它是 DatePickerRangeStyles 对象；

可定制的样式
适用于所有日期选择器

属性 描述
TextStyle displayedPeriodTitle 日期选择器的标题
TextStyle currentDateStyle 当前日期的样式
TextStyle disabledDateStyle 禁用日期的样式（在用户可选择的第一个日期之前和最后一个日期之后）
TextStyle selectedDateStyle 选中日期的样式
BoxDecoration selectedSingleDateDecoration 选中单个日期时的装饰
TextStyle defaultDateTextStyle 未被选中、禁用或当前日期的样式

仅适用于范围日期选择器（WeekPicker，RangePicker）

属性 描述
BoxDecoration selectedPeriodStartDecoration 选中范围的第一个日期的装饰
BoxDecoration selectedPeriodLastDecoration 选中范围的第一个日期的装饰
BoxDecoration selectedPeriodMiddleDecoration 选中范围日期中，既不是开始也不是结束日期的装饰

用法

// Create week date picker with passed parameters
Widget buildWeekDatePicker (DateTime selectedDate, DateTime firstAllowedDate, DateTime lastAllowedDate, ValueChanged<DatePeriod> onNewSelected) {

 // add some colors to default settings
    DatePickerRangeStyles styles = DatePickerRangeStyles(
      selectedPeriodLastDecoration: BoxDecoration(
          color: Colors.red,
          borderRadius: BorderRadius.only(
              topRight: Radius.circular(10.0),
              bottomRight: Radius.circular(10.0))),
      selectedPeriodStartDecoration: BoxDecoration(
        color: Colors.green,
        borderRadius: BorderRadius.only(
            topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0)),
      ),
      selectedPeriodMiddleDecoration: BoxDecoration(
          color: Colors.yellow, shape: BoxShape.rectangle),
    );
    
  return WeekPicker(
      selectedDate: selectedDate,
      onChanged: onNewSelected,
      firstDate: firstAllowedDate,
      lastDate: lastAllowedDate,
      datePickerStyles: styles
  );
}

GitHub

https://github.com/MariaMelnik/flutter_date_pickers