Flutter自定义日期选择器插件custom_datapicker的使用

Flutter自定义日期选择器插件custom_datapicker的使用

概述

custom_datapicker 是一个用于在 Flutter 应用程序中实现自定义日期范围选择功能的插件。通过该插件，您可以轻松地让用户选择日期范围，并且可以设置最小日期和最大日期的限制。

使用步骤

以下是一个完整的示例，展示如何在 Flutter 中使用 custom_datapicker 插件。

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 custom_datapicker 依赖：

dependencies:
  custom_datapicker: ^版本号

然后运行 flutter pub get 来安装依赖。

2. 导入必要的包

在您的 Dart 文件中导入 custom_datapicker 和其他必要的包：

import 'package:custom_datapicker/custom_date_range_picker.dart';
import 'package:flutter/material.dart';
import 'package:intl/intl.dart'; // 用于格式化日期

3. 创建主应用文件

创建一个简单的 Flutter 应用程序，并在其中集成 custom_datapicker。

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        brightness: Brightness.light,
        primarySwatch: Colors.purple,
      ),
      home: const MyHomePage(),
    );
  }
}

4. 定义状态管理类

创建一个状态管理类 _MyHomePageState，用于保存用户选择的开始日期和结束日期。

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

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime? startDate; // 开始日期
  DateTime? endDate;   // 结束日期

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.only(left: 18, bottom: 16),
        child: Material(
          color: Colors.transparent,
          child: Padding(
            padding:
                const EdgeInsets.only(left: 8, right: 8, top: 4, bottom: 4),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  const Text(
                    'Choose a date Range',
                    style: TextStyle(
                        fontWeight: FontWeight.w500,
                        fontSize: 20,
                        color: Colors.black),
                  ),
                  const SizedBox(height: 20),
                  Text(
                    '${startDate != null ? DateFormat("dd, MMM").format(startDate!) : '-'} / ${endDate != null ? DateFormat("dd, MMM").format(endDate!) : '-'}',
                    style: const TextStyle(
                      fontWeight: FontWeight.w400,
                      fontSize: 18,
                      color: Colors.black,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showCustomDateRangePicker(
            context,
            dismissible: true, // 是否允许点击外部取消
            minimumDate: DateTime.now(), // 最小可选日期
            maximumDate: DateTime.now().add(const Duration(days: 30)), // 最大可选日期
            endDate: endDate, // 当前已选择的结束日期
            startDate: startDate, // 当前已选择的开始日期
            onApplyClick: (start, end) {
              setState(() {
                endDate = end; // 更新结束日期
                startDate = start; // 更新开始日期
              });
            },
            onCancelClick: () {
              setState(() {
                endDate = null; // 取消时清空日期
                startDate = null;
              });
            },
          );
        },
        tooltip: 'choose date Range',
        child: const Icon(Icons.calendar_today_outlined, color: Colors.white),
      ),
    );
  }
}