Flutter日期选择器插件cool_datepicker的使用

Cool datepicker

pub package version

特性

它是最好的日期选择器UI（至少对我来说 😅）
可以设置日期选择器的所有颜色
支持底部选定日期列表。用户可以将选定日期移动到选定的年份和月份。
“COOL”

示例

安装

命令

$ flutter pub add cool_datepicker

pubspec.yaml

dependencies:
  cool_datepicker: ^latest_version

使用

import 'package:cool_datepicker/cool_datepicker.dart';

CoolDatepicker(onSelected: (_) {})

重要选项

选项	类型	默认值	描述
onSelected	Function	必须	当用户选择日期并点击确认按钮时触发。必须在函数中传递一个参数（例如：onChange: (a) {}）。然后，您将获得返回的 `List<DateTime>` 或 `Map<String, DateTime>`
defaultValue	`List<DateTime>` / `Map<String, DateTime>`	null	默认选定日期。它会自动检测单选或多选。
disabledList	`List<DateTime>`	null	禁用日期列表。必须传递 `List<DateTime>`。
disabledRangeList	`List<Map<String, DateTime>>`	null	禁用日期范围映射。您必须在 `Map<String, DateTime>` 中使用 ‘start’ 和 ‘end’ 键。
isRange	bool	false	用于单选或多选的日期选择器。

CoolDatepicker(
    defaultValue: [DateTime(2020, 8, 24)], // 单选
    onSelected: (_) {},
    disabledList: [DateTime(2021, 10, 22), DateTime(2021, 10, 12)],
    disabledRangeList: [
        {
        'start': DateTime(2021, 11, 1),
        'end': DateTime(2021, 11, 13)
        },
    ],
)
CoolDatepicker(
    defaultValue: { // 范围选择
    'start': DateTime(2020, 9, 25),
    'end': DateTime(2021, 11, 24)
    },
    onSelected: (_) {},
)

结果选项

选项	类型	默认值	描述
iconSize	double	20	日期选择器图标大小
resultWidth	double	220	结果宽度
resultHeight	double	50	结果高度
resultBD	BoxDecoration	下面代码	结果的 `BoxDecoration`
resultTS	TextStyle	下面代码	结果的 `TextStyle`
resultPadding	EdgeInsets	下面代码	结果的 `Padding`
isResultIconLabelReverse	bool	false	按行反转结果顺序
labelIconGap	double	10	标签和图标的间距
isResultLabel	bool	true	显示/隐藏结果标签
placeholder	String	null	置空文本
placeholderTS	TextStyle	下面代码	置空文本的 `TextStyle`
iconSize	double	20	结果框内日历图标的大小

resultBD = BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.1),
              spreadRadius: 1,
              blurRadius: 10,
              offset: Offset(0, 1),
            ),
          ],
        );

resultTS = TextStyle(
            fontSize: 20,
            color: Colors.black,
          );

resultPadding = const EdgeInsets.only(left: 10, right: 10);

placeholderTS = TextStyle(color: Colors.grey.withOpacity(0.7), fontSize: 20);

日期选择器选项

选项	类型	默认值	描述
calendarSize	double	400	日期选择器大小
minYear	double	DateTime.now().year - 100	日期选择器最小年份
maxYear	double	DateTime.now().year + 100	日期选择器最大年份
format	string	‘yyyy-mm-dd’	显示结果和底部选定日期的格式
limitCount	int	1	设置可以选择的日期数量
weekLabelList	List	下面代码	在日期选择器上设置星期文字
monthLabelList	List	下面代码	在日期选择器上设置月份下拉标签
firstWeekDay	int	7 (Sunday)	设置显示的第一个星期几。可能的值为：周一=1，周二=2，周三=3，周四=4，周五=5，周六=6，周日=7（也可以使用 `DateTime.monday`, `DateTime.sunday`…）
isYearMonthDropdownReverse	bool	false	日期选择器上下拉框的顺序反转
headerColor	Color	Color(0XFF6771e4)	日期选择器头部颜色
arrowIconAreaColor	Color	Color(0XFF4752e0)	日期选择器箭头图标区域颜色
selectedCircleColor	Color	Color(0XFF6771e4)	选定圆圈颜色
selectedBetweenAreaColor	Color	Color(0XFFe2e4fa)	选定之间区域颜色
cancelFontColor	Color	Color(0XFF4a54c5)	取消按钮字体颜色
okButtonColor	LinearGradient	下面代码	确定按钮颜色
bottomSelectedBorderColor	Color	Color(0XFF6771e4)	底部选定边框颜色
isDark	bool	false	暗模式
cancelBtnLabel	String	‘CANCEL’	取消按钮标签
okBtnLabel	String	‘OK’	确定按钮标签

weekLabelList = ['S', 'M', 'T', 'W', 'T', 'F', 'S'];

