パッケージ、リポジトリ、アプリカテゴリを検索

パッケージ詳細v1.0.4

flutter_duration_picker

Material タイムピッカーを参考にした期間選択用ウィジェット。

30日間ダウンロード
60
いいね数
54
Pub ポイント
40

パッケージをインストール

flutter pub add flutter_duration_picker

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Material Time Picker をモデルにした、期間の選択に特化したFlutterウィジェットです。時間間隔(時、分、秒など)を選択するための直感的なインターフェースを提供し、タイマー、ワークアウトアプリ、スケジューリングツールなどの期間入力が必要なアプリに最適です。カスタマイズ可能なステップ増加をサポートしており、プラットフォーム間で一貫したユーザー体験を実現するMaterial Designの原則に基づいて構築されています。

用途

  • タイマーの期間を設定する
  • ワークアウトセッションの長さを設定する
  • 期間付きのイベントをスケジュールする
  • タスクの時間見積もりの入力
  • カウントダウンタイマーの作成

主な機能

  • Material Design を意識した UI
  • カスタマイズ可能な時間ステップの増分
  • 時、分、秒をサポートしています
  • 既存のフォームとの簡単な統合
  • 応答性がありアクセシビリティを考慮したレイアウト

適している対象

  • 期間選択が必要なアプリ
  • 時間間隔を必要とするフォーム入力
  • 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),
              )),
    );
  }
}

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。