介绍Flutter的三个流行的日期选择器库

日期选择器是对你的用户界面的有益补充，它使你的应用程序的用户能够轻松地从日历中选择日期。无论你是在注册表格中添加出生日期字段，还是为用户提供预约的时间段，你都可以使用日期选择器库来简化这一过程。

在本教程中，我们将探讨Flutter的三个流行的日期选择器库：Flutter Datetime Picker、Flutter Date Range Picker和Flutterdate_time_picker 。我们将研究每个库的功能，并在一个简单的移动应用程序中安装每个库。

要跟上这个教程，你将需要：

• 在您的机器中安装Flutter
• 对Flutter有基本了解
• 熟悉Dart
• 在您的机器上安装Xcode或Android Studio
• 用于测试的 iOS 模拟器或 Android 仿真器
• 一个代码编辑器，即VS Code

让我们开始吧!

Flutter Datetime Picker

Flutter Datetime Picker易于定制，支持多语言的日期和时间选择。Flutter Datetime Picker 的安装很简单，并提供了一个光滑的、用户友好的界面。

为了用Flutter Datetime Picker构建我们的日期选择器，我们将初始化一个新的Flutter应用程序并安装一份Flutter Datetime Picker软件包。如果您使用的是Mac，请从您的终端导航到您的工作目录，如果您使用的是Windows，请从命令提示符导航。运行下面的代码：

flutter create date_picker_app

一旦初始化完成，导航到date_picker_app 文件夹，运行下面的命令，安装Flutter Datetime Picker包：

flutter pub add flutter_datetime_picker

现在，让我们建立一个基本的日期和时间选择器，一旦用户选择了一个按钮，就会显示出来。添加以下代码到main.dart 。

TextButton(
    onPressed: () {
        DatePicker.showDatePicker(context,
                              showTitleActions: true,
                              minTime: DateTime(2018, 3, 5),
                              maxTime: DateTime(2019, 6, 7), onChanged: (date) {
                            print('change $date');
                          }, onConfirm: (date) {
                            print('confirm $date');
                          }, currentTime: DateTime.now(), locale: LocaleType.en);
    },
    child: Text(
        'show date time picker',
        style: TextStyle(color: Colors.blue),
    ));

在上面的代码中，每当用户点击显示日期时间选取器按钮时，我们就用TextButton ，启动showDatePicker 。回顾一下，该软件包在发货时支持多种语言；在我们的案例中，我们将currentTime 地区设置为LocaleType.en ，将默认语言设置为英语。

接下来，打开你的安卓模拟器或iOS模拟器，用下面的命令运行该应用程序:

flutter run 

你的应用程序应该与下面的图片相似。

Flutter Datetime Picker还支持主题化，允许你自定义颜色以达到你想要的外观和感觉。让我们通过创建一个新的buttonText 组件来为我们的应用程序添加自定义样式，铭文为Date 。在main.dart 文件中，为新的buttonText 组件添加以下代码。

import 'package:flutter/material.dart';
import 'package:flutter_datetime_picker/flutter_datetime_picker.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ),
      home: new HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Datetime Picker'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            //new buttonText starts
            TextButton(
                onPressed: () {
                  DatePicker.showDatePicker(context,
                      showTitleActions: true,
                      minTime: DateTime(2018, 3, 5),
                      maxTime: DateTime(2019, 6, 7),
                      theme: DatePickerTheme(
                          headerColor: Colors.grey,
                          backgroundColor: Colors.green,
                          itemStyle: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                              fontSize: 18),
                          doneStyle:
                              TextStyle(color: Colors.white, fontSize: 16)),
                      onChanged: (date) {
                    print('change $date in time zone ' +
                        date.timeZoneOffset.inHours.toString());
                  }, onConfirm: (date) {
                    print('confirm $date');
                  }, currentTime: DateTime.now(), locale: LocaleType.en);
                },
                child: Text(
                  'Date with theme',
                  style: TextStyle(color: Colors.green),
                )),
              //new buttonText ends.
          ],
        ),
      ),
    );
  }
}

