Flutter时间选择插件duration_picker2的使用

duration_picker2 是一个用于在 Flutter 应用程序中选择持续时间的小部件。该插件受到 Material Design 时间选择器的启发，提供了直观的时间选择界面。

示例展示

以下是 duration_picker2 的功能演示：

使用步骤

1. 添加依赖

在项目的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  duration_picker2: "^1.0.0"

然后运行 flutter pub get 来安装依赖。

2. 导入必要的包

在需要使用 duration_picker2 的文件中导入以下包：

import 'package:duration_picker2/duration_picker.dart';
import 'package:flutter/material.dart';

3. 创建基本示例

以下是一个完整的示例代码，展示了如何使用 duration_picker2 插件：

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 Picker Demo',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Duration 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> {
  // 初始化持续时间为 21 秒
  Duration _initTime = const Duration(seconds: 21);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 使用 DurationPicker 小部件
            Expanded(
              child: DurationPicker(
                initialTime: _initTime,
                minTime: const Duration(seconds: 15), // 最小时间为 15 秒
                maxTime: const Duration(seconds: 30), // 最大时间为 30 秒
                enableHapticFeedback: false, // 禁用触觉反馈
                baseUnit: BaseUnit.second, // 基础单位为秒
                onChange: (val) {
                  setState(() {
                    _initTime = val; // 更新选择的时间
                  });
                },
                snapToMins: 5.0, // 每次调整步长为 5 秒
              ),
            )
          ],
        ),
      ),
      floatingActionButton: Builder(
        builder: (BuildContext context) => FloatingActionButton(
          onPressed: () async {
            // 显示弹出式持续时间选择器
            var resultingDuration = await showDurationPicker(
              context: context,
              initialTime: const Duration(seconds: 21),
              minTime: const Duration(seconds: 15),
              maxTime: const Duration(seconds: 30),
              baseUnit: BaseUnit.second,
            );
            // 显示选择结果
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(content: Text('Chose duration: $resultingDuration')),
            );
          },
          tooltip: 'Popup Duration Picker',
          child: const Icon(Icons.add),
        ),
      ),
    );
  }
}