monthLabelList = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'];

okButtonColor = const LinearGradient(colors: [
    Color(0XFF4a54c5),
    Color(0XFF6771e4),
]);

完整示例

import 'package:flutter/material.dart';
import 'package:cool_datepicker/cool_datepicker.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
          appBar: AppBar(
            backgroundColor: const Color(0XFF6771e4),
            title: const Text('Cool Datepicker'),
          ),
          body: ListView(
            children: [
              Container(
                width: 200,
                height: 200,
                color: Colors.transparent,
              ),
              Center(
                  child: CoolDatepicker(
                onSelected: (selectedDates) {},
                // disabledList: [DateTime(2021, 10, 22), DateTime(2021, 10, 12)],
                disabledRangeList: [
                  {
                    'start': DateTime(2021, 11, 1),
                    'end': DateTime(2021, 11, 13)
                  },
                ],
                maxYear: 2100,
                minYear: 1900,
                calendarSize: 350,
                firstWeekDay: 1,
                isRange: true,
                limitCount: 3,
                format: 'mm/dd/yyyy',
                // defaultValue: {
                //   'start': DateTime(2020, 9, 25),
                //   'end': DateTime(2021, 11, 24)
                // },
                // placeholder: '11/13/2021 ~ 11/14/',
                monthLabelList: const [
                  'January',
                  'February',
                  'March',
                  'April',
                  'May',
                  'June',
                  'July',
                  'August',
                  'September',
                  'October',
                  'November',
                  'December',
                ],
                isYearMonthDropdownReverse: true,
                isResultLabel: true,
              )),
              Container(
                width: 200,
                height: 600,
                color: Colors.transparent,
              ),
              Center(
                child: CoolDatepicker(
                  onSelected: (_) {},
                  weekLabelList: const ['일', '월', '화', '수', '목', '금', '토'],
                  calendarSize: 350,
                  monthLabelList: const [
                    '1월',
                    '2월',
                    '3월',
                    '4월',
                    '5월',
                    '6월',
                    '7월',
                    '8월',
                    '9월',
                    '10월',
                    '11월',
                    '12월',
                  ],
                  isRange: false,
                  headerColor: const Color(0xffea0f16),
                  selectedCircleColor: const Color(0xffea0f16),
                  arrowIconAreaColor: const Color(0xffc80d13),
                  selectedBetweenAreaColor: const Color(0xffea0f16),
                  cancelFontColor: const Color(0xffea0f16),
                  okButtonColor: const LinearGradient(
                      colors: [Color(0xffc80d10), Color(0xffea0f16)]),
                  bottomSelectedBorderColor: const Color(0xffea0f16),
                  isDark: true,
                  cancelBtnLabel: '취소',
                  format: 'yyyy년 mm월 dd일',
                  iconSize: 0.000001,
                  isResultIconLabelReverse: true,
                  okBtnLabel: '확인',
                  labelIconGap: 0,
                ),
              ),
            ],
          )),
    );
  }
}

更多关于Flutter日期选择器插件cool_datepicker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

itying888 1楼•5 天前

更多关于Flutter日期选择器插件cool_datepicker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter项目中使用cool_datepicker日期选择器插件的示例代码。这个插件提供了丰富的日期选择功能，包括日期范围选择、多日期选择等。

首先，确保你已经在pubspec.yaml文件中添加了cool_datepicker依赖：

dependencies:
  flutter:
    sdk: flutter
  cool_datepicker: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中导入cool_datepicker包，并使用它提供的日期选择器组件。以下是一个简单的示例，展示如何使用日期选择器来选择单个日期：

import 'package:flutter/material.dart';
import 'package:cool_datepicker/cool_datepicker.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Cool DatePicker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? selectedDate;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cool DatePicker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              selectedDate == null
                  ? 'No date selected'
                  : 'Selected Date: ${selectedDate!.toLocal()}',
            ),
            SizedBox(height: 20),
            CoolDatePicker(
              initialSelection: DateTime.now(),
              firstDate: DateTime(1900),
              lastDate: DateTime(2100),
              onDateChanged: (DateTime date) {
                setState(() {
                  selectedDate = date;
                });
              },
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

我们创建了一个简单的Flutter应用，包含一个主屏幕MyHomePage。
MyHomePage状态包含一个selectedDate变量，用于存储用户选择的日期。
CoolDatePicker组件用于显示日期选择器。我们设置了初始选择日期为当前日期，并设置了可选择的日期范围为1900年到2100年。
当用户选择日期时，onDateChanged回调函数会被调用，更新selectedDate状态，并重新构建UI以显示选择的日期。

你可以根据需要进一步自定义CoolDatePicker的其他属性，例如日期格式、语言、主题等。cool_datepicker插件的文档通常会提供详细的属性列表和使用说明，帮助你实现更多高级功能。