Flutter日期选择插件yet_another_date_picker的使用

在开发过程中，我有一个需求是在数据库中搜索给定月份的数据，或者搜索每年特定天的数据。我没有找到一个能够支持所有这些场景的日期选择器，因为所有的日期选择器都是基于DateTime模块，无法单独选择日期而不选择年份或月份。

因此，我编写了这个包。

特性

该日期选择器具有以下额外选项：

1. 选择没有具体日期的月份。
2. 选择没有年份的日期（即仅选择月份和日期）。
3. 从提供的年份列表中进行选择。
4. 可以选择“任意”年份或“任意”日期，并使用DDMMYYYY对象来表示日期，其中日期或年份可以为null。

月份由数字表示，从0开始索引，以便可以直接索引。由于年份是由列表而不是范围提供的，因此可以跳过不需要的年份。

开始使用

步骤1：添加依赖包

在你的pubspec.yaml文件中添加yet_another_date_picker包：

dependencies:
  flutter:
    sdk: flutter
  yet_another_date_picker: ^x.x.x  # 替换为最新版本号
  flutter_riverpod: ^x.x.x       # 替换为最新版本号

然后运行：

flutter pub get

步骤2：添加riverpod

在pubspec.yaml文件中添加flutter_riverpod包：

dependencies:
  flutter:
    sdk: flutter
  yet_another_date_picker: ^x.x.x  # 替换为最新版本号
  flutter_riverpod: ^x.x.x       # 替换为最新版本号

然后运行：

flutter pub get

步骤3：包裹整个应用程序

在main.dart文件中，将整个应用程序包裹在一个ProviderScope小部件中：

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

import 'package:yet_another_date_picker/yet_another_date_picker.dart';

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

步骤4：导入包

在需要使用日期选择器的文件中导入yet_another_date_picker包：

import 'package:yet_another_date_picker/yet_another_date_picker.dart';

步骤5：使用日期选择器

在你的应用中使用DateSelector小部件：

class MyApp extends StatefulWidget {
  const MyApp({super.key});

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

class _MyAppState extends State<MyApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: const DateSelected(),
        ),
        body: Stack(
          children: [
            Center(
              child: ListView(
                children: [
                  const DateSelectorWrapper(),
                  Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: Text.rich(TextSpan(
                        style: Theme.of(context).textTheme.bodyLarge!,
                        children: [
                          TextSpan(
                              style: Theme.of(context)
                                  .textTheme
                                  .headlineSmall!
                                  .copyWith(fontWeight: FontWeight.bold),
                              text: "Select date\n"),
                          const TextSpan(
                            text: "(from the years provided)\n",
                          ),
                          const TextSpan(
                              text:
                                  "* If the day is any, it selects a month\n"),
                          const TextSpan(
                              text: "* If the year is null, it represents "
                                  "the specific day from any year\n"),
                          const TextSpan(
                              text: "* Can't have both day and year empty\n"),
                        ])),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

const List<String> monthsOfTheYear = [
  "JAN",
  "FEB",
  "MAR",
  "APR",
  "MAY",
  "JUN",
  "JUL",
  "AUG",
  "SEP",
  "OCT",
  "NOV",
  "DEC",
];

class DateSelected extends ConsumerWidget {
  const DateSelected({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    final ddmmyyyy = ref.watch(ddmmyyyyProvider);

    final day = (ddmmyyyy.dd == null)
        ? "Any day in "
        : "${ddmmyyyy.dd!.toString().padLeft(2, '0')} - ";
    final month = monthsOfTheYear[ddmmyyyy.mm];
    final year =
        (ddmmyyyy.yyyy == null) ? " of Any year" : " - ${ddmmyyyy.yyyy}";

    return Text(" Date Selected: $day$month$year");
  }
}

class DateSelectorWrapper extends ConsumerWidget {
  const DateSelectorWrapper({
    super.key,
  });

  [@override](/user/override)
  Widget build(BuildContext context, WidgetRef ref) {
    return DateSelector(
      years: List.generate(47, (index) => 1977 + index),  // 提供47年的年份列表
      initialDate: DDMMYYYY.fromDateTime(DateTime.now()),  // 设置初始日期为当前日期
      onDateChanged: (ddmmyyyy) async {
        ref.read(ddmmyyyyProvider.notifier).state = ddmmyyyy;  // 更新状态
      },
      width: MediaQuery.of(context).size.width * .5,  // 设置宽度
      height: MediaQuery.of(context).size.height * 0.6,  // 设置高度
      itemExtend: 40,  // 设置项目扩展
    );
  }
}

final ddmmyyyyProvider = StateProvider<DDMMYYYY>((ref) {
  return DDMMYYYY.fromDateTime(DateTime.now());  // 初始化时设置为当前日期
});