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.