Flutter日期时间选择器插件pickup_datetime_kh的使用

Pickup datetime kh 是一个包，可以让你添加或选择日期时间，并进行自定义。

特性

• 选择或拾取日期时间
• 自定义用户界面
• 支持自定义：
  • 头部
  • 颜色标签
  • 按钮背景颜色

安装

1. 在你的 pubspec.yaml 文件中添加最新版本的包（然后运行 dart pub get）：

dependencies:
  pickup_datetime_kh: ^0.0.4

1. 导入包并在你的 Flutter 应用程序中使用它。

import 'package:pickup_datetime_kh/pickup_datetime_kh.dart';

自定义

Flutter Custom Datetime Kh 可以进行以下自定义：

• backgroundColor: 背景颜色
• header: 添加小部件的头部
• initialStartDate: 初始开始日期
• initialEndDate: 初始结束日期
• onApplyClick: 按钮被按下时调用的回调
• onCancelClick: 如果你不更新日期时间，则取消
• btnLeftBackgroundColor: 左按钮的背景颜色
• btnRightBackgroundColor: 右按钮的背景颜色
• fontFamily: 设置字体族
• radius: 设置圆角半径
• setValueAuto: 禁用按钮时自动设置值
• disableButton: 禁用按钮

示例

示例 1：创建带应用按钮的日期时间选择器

DateTime? startDate = DateTime.now();
DateTime? endDate = DateTime.now();

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Pickup Datetime Kh"),
    ),
    body: SafeArea(
      child: PickUpDateTimeKh(
        header: Padding(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Column(
            children: [
              const Text('Select date range', style: TextStyle(fontSize: 14)),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(startDate != null ? DateFormat('dd MMM yyyy').format(startDate!) : 'Start', style: const TextStyle(fontSize: 18)),
                  Container(
                    width: 12,
                    height: 2,
                    decoration: BoxDecoration(color: Theme.of(context).iconTheme.color),
                  ),
                  Text(endDate != null ? DateFormat('dd MMM yyyy').format(endDate!) : 'End', style: const TextStyle(fontSize: 18))
                ],
              ),
            ],
          ),
        ),
        minimumDate: DateTime(2000),
        maximumDate: DateTime.now().add(const Duration(days: 30)),
        initialStartDate: startDate,
        initialEndDate: endDate,
        btnLeftBackgroundColor: Colors.grey,
        onApplyClick: (start, end) {
          setState(() {
            endDate = end;
            startDate = start;
          });
          print("Start Date $startDate");
          print("End Date $endDate");
        },
        btnRightBackgroundColor: Colors.blue,
        onCancelClick: () {
          setState(() {
            endDate = DateTime.now();
            startDate = DateTime.now();
          });
        },
      ),
    ),
  );
}

示例 2：创建自动设置值的日期时间选择器

DateTime? startDate = DateTime.now();
DateTime? endDate = DateTime.now();

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text("Pickup Datetime Kh"),
    ),
    body: SafeArea(
      child: PickUpDateTimeKh(
        header: Padding(
          padding: const EdgeInsets.symmetric(vertical: 20),
          child: Column(
            children: [
              const Text('Select date range', style: TextStyle(fontSize: 14)),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Text(startDate != null ? DateFormat('dd MMM yyyy').format(startDate!) : 'Start', style: const TextStyle(fontSize: 18)),
                  Container(
                    width: 12,
                    height: 2,
                    decoration: BoxDecoration(color: Theme.of(context).iconTheme.color),
                  ),
                  Text(endDate != null ? DateFormat('dd MMM yyyy').format(endDate!) : 'End', style: const TextStyle(fontSize: 18))
                ],
              ),
            ],
          ),
        ),
        minimumDate: DateTime(2000),
        maximumDate: DateTime.now().add(const Duration(days: 30)),
        initialStartDate: startDate,
        initialEndDate: endDate,
        disableButton: true,
        setValueAuto: (start, end) {
          setState(() {
            endDate = end;
            startDate = start;
          });
          print("Start Date $startDate");
          print("End Date $endDate");
        },
      ),
    ),
  );
}