Flutter日期选择插件custom_flutter_rounded_date_picker的使用

发布于 1周前 作者 gougou168 来自 Flutter

Flutter日期选择插件custom_flutter_rounded_date_picker的使用

Flutter Rounded Date Picker 是一个可以帮助你选择日期和年份的插件，并且可以通过圆形日历和自定义主题进行展示。

安装

在 pubspec.yaml 文件中添加依赖。你需要添加两个部分，包括 flutter_localizations。

dependencies:
  flutter_localizations:
    sdk: flutter
  flutter_rounded_date_picker: 0.1.0

导入

将包导入到你的 Dart 文件中。

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:custom_flutter_rounded_date_picker/custom_flutter_rounded_date_picker.dart';
import 'package:custom_flutter_rounded_date_picker/src/material_rounded_date_picker_style.dart';
import 'package:custom_flutter_rounded_date_picker/src/material_rounded_year_picker_style.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],
  ));

自定义动作按钮和按钮上的文本

添加动作按钮及其自定义文本。

DateTime newDateTime = await showRoundedDatePicker(
  ...
  textActionButton: "ACTION",
  onTapActionButton: (){
     //
  },
  textPositiveButton: "OK",
  textNegativeButton: "CANCEL");

自定义星期头文本

自定义星期头的文本。

DateTime newDateTime = await showRoundedDatePicker(
  ...
  customWeekDays: ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"]);

自定义禁用日期

添加无法选择的关闭日期。

DateTime newDateTime = await showRoundedDatePicker(
  ...
  listDateDisabled: [
                                            DateTime.now().subtract(Duration(days: 2)),
                                            DateTime.now().subtract(Duration(days: 4)),
                                            DateTime.now().subtract(Duration(days: 6)),
                                            DateTime.now().subtract(Duration(days: 8)),
                                            DateTime.now().subtract(Duration(days: 10)),
                                            DateTime.now().add(Duration(days: 2)),
                                            DateTime.now().add(Duration(days: 4)),
                                            DateTime.now().add(Duration(days: 6)),
                                            DateTime.now().add(Duration(days: 8)),
                                            DateTime.now().add(Duration(days: 10)),
                                          ]);

自定义点击日期时的回调

添加点击日期时的回调。

DateTime newDateTime = await showRoundedDatePicker(
  ...
  onTapDay: (DateTime dateTime, bool available) {
    if (!available) {
      showDialog(
          context: context,
          builder: (c) => CupertinoAlertDialog(title: Text("This date cannot be selected."),
          actions: <Widget>[
            CupertinoDialogAction(child: Text("OK"),onPressed: (){
              Navigator.pop(context);
            },)
          ],));
    }
    return available;
  });

自定义日期选择器中的日期显示

自定义日期选择器中的日期显示格式。

DateTime newDateTime = await showRoundedDatePicker(
  ...
  builderDay:
      (DateTime dateTime, bool isCurrentDay, bool isSelected, TextStyle defaultTextStyle) {
    if (isSelected) {
      return Container(
        decoration: BoxDecoration(color: Colors.orange[600], shape: BoxShape.circle),
        child: Center(
          child: Text(
            dateTime.day.toString(),
            style: defaultTextStyle,
          ),
        ),
      );
    }

    if (dateTime.day == 10) {
      return Container(
        decoration: BoxDecoration(
            border: Border.all(color: Colors.pink[300], width: 4), shape: BoxShape.circle),
        child: Center(
          child: Text(
            dateTime.day.toString(),
            style: defaultTextStyle,
          ),
        ),
      );
    }
    if (dateTime.day == 12) {
      return Container(
        decoration: BoxDecoration(
            border: Border.all(color: Colors.pink[300], width: 4), shape: BoxShape.circle),
        child: Center(
          child: Text(
            dateTime.day.toString(),
            style: defaultTextStyle,
          ),
        ),
      );
    }

    return Container(
      child: Center(
        child: Text(
          dateTime.day.toString(),
          style: defaultTextStyle,
        ),
      ),
    );
  });

图片背景头部

使用图片作为日期选择器的头部，并可以添加更多细节。

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  theme: ThemeData(primarySwatch: Colors.blue),
  imageHeader: AssetImage("assets/images/calendar_header.jpg"),
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
);

自定义日期选择器中的字体

你可以在日期选择器中调整字体。

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  fontFamily: "Mali"
);

日期选择器的语言环境

你可以设置日期选择器的语言环境。通过指定语言代码和国家代码。 截至2019年4月，该插件支持大约52种语言。

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  locale: Locale("zh","CN"),
  theme: ThemeData(primarySwatch: Colors.pink),
);

