Flutter时间选择插件duration_time_picker的使用

本包引入了一个紧凑且直观的小部件，用于选择时长。该小部件主要受Material Design时间选择器的启发，并针对用户体验进行了优化。它能够无缝集成到您的Flutter应用中，为用户提供一个简单而高效的方式来输入时间间隔。

示例用法

以下是一个完整的示例，展示了如何在Flutter应用中使用duration_time_picker插件：

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Duration Time Picker Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Duration Time Picker Demo'),
    );
  }
}

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

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 初始化变量，用于存储不同单位的时间间隔
  Duration _durationMilli = Duration.zero;
  Duration _durationSecond = Duration.zero;
  Duration _durationMin = Duration.zero;
  Duration _durationHour = Duration.zero;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        // 使用GridView来展示不同的时间选择器
        child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          children: [
            // 毫秒时间选择器
            DurationTimePicker(
              duration: _durationMilli, // 当前选中的毫秒数
              baseUnit: BaseUnit.millisecond, // 时间单位
              circleColor: Colors.grey.withOpacity(0.5), // 圆圈颜色
              progressColor: Colors.blue.withOpacity(1), // 进度条颜色
              onChange: (val) { // 监听选择变化
                setState(() {
                  _durationMilli = val; // 更新当前选中的毫秒数
                });
              },
            ),
            // 秒时间选择器
            DurationTimePicker(
              duration: _durationSecond, // 当前选中的秒数
              baseUnit: BaseUnit.second, // 时间单位
              progressColor: Colors.amber, // 进度条颜色
              onChange: (val) { // 监听选择变化
                setState(() {
                  _durationSecond = val; // 更新当前选中的秒数
                });
              },
            ),
            // 分钟时间选择器
            DurationTimePicker(
              duration: _durationMin, // 当前选中的分钟数
              baseUnit: BaseUnit.minute, // 时间单位
              circleColor: Colors.pink, // 圆圈颜色
              onChange: (val) { // 监听选择变化
                setState(() {
                  _durationMin = val; // 更新当前选中的分钟数
                });
              },
            ),
            // 小时时间选择器
            DurationTimePicker(
              duration: _durationHour, // 当前选中的小时数
              baseUnit: BaseUnit.hour, // 时间单位
              onChange: (val) { // 监听选择变化
                setState(() {
                  _durationHour = val; // 更新当前选中的小时数
                });
              },
            )
          ],
        ),
      ),
    );
  }
}