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

date_cupertino_bottom_sheet_picker 是一个基于 Cupertino 风格的日期选择器插件，允许用户设置年龄限制。本文将详细介绍如何在 Flutter 应用中使用该插件。

Features (功能)

• 提供多种日期选择模式（如 Gregorian 和 Persian）
• 支持时间选择
• 可自定义最小和最大日期范围
• 设置最小年龄限制

示例图片

Getting Started (开始使用)

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

dependencies:
  date_cupertino_bottom_sheet_picker: ^0.0.5

然后运行 flutter pub get 来安装插件。接下来导入包：

import 'package:date_cupertino_bottom_sheet_picker/date_cupertino_bottom_sheet_picker.dart';

使用示例

以下是一个完整的示例代码，展示了如何使用 DateCupertinoBottomSheetPicker 组件：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const Home(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    DateTime? selectedDate = DateTime(2010, 12, 5);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home'),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Center(
            child: SizedBox(
              width: MediaQuery.of(context).size.width * 0.9,
              child: DateCupertinoBottomSheetPicker(
                minWidth: 1.0,
                firstDate: DateTime(1990),
                lastDate: DateTime.now(),
                selectedDate: selectedDate,
                minAge: 18,
                textFieldDecoration: TextFieldDecoration(),
                onTimeChanged: (dateTime, formattedDate, formattedDateWithDay) {
                  print("dateTime: $dateTime, formattedDate: $formattedDate, formattedDateWithDay: $formattedDateWithDay");
                },
              ),
            ),
          )
        ],
      ),
    );
  }
}

其他日期选择模式

Persian Date Picker with Time Picker

DateCupertinoBottomSheetPicker.dateTimePickerPersian(
  minWidth: 0.9,
  onDateAndTimeChanged: (dateTime, formattedDate, formattedDateWithDay, timeOfDay, timeOfDayString, timeOfDayPersianString) {
    print("dateTime: $dateTime, formattedDate: $formattedDate, formattedDateWithDay: $formattedDateWithDay, timeOfDay: $timeOfDay, timeOfDayString: $timeOfDayString , timeOfDayPersianString: $timeOfDayPersianString");
  },
)

Persian Date Picker

DateCupertinoBottomSheetPicker.datePickerPersian(
  minWidth: 0.9,
  onChanged: (dateTime, formattedDate, formattedDateWithDay) {
    print("dateTime: $dateTime, formattedDate: $formattedDate, formattedDateWithDay: $formattedDateWithDay");
  },
)

Gregorian Date Picker with Time Picker

DateCupertinoBottomSheetPicker.dateTimePickerGregorian(
  minWidth: 0.9,
  onTimeChanged: (dateTime, formattedDate, formattedDateWithDay) {
    print("dateTime: $dateTime, formattedDate: $formattedDate, formattedDateWithDay: $formattedDateWithDay");
  },
)