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

简介

time_range_picker 是一个用于Flutter的时间范围选择插件。它允许用户在应用中方便地选择一个时间范围。

开始使用

安装

首先，在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  time_range_picker: any

然后运行以下命令来获取包：

flutter packages get

基本用法

以下是一个基本的示例，展示如何使用 time_range_picker 插件：

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

void main() => runApp(MyApp());

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueGrey,
        body: Center(
          child: ElevatedButton(
            onPressed: () async {
              TimeRange result = await showTimeRangePicker(
                context: context,
              );
              print("result " + result.toString());
            },
            child: Text("Pure"),
          ),
        ));
  }
}

示例

简单示例

ElevatedButton(
  onPressed: () async {
    TimeRange? result = await showTimeRangePicker(
      context: context,
    );

    if (kDebugMode) {
      print("result $result");
    }
  },
  child: const Text("Pure"),
),

设置间隔

ElevatedButton(
  onPressed: () {
    showTimeRangePicker(
      context: context,
      start: const TimeOfDay(hour: 22, minute: 9),
      onStartChange: (start) {
        if (kDebugMode) {
          print("start time $start");
        }
      },
      onEndChange: (end) {
        if (kDebugMode) {
          print("end time $end");
        }
      },
      interval: const Duration(hours: 1),
      minDuration: const Duration(hours: 1),
      use24HourFormat: false,
      padding: 30,
      strokeWidth: 20,
      handlerRadius: 14,
      strokeColor: Colors.orange,
      handlerColor: Colors.orange[700],
      selectedColor: Colors.amber,
      backgroundColor: Colors.black.withOpacity(0.3),
      ticks: 12,
      ticksColor: Colors.white,
      snap: true,
      labels: [
        "12 am",
        "3 am",
        "6 am",
        "9 am",
        "12 pm",
        "3 pm",
        "6 pm",
        "9 pm"
      ].asMap().entries.map((e) {
        return ClockLabel.fromIndex(
            idx: e.key, length: 8, text: e.value);
      }).toList(),
      labelOffset: -30,
      labelStyle: const TextStyle(
          fontSize: 22,
          color: Colors.grey,
          fontWeight: FontWeight.bold),
      timeTextStyle: TextStyle(
          color: Colors.orange[700],
          fontSize: 24,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.bold),
      activeTimeTextStyle: const TextStyle(
          color: Colors.orange,
          fontSize: 26,
          fontStyle: FontStyle.italic,
          fontWeight: FontWeight.bold),
    );
  },
  child: const Text("Interval"),
),

其他参数和配置

time_range_picker 提供了丰富的参数选项来定制时间选择器的行为和外观。例如：

• disabledTime: 指定不可选的时间段。
• paintingStyle: 设置绘制样式（填充或描边）。
• onStartChange 和 onEndChange: 时间变化时的回调函数。
• interval: 最小时间步长。
• use24HourFormat: 使用24小时制还是12小时制。

更多详细参数请参考插件文档中的表格部分。

完整示例

以下是一个完整的示例，包含了多种配置方式：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Time Range Picker',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter Time Range Picker'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TimeOfDay _startTime = TimeOfDay.now();
  TimeOfDay _endTime = TimeOfDay.fromDateTime(DateTime.now().add(const Duration(hours: 3)));

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: ListView(children: [
        ElevatedButton(
          onPressed: () async {
            TimeRange? result = await showTimeRangePicker(context: context);
            if (kDebugMode) {
              print("result $result");
            }
          },
          child: const Text("Pure"),
        ),
        // 添加其他按钮示例...
        ElevatedButton(
          onPressed: () async {
            TimeRange? result = await showTimeRangePicker(
              context: context,
              paintingStyle: PaintingStyle.fill,
              backgroundColor: Colors.grey.withOpacity(0.2),
              labels: [
                ClockLabel.fromTime(time: const TimeOfDay(hour: 7, minute: 0), text: "Start Work"),
                ClockLabel.fromTime(time: const TimeOfDay(hour: 18, minute: 0), text: "Go Home")
              ],
              start: const TimeOfDay(hour: 10, minute: 0),
              end: const TimeOfDay(hour: 13, minute: 0),
              ticks: 8,
              strokeColor: Theme.of(context).primaryColor.withOpacity(0.5),
              ticksColor: Theme.of(context).primaryColor,
              labelOffset: 15,
              padding: 60,
              disabledTime: TimeRange(startTime: const TimeOfDay(hour: 18, minute: 0), endTime: const TimeOfDay(hour: 7, minute: 0)),
              disabledColor: Colors.red.withOpacity(0.5),
            );

            if (kDebugMode) {
              print("result $result");
            }
          },
          child: const Text("Filled Style"),
        ),
        // 继续添加其他示例...
      ]),
    );
  }
}

通过上述示例代码，您可以根据需要灵活地配置和使用 time_range_picker 插件来满足不同的应用场景。希望这些内容对您有所帮助！