比较 Flutter 日期选择器库【Flutter 专题 6】-阿里云开发者社区

日期选择器是对 UI 的有用补充，它使您的应用程序用户可以轻松地从日历中选择日期。无论您是在注册表单中添加出生日期字段，还是为用户提供预约时间段，您都可以使用日期选择器库来简化流程。

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

要学习本教程，您需要：

Flutter 安装在你的机器上
Flutter 基础知识
熟悉 Dart
Xcode 或 Android Studio 安装在您的机器上
用于测试的 iOS 模拟器或 Android 模拟器
一个代码编辑器，即 VS Code

让我们开始吧！

Flutter 日期时间选择器

该Flutter日期时间选择器很容易定制，支持日期和时间选择在多国语言。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),
    ));

复制代码

在上面的代码中，每当用户单击显示日期时间选择器按钮时，我们都会showDatePicker使用TextButton. 回想一下，该软件包支持多种语言；在我们的例子中，我们将currentTime语言环境设置为LocaleType.en，将默认语言设置为英语。

接下来，打开您的 Android 模拟器或 iOS 模拟器并使用以下命令运行应用程序：

flutter run

复制代码

您的应用应类似于下图：

Flutter Datetime Picker 还支持主题，允许您自定义颜色以实现您想要的外观和感觉。让我们通过创建一个buttonText带有 inscription 的新组件来为我们的应用程序添加自定义样式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 日期范围选择器创建日期选择器，首先，通过在终端或命令提示符中运行以下代码来安装小部件：

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类创建日期范围。

您的应用应类似于以下屏幕截图：

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

Flutter `date_time_picker`

这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 是一个不错的选择。

这三种工具都提供有组织、有吸引力且可自定义的界面，您可以在几分钟内设置好这些界面。

今天的内容就介绍到这儿，大家喜欢的话，可以支持一下

比较 Flutter 日期选择器库【Flutter 专题 6】

Flutter 日期时间选择器

Flutter 日期范围选择器

Flutter `date_time_picker`

结论

热门文章

最新文章

相关课程

相关电子书

比较 Flutter 日期选择器库【Flutter 专题 6】

Flutter 日期时间选择器

Flutter 日期范围选择器

Flutter date_time_picker

结论

热门文章

最新文章

相关课程

相关电子书

Flutter `date_time_picker`