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

wheel_chooser のカバー
パッケージ詳細v1.1.2

wheel_chooser

WheelChooser は、車輪のような見た目のスピンナーをスクロールすることで、数値/文字列/ウィジェットを選択できるウィジェットです。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
1.3万
いいね数
89
Pub ポイント
130

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

flutter pub add wheel_chooser

パッケージ概要

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

WheelChooser は、数値、文字列、またはカスタムウィジェットなどの値を選択するための視覚的に魅力的なホイールベースのインターフェースを提供する Flutter ウィジェットです。物理的なスピンナーからインスピレーションを得ており、スムーズなアニメーションでオプションをスクロールできるため、フォーム、設定、インタラクティブな入力に最適です。このパッケージは Android、iOS、Web、macOS、Windows、Linux など複数のプラットフォームをサポートしており、デバイス間で一貫した動作を保証します。軽量で簡単に統合できるため、直感的なデータ選択が必要なアプリケーションに適しています。

用途

  • 離散的な選択肢を持つフォーム入力
  • 日時選択フィールド
  • カスタム数値セレクタ
  • オプションホイール付きの設定
  • インタラクティブな教育アプリ

主な機能

  • スムーズスクロールアニメーション
  • カスタムウィジェットをサポート
  • クロスプラットフォーム互換性
  • 設定可能なアイテム数
  • 既存のUIとの簡単な統合
  • レスポンシブデザイン

適している対象

  • フォームインターフェースを構築している開発者
  • 視覚的なデータ選択が必要なアプリ
  • 教育またはゲームアプリケーション
  • マルチプラットフォーム Flutter プロジェクト
  • 魅力的な入力方法を探しているUIデザイナー

注意事項

  • 大規模なデータセットの場合、パフォーマンスチューニングが必要になる可能性があります
  • 制限された組み込み検証
  • 非常に高い頻度の更新には最適化されていません
  • アクセシビリティのための注意深いスタイル設定が必要です
  • 小〜中規模のオプションリストに最適

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

wheel_chooser

pub package

WheelChooser is a widget allowing user to choose numbers/strings/widgets by scrolling spinners with wheel look.

vertical

Getting Started

Install
dependencies:
  wheel_chooser: ^1.1.2
Creating WheelChooser Widget

use it to show Strings

WheelChooser(
    onValueChanged: (s) => print(s),
    datas: ["a", "b", "c"],
  );

use it to show Integers

WheelChooser.integer(
    onValueChanged: (i) => print(i),
    maxValue: 10,
    minValue: 1,
    step: 2,
  );

use it to show display titles and return a value associated with the selected value


List<WheelChoice> aChoices = [
  WheelChoice(value: DateTime(2000,1,1,9,0), title: '9AM'),
  WheelChoice(value: DateTime(2000,1,1,9,30), title: '9:30AM'),
  WheelChoice(value: DateTime(2000,1,1,10,0), title: '10AM'),
  WheelChoice(value: DateTime(2000,1,1,10,30), title: '10:30AM'),
];

WheelChooser.choices(
    choices = aChoices,
    onChoiceChanged: (value) {
      // returns DateTime of selected title
      print('selected time is ${value.hour} hours and ${value.minutes} minutes')
    }
  );

use it to show CustomWidgets

 WheelChooser.custom(
    onValueChanged: (a) => print(a),
    children: <Widget>[
      Text("data1"),
      Text("data2"),
      Text("data3"),
    ],
  );
Usage examples

vertical

WheelChooser.integer(
        onValueChanged: (s) => print(s.toString()),
        maxValue: 18,
        minValue: 1,
        initValue: 5,
        unSelectTextStyle: TextStyle(color: Colors.grey),
      )

vertical

WheelChooser.integer(
        onValueChanged: (s) => print(s.toString()),
        maxValue: 20,
        minValue: 1,
        initValue: 9,
        horizontal: true,
        unSelectTextStyle: TextStyle(color: Colors.grey),
      )

From v0.1.1 support Infinite. From v1.0.0 support null safe.

カテゴリー

ソースリポジトリ

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