wheel_chooser

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

WheelChooser 是一個 Flutter 小部件，提供一種視覺上吸引人的基於輪盤的介面，用於選擇數字、字串或自訂小部件等值。受實體旋轉器啟發，它允許使用者透過平滑動畫滾動瀏覽選項，非常適合表單、設定或互動式輸入。該套件支援 Android、iOS、Web、macOS、Windows 和 Linux 等多個平台，確保在各種裝置上行為一致。它輕量且容易整合，適用於需要直覺資料選擇的應用程式。

適用情境

具有離散選擇的表單輸入
時間或日期選擇器
自定數字選擇器
帶選項輪的設定
互動式教育應用

主要特色

平滑滾動動畫
支援自定組件
跨平台相容性
可設定的項目數量
與現有 UI 的輕鬆整合
響應式設計

適合對象

開發表單介面的開發者
需要視覺資料選擇的應用程式
教育類或遊戲類應用
跨平台 Flutter 專案
尋求吸引人輸入方式的UI設計師

使用建議

對於大型資料集，可能需要進行效能調校
有限的內建驗證
未針對極高頻率的更新進行優化
需要仔細的樣式設計以確保可存取性
最適合小型到中型選項清單

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

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.