Flutter时间范围选择插件flutter_time_range的使用

Flutter时间范围选择插件flutter_time_range的使用

flutter_time_range 是一个完全可自定义的Flutter小部件，允许用户选择时间范围（从 - 到）。以下是关于如何使用该插件的详细说明和完整示例代码。

展示

示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_time_range 插件。该示例包括24小时格式和12小时格式的时间选择器。

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

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

class MyApp extends StatefulWidget {
  [@override](/user/override)
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  final _messangerKey = GlobalKey<ScaffoldMessengerState>();
  final _navigatorKey = GlobalKey<NavigatorState>();

  [@override](/user/override)
  void initState() {
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
        navigatorKey: _navigatorKey,
        scaffoldMessengerKey: _messangerKey,
        title: 'Test Time Range Picker',
        home: Scaffold(
            appBar: AppBar(
              title: Text("Time Range Picker"),
            ),
            body: Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                children: [
                  // 24小时格式的时间选择按钮
                  TextButton(
                    child: Text("Show Dialog 24 Hours"),
                    onPressed: () {
                      showTimeRangePicker(
                          _navigatorKey.currentState.overlay.context);
                    },
                  ),
                  // 12小时格式的时间选择按钮
                  TextButton(
                    child: Text("Show Dialog 12 Hours"),
                    onPressed: () {
                      showTimeRangePicker12Hour(
                          _navigatorKey.currentState.overlay.context);
                    },
                  ),
                ],
              ),
            )));
  }

  // 24小时格式的时间选择器
  Future<void> showTimeRangePicker(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Choose event time"),
            content: TimeRangePicker(
              // 初始化开始时间和结束时间为当前时间
              initialFromHour: DateTime.now().hour,
              initialFromMinutes: DateTime.now().minute,
              initialToHour: DateTime.now().hour,
              initialToMinutes: DateTime.now().minute,
              backText: "Back", // 返回按钮文本
              nextText: "Next", // 下一步按钮文本
              cancelText: "Cancel", // 取消按钮文本
              selectText: "Select", // 确认按钮文本
              editable: true, // 是否可编辑
              is24Format: true, // 使用24小时格式
              disableTabInteraction: true, // 禁用标签交互
              iconCancel: Icon(Icons.cancel_presentation, size: 12), // 取消按钮图标
              iconNext: Icon(Icons.arrow_forward, size: 12), // 下一步按钮图标
              iconBack: Icon(Icons.arrow_back, size: 12), // 返回按钮图标
              iconSelect: Icon(Icons.check, size: 12), // 确认按钮图标
              separatorStyle: TextStyle(color: Colors.grey[900], fontSize: 30), // 分隔符样式
              onSelect: (from, to) {
                // 选择时间后显示SnackBar
                _messangerKey.currentState.showSnackBar(
                    SnackBar(content: Text("From : $from, To : $to")));
                Navigator.pop(context); // 关闭对话框
              },
              onCancel: () => Navigator.pop(context), // 取消时关闭对话框
            ),
          );
        });
  }

  // 12小时格式的时间选择器
  Future<void> showTimeRangePicker12Hour(BuildContext context) {
    return showDialog(
        context: context,
        builder: (BuildContext context) {
          return AlertDialog(
            title: Text("Choose event time"),
            content: TimeRangePicker(
              // 初始化开始时间和结束时间为当前时间
              initialFromHour: DateTime.now().hour,
              initialFromMinutes: DateTime.now().minute,
              initialToHour: DateTime.now().hour,
              initialToMinutes: DateTime.now().minute,
              backText: "Back", // 返回按钮文本
              nextText: "Next", // 下一步按钮文本
              cancelText: "Cancel", // 取消按钮文本
              selectText: "Select", // 确认按钮文本
              editable: true, // 是否可编辑
              is24Format: false, // 使用12小时格式
              disableTabInteraction: true, // 禁用标签交互
              iconCancel: Icon(Icons.cancel_presentation, size: 12), // 取消按钮图标
              iconNext: Icon(Icons.arrow_forward, size: 12), // 下一步按钮图标
              iconBack: Icon(Icons.arrow_back, size: 12), // 返回按钮图标
              iconSelect: Icon(Icons.check, size: 12), // 确认按钮图标
              inactiveBgColor: Colors.grey[800], // 非活动背景颜色
              timeContainerStyle: BoxDecoration(
                  color: Colors.grey[800],
                  borderRadius: BorderRadius.circular(7)), // 时间容器样式
              separatorStyle: TextStyle(color: Colors.grey[900], fontSize: 30), // 分隔符样式
              onSelect: (from, to) {
                // 选择时间后显示SnackBar
                _messangerKey.currentState.showSnackBar(
                    SnackBar(content: Text("From : $from, To : $to")));
                Navigator.pop(context); // 关闭对话框
              },
              onCancel: () => Navigator.pop(context), // 取消时关闭对话框
            ),
          );
        });
  }
}