在你的终端或命令提示符中按r键，重新启动你的应用程序。现在，当你点击带有主题的日期按钮时，你的应用程序应该看起来与下面的截图相似。

Flutter日期范围选择器

通过Flutter日期范围选择器，用户可以轻松地选择单个日期、多个日期或一个日期范围。为了限制日期选择，您可以设置一个最小或最大的天数供用户选择。你还可以将日期涂黑或限制，以防止用户选择它们。

要用Flutter Date Range Picker创建一个日期选择器，首先，通过在终端或命令提示符中运行下面的代码来安装该部件。

flutter pub add syncfusion_flutter_datepicker

一旦安装完成，用下面的代码更新main.dart 文件。

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
void main() {
  return runApp(MyApp());
}
/// My app class to display the date range picker
class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}
/// State for MyApp
class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Date Range picker'),
            ),
            body: Stack(
              children: <Widget>[
                Positioned(
                  left: 0,
                  right: 0,
                  top: 0,
                  height: 80,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                  ),
                ),
                Positioned(
                  left: 0,
                  top: 80,
                  right: 0,
                  bottom: 0,
                  child: SfDateRangePicker(
                    selectionMode: DateRangePickerSelectionMode.range,
                    initialSelectedRange: PickerDateRange(
                        DateTime.now().subtract(const Duration(days: 4)),
                        DateTime.now().add(const Duration(days: 3))),
                  ),
                )
              ],
            )));
  }
}

SfDateRangePicker 类的第一个参数，selectionMode ，表示要显示哪种类型的日期。在这个例子中，我们显示的是range ，但是，你可以选择显示single 。

第二个参数initialSelectedRange 是负责默认选择的日期。我们使用DateTime 类来创建日期范围。

你的应用程序看起来应该与下面的截图相似。

只用了几行代码，我们就创建了一个有组织的日期选择器，并有一个令人愉悦的用户界面。

Flutterdate_time_picker

该 [date_time_picker](https://pub.dev/packages/date_time_picker)是一个Flutter小组件，使用文本窗体字段显示日期和时间。

在你的终端或命令提示符中运行下面的代码来安装该软件包。

flutter pub add date_time_picker

要用Flutter创建一个简单的日期选择器date_time_picker ，只需添加下面的代码。

DateTimePicker(
  initialValue: '',
  firstDate: DateTime(2000),
  lastDate: DateTime(2100),
  dateLabelText: 'Date',
  onChanged: (val) => print(val),
  validator: (val) {
    print(val);
    return null;
  },
  onSaved: (val) => print(val),
);

在上面的代码片段中，我们利用了DateTimepicker 类。initialValue 保存了date 文本字段的值。firstDate 是日历开始显示的年份，而lastDate 则是它结束的最后年份。

现在我们了解了date_time_picker 包的基本原理，让我们来建立和定制我们自己的。要创建一个日期和时间选择器对话框，用下面的代码替换你的main.dart 文件中的代码。

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

void main() {
  return runApp(MyApp());
}
/// My app class to display the date range picker
class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}
/// State for MyApp
class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Date Range picker'),
            ),
            body: Stack(
              children: <Widget>[
                DateTimePicker(
                  initialValue: '',
                  firstDate: DateTime(2000),
                  lastDate: DateTime(2100),
                  dateLabelText: 'Date',
                  onChanged: (val) => print(val),
                  validator: (val) {
                    print(val);
                    return null;
                  },
                  onSaved: (val) => print(val),
                )
              ],
            )));
  }
}

你的应用程序看起来应该与下面的截图相似。

当你点击date 文本字段时，你应该有一个类似于下面屏幕截图的日历对话框。

结论

在探索了三个流行的Flutter日期选择器库之后，您现在应该有能力选择一个最适合您的需求的库，并将其安装在您自己的应用程序中。虽然这些工具是相似的，但正确的选择可能取决于您项目的独特性质。

例如，如果您的应用程序使用英语以外的语言，您可能最好使用Flutter Datetime Picker。如果要轻松地限制日期选择，Flutter Date Range Picker是一个不错的选择。

这三个工具都提供了有组织、有吸引力和可定制的界面，你可以在几分钟内设置好。