flutter_duration_picker

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个专为选择持续时间而设计的 Flutter 小部件，其模型源自 Material 时间选择器。它提供了一个直观的界面，用于选择小时、分钟和秒等时间间隔，非常适合需要输入持续时间的应用程序——如计时器、健身应用或日程安排工具。该选择器支持自定义步长增量，并基于 Material Design 原则构建，确保跨平台的一致用户体验。

适合场景

设置计时器持续时间
配置锻炼会话时长
安排带时长的事件
输入任务时间估算
创建倒计时器

主要特点

Material Design 风格的用户界面
可自定义的时间步长增量
支持小时、分钟和秒
与现有表单的简单集成
响应式且可访问的布局

适合对象

需要持续时间选择的应用程序
需要时间间隔的表单输入
使用 Material Design 的移动应用
寻求轻量级时间选择器的开发者
依赖最少的项目

使用建议

未列出平台特定的自定义选项
仅限基本时长输入，不支持高级功能
不支持 AM/PM 或日期组件
需要手动处理验证
未提及内置本地化支持

原始 README

以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。

Duration Picker for flutter

A little widget for picking durations. Heavily inspired from the Material Design time picker widget.

This repo is unmaintained, please check out the fork here: https://github.com/juliansteenbakker/duration_picker

Example Usage:

dependencies:
  flutter_duration_picker: "^1.0.0"

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

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

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

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

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Duration _duration = Duration(hours: 0, minutes: 0);
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Expanded(
		// Use it from the context of a stateful widget, passing in
		// and saving the duration as a state variable.
                child: DurationPicker(
              duration: _duration,
              onChange: (val) {
                this.setState(() => _duration = val);
              },
              snapToMins: 5.0,
            ))
          ],
        ),
      ),
      floatingActionButton: Builder(
          builder: (BuildContext context) => new FloatingActionButton(
                onPressed: () async {
		  // Use it as a dialog, passing in an optional initial time
		  // and returning a promise that resolves to the duration
		  // chosen when the dialog is accepted. Null when cancelled.
                  Duration resultingDuration = await showDurationPicker(
                    context: context,
                    initialTime: new Duration(minutes: 30),
                  );
                  Scaffold.of(context).showSnackBar(new SnackBar(
                      content: new Text("Chose duration: $resultingDuration")));
                },
                tooltip: 'Popup Duration Picker',
                child: new Icon(Icons.add),
              )),
    );
  }
}

搜索插件、代码仓与 APP 分类

安装插件