Flutter DateTimeRange 日期时间范围选择器

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

许多应用程序需要一个日期范围选择器，以便用户可以过滤特定时间段内的金融交易、订单、统计数据或类似内容的记录。本文将向您展示如何在不使用任何第三方插件的情况下在 Flutter 中实现日期范围选择器。

showDateRangePicker ()函数可用于显示包含日期范围选择器的全屏模式对话框。此日期范围选择器有两种模式

• 日历模式（默认）：可滚动的日历月网格，以直观的方式选择开始日期和结束日期

• 输入模式：用户可以通过点击编辑按钮（带有笔图标）从日历模式切换到此模式。开始日期和结束日期有两个文本字段。Flutter 将自动检测用户输入的无效日期并显示错误消息，因此您不必担心这种情况。

处理返回的结果

如果用户没有选择任何内容并关闭选择器，则结果将为null。否则，结果将是DateTimeRange对象。您可以像这样检索开始和结束日期：

DateTime startDate = result?.start;
DateTime endDate = result?.end;

开始日期和结束日期如下所示：

2022-02-24 00:00:00.000

一般来说，只需要日期部分（年、月、日）。您可以像这样删除后面的部分（小时、分钟、秒和微秒）：

String start = startDate.toString().split(' ')[0];
String end = endDate.toString().split(' ')[0];

应用预览

我们要构建的示例应用程序有一个浮动操作按钮。按下按钮时，将显示日期范围选择器，用户可以从中选择日期范围。结果将显示在屏幕上。

国际化支持

在你的Flutter项目配置文件中添加语言国际化支持

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter

然后在你的 Flutter 项目中的入口文件处配置中文环境，代码如下：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: '大前端之旅', locale: Locale("zh", "CH"),
      //程序支持的语言环境配置
      supportedLocales: [Locale("zh", "CH")],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const HomeScreen(),
    );
  }
}

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
​
void main() {
  runApp(const MyApp());
}
​
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: '大前端之旅', locale: Locale("zh", "CH"),
      //程序支持的语言环境配置
      supportedLocales: [Locale("zh", "CH")],
      localizationsDelegates: [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const HomeScreen(),
    );
  }
}
​
class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);
​
  @override
  State<HomeScreen> createState() => _HomeScreenState();
}
​
class _HomeScreenState extends State<HomeScreen> {
  DateTimeRange? _selectedDateRange;
​
  // This function will be triggered when the floating button is pressed
  void _show() async {
    final DateTimeRange? result = await showDateRangePicker(
        context: context,
        firstDate: DateTime(2022, 1, 1),
        lastDate: DateTime(2030, 12, 31),
        currentDate: DateTime.now(),
        locale: Locale("zh", "CH"),
        saveText: '完成',
        cancelText: "取消");
​
    if (result != null) {
      // Rebuild the UI
      print(result.start.toString());
      setState(() {
        _selectedDateRange = result;
      });
    }
  }
​
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('大前端之旅')),
      body: _selectedDateRange == null
          ? const Center(
              child: Text('Press the button to show the picker'),
            )
          : Padding(
              padding: const EdgeInsets.all(30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // Start date
                  Text(
                    "开始时间: ${_selectedDateRange?.start.toString().split(' ')[0]}",
                    style: const TextStyle(fontSize: 24, color: Colors.blue),
                  ),
                  const SizedBox(
                    height: 20,
                  ),
                  // End date
                  Text(
                      "结束时间: ${_selectedDateRange?.end.toString().split(' ')[0]}",
                      style: const TextStyle(fontSize: 24, color: Colors.red))
                ],
              ),
            ),
      // This button is used to show the date range picker
      floatingActionButton: FloatingActionButton(
        onPressed: _show,
        child: const Icon(Icons.date_range),
      ),
    );
  }
}
​

参考

• showDateRangePicker 函数(flutter.dev)

• DateRangePickerDialog 类(flutter.dev)

• DateTimeRange 类(flutter.dev)