Flutter日期选择插件flutter_rounded_date_picker的使用

简介

flutter_rounded_date_picker 是一个帮助你以圆角日历形式选择日期和年份的Flutter插件，同时支持自定义主题。

示例动画

安装

在 pubspec.yaml 文件中添加依赖项，包括 flutter_localizations：

dependencies:
  flutter_localizations:
    sdk: flutter
  flutter_rounded_date_picker: ^3.0.2

导入

在你的Dart文件中导入包：

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_rounded_date_picker/rounded_picker.dart';

初始化本地化

在 MaterialApp 小部件中添加本地化代理，并指定应用程序支持的语言：

MaterialApp(
    localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
    ],
    supportedLocales: [
          const Locale('en', 'US'), // 英语
          const Locale('th', 'TH'), // 泰语
    ],
    ...
)

显示日期选择器

显示允许用户选择日期的日期选择器：

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  initialDate: DateTime.now(),
  firstDate: DateTime(DateTime.now().year - 1),
  lastDate: DateTime(DateTime.now().year + 1),
  borderRadius: 16,
);

显示年份选择器

显示允许用户选择年份的年份选择器：

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  initialDatePickerMode: DatePickerMode.year,
  theme: ThemeData(primarySwatch: Colors.green),
);

主题设置

你可以通过 ThemeData 类和 PrimarySwatch 来为日期选择器分配主题：

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  theme: ThemeData(primarySwatch: Colors.pink),
);

深色主题

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  theme: ThemeData.dark(),
);

自定义主题

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  background: Colors.white,
  theme: ThemeData(
    primaryColor: Colors.red[400],
    accentColor: Colors.green[800],
    dialogBackgroundColor: Colors.purple[50],
    textTheme: TextTheme(
      body1: TextStyle(color: Colors.red),
      caption: TextStyle(color: Colors.blue),
    ),
    disabledColor: Colors.orange,
    accentTextTheme: TextTheme(
      body2 : TextStyle(color: Colors.green[200]),
    ),
  ),
);

自定义日期选择器

可以使用 styleDatePicker 字段来自定义日期选择器的样式，如字体大小、粗细、每个部分的文字颜色等。

示例：自定义字体大小和间距（适用于平板电脑）

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  theme: ThemeData(primarySwatch: Colors.deepPurple),
  styleDatePicker: MaterialRoundedDatePickerStyle(
    textStyleDayButton: TextStyle(fontSize: 36, color: Colors.white),
    textStyleYearButton: TextStyle(fontSize: 52, color: Colors.white),
    textStyleDayHeader: TextStyle(fontSize: 24, color: Colors.white),
    textStyleCurrentDayOnCalendar: TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold),
    textStyleDayOnCalendar: TextStyle(fontSize: 28, color: Colors.white),
    textStyleDayOnCalendarSelected: TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold),
    textStyleDayOnCalendarDisabled: TextStyle(fontSize: 28, color: Colors.white.withOpacity(0.1)),
    textStyleMonthYearHeader: TextStyle(fontSize: 32, color: Colors.white, fontWeight: FontWeight.bold),
    paddingDatePicker: EdgeInsets.all(0),
    paddingMonthHeader: EdgeInsets.all(32),
    paddingActionBar: EdgeInsets.all(16),
    paddingDateYearHeader: EdgeInsets.all(32),
    sizeArrow: 50,
    colorArrowNext: Colors.white,
    colorArrowPrevious: Colors.white,
    marginLeftArrowPrevious: 16,
    marginTopArrowPrevious: 16,
    marginTopArrowNext: 16,
    marginRightArrowNext: 32,
    textStyleButtonAction: TextStyle(fontSize: 28, color: Colors.white),
    textStyleButtonPositive: TextStyle(fontSize: 28, color: Colors.white, fontWeight: FontWeight.bold),
    textStyleButtonNegative: TextStyle(fontSize: 28, color: Colors.white.withOpacity(0.5)),
    decorationDateSelected: BoxDecoration(color: Colors.orange[600], shape: BoxShape.circle),
    backgroundPicker: Colors.deepPurple[400],
    backgroundActionBar: Colors.deepPurple[300],
    backgroundHeaderMonth: Colors.deepPurple[300],
  ),
  styleYearPicker: MaterialRoundedYearPickerStyle(
    textStyleYear: TextStyle(fontSize: 40, color: Colors.white),
    textStyleYearSelected: TextStyle(fontSize: 56, color: Colors.white, fontWeight: FontWeight.bold),
    heightYearRow: 100,
    backgroundPicker: Colors.deepPurple[400],
  ));

示例完整代码

以下是一个完整的示例应用，演示了如何使用 flutter_rounded_date_picker 插件：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_rounded_date_picker/rounded_picker.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        DefaultCupertinoLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      locale: Locale('en', 'US'),
      supportedLocales: [
        const Locale('en', 'US'), // English
        const Locale('th', 'TH'), // Thai
      ],
      home: Home(),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Rounded Date Picker Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () async {
            DateTime newDateTime = await showRoundedDatePicker(
              context: context,
              initialDate: DateTime.now(),
              firstDate: DateTime(DateTime.now().year - 1),
              lastDate: DateTime(DateTime.now().year + 1),
              borderRadius: 16,
              theme: ThemeData(primarySwatch: Colors.deepPurple),
            );
            if (newDateTime != null) {
              print(newDateTime);
            }
          },
          child: Text('Select Date'),
        ),
      ),
    );
  }
}

这个示例展示了如何在一个简单的Flutter应用中集成并使用 flutter_rounded_date_picker 插件。点击按钮时会弹出一个圆形边框的日期选择器，用户可以选择一个日期，并在控制台打印出来。