泰语和佛教纪元

如果你使用泰语并且使用佛教纪元（公元前543年）。插件支持这些功能。

DateTime newDateTime = await showRoundedDatePicker(
  context: context,
  locale: Locale("th", "TH"),
  era: EraMode.BUDDHIST_YEAR,
);

显示时间选择器

显示时间选择器，所有日期选择器的功能都可用（除了描述）。

final timePicked = await showRoundedTimePicker(
  context: context,
  initialTime: TimeOfDay.now(),
);

Cupertino日期选择器

显示iOS样式的日期和持续时间选择器。

安装

在 pubspec.yaml 文件中添加 Flutter Cupertino Localizations。

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_cupertino_localizations: 1.0.1

初始化本地化

在你的应用中添加 CupertinoLocalizations 代理。

MaterialApp(
  debugShowCheckedModeBanner: false,
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    DefaultCupertinoLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,  // 添加全局的Cupertino本地化。
  ],
  locale: Locale('en', 'US'),  // 当前语言环境
  supportedLocales: [
    const Locale('en', 'US'), // 英语
    const Locale('th', 'TH'), // 泰语
  ],
)

显示Cupertino日期选择器

调用方法来显示日期选择器。带有回调的日期时间实例将被返回。

CupertinoRoundedDatePicker.show(
  context,
  fontFamily: "Mali",
  textColor: Colors.white,
  background: Colors.red[300],
  borderRadius: 16,
  initialDatePickerMode: CupertinoDatePickerMode.date,
  onDateTimeChanged: (newDateTime) {
    //
  },
);

更多Cupertino日期选择器模式：

CupertinoDatePickerMode.date
CupertinoDatePickerMode.dateAndTime
CupertinoDatePickerMode.time

使用泰语和佛教纪元

/// 当前语言环境是TH。
CupertinoRoundedDatePicker.show(
  context,
  fontFamily: "Mali",
  textColor: Colors.white,
  era: EraMode.BUDDHIST_YEAR,
  background: Colors.red[300],
  borderRadius: 16,
  initialDatePickerMode: CupertinoDatePickerMode.date,
  onDateTimeChanged: (newDateTime) {
    //
  },
);

Cupertino持续时间选择器

在iOS中，Flutter Cupertino 支持持续时间和计时器选择器。

CupertinoRoundedDurationPicker.show(
  context,
  initialTimerDuration: Duration(minute:10),
  initialDurationPickerMode: CupertinoTimerPickerMode.hms,
  fontFamily: "Mali",
  onDurationChanged: (newDuration) {
    //
  },
);

更多Cupertino持续时间选择器模式：

CupertinoTimerPickerMode.hms
CupertinoTimerPickerMode.hm
CupertinoTimerPickerMode.ms

更多关于Flutter日期选择插件custom_flutter_rounded_date_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter日期选择插件custom_flutter_rounded_date_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用custom_flutter_rounded_date_picker插件的示例代码。这个插件允许你创建一个圆角样式的日期选择器。

首先，确保你已经在pubspec.yaml文件中添加了依赖：

dependencies:
  flutter:
    sdk: flutter
  custom_flutter_rounded_date_picker: ^x.y.z  # 替换为最新版本号

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

接下来，你可以在你的Flutter应用中使用这个日期选择器。以下是一个完整的示例代码：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Date Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  DateTime selectedDate = DateTime.now();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Date Picker Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Selected Date: ${selectedDate.toLocal()}',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () async {
                final DateTime? pickedDate = await showRoundedDatePicker(
                  context: context,
                  initialDate: selectedDate,
                  firstDate: DateTime(1900),
                  lastDate: DateTime(2101),
                  builder: (BuildContext context, Widget? child) {
                    return Theme(
                      data: ThemeData(
                        colorScheme: ColorScheme.fromSwatch(
                          primarySwatch: Colors.blue,
                        ),
                      ),
                      child: child!,
                    );
                  },
                );
                if (pickedDate != null && pickedDate != selectedDate) {
                  setState(() {
                    selectedDate = pickedDate;
                  });
                }
              },
              child: Text('Select Date'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. MyApp是应用程序的根组件。
  2. MyHomePage是主页面，包含一个文本显示选中的日期和一个按钮来打开日期选择器。
  3. 使用showRoundedDatePicker函数来显示日期选择器。这个函数返回一个Future<DateTime?>，即用户选择的日期。
  4. 用户选择日期后，通过setState方法更新UI。

这个示例展示了如何使用custom_flutter_rounded_date_picker插件来创建一个圆角样式的日期选择器，并处理用户选择的日期。你可以根据需要进一步自定义日期选择器的外观和行为。

回到顶部