A simple Flutter widget for updating a number using a pitch bender-like spinner
  • Dart 96.3%
  • Java 3.7%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
2024-01-23 12:36:45 +02:00
.idea initial commit 2019-03-10 18:52:41 +02:00
.vscode chore: format dart files 2022-08-08 18:59:21 +03:00
android/app/src/main/java/io/flutter/plugins feat: update dependencies 2024-01-23 12:36:29 +02:00
example feat: 0.6.0 2022-08-08 18:50:24 +03:00
lib feat: update dependencies 2024-01-23 12:36:29 +02:00
.editorconfig feat: v0.5.0 2022-08-08 02:26:27 +03:00
.gitignore feat: update dependencies 2024-01-23 12:36:29 +02:00
.metadata initial commit 2019-03-10 18:52:41 +02:00
.prettierrc feat: v0.5.0 2022-08-08 02:26:27 +03:00
CHANGELOG.md chore: bump version 2024-01-23 12:36:29 +02:00
LICENSE feat: v0.5.0 2022-08-08 02:26:27 +03:00
pubspec.yaml chore: bump version 2024-01-23 12:36:29 +02:00
README.md docs: update readme 2024-01-23 12:36:45 +02:00
wheel_spinner.iml initial commit 2019-03-10 18:52:41 +02:00

wheel_spinner

WheelSpinner provides you with a simple number spinner that resembles a wheel, knob, or more specifically pitch bender knobs. It allows you to update a single double value with a finger fling or drag as in the example below.

How to use

Simply import the package, and use the exposed WheelSpinner widget.

See all the individual parameters for more details on theme and display customization, as well as event handlers. Here is a a full usage example:

Widget build(BuildContext context) {
  return WheelSpinner(
    // required
    value: value,
    min: 0.0,
    max: 100.0,

    // optional
    onSlideStart: (val) => debugPrint(value),
    onSlideUpdate: (val) => onChange(value),
    onSlideDone: (val) => debugPrint(value),
    childBuilder: (val) => Text(val.toString()),
    theme: WheelSpinnerTheme.light(),
  );
}

Customizing the theme

You can use the theme property to override a theme once, or wrap many sliders in the same WheelSpinnerTheme widget, which references a theme in its' data property.

Direct override example:

WheelSpinner(
  value: value,
  min: 0.0,
  max: 100.0,
  onSlideUpdate: (val) => onChange(value),
  theme: WheelSpinnerTheme.light().copyWith(
    borderRadius: BorderRadius.circular(10),
  ),
)

Inherited widget override example:

WheelSpinnerTheme(
  data: WheelSpinnerTheme.light().copyWith(
    borderRadius: BorderRadius.circular(10),
  ),
  child: WheelSpinner(
    value: value,
    min: 0.0,
    max: 100.0,
    onSlideUpdate: (val) => onChange(value),
  ),
)

Contributing

I am developing this package on my free time, so any support, whether code, issues, or just stars is very helpful to sustaining its life. If you are feeling incredibly generous and would like to donate just a small amount to help sustain this project, I would be very very thankful!

Buy Me a Coffee at ko-fi.com

I welcome any issues or pull requests on GitHub. If you find a bug, or would like a new feature, don't hesitate to open an appropriate issue and I will do my best to reply promptly.

If you are a developer and want to contribute code, here are some starting tips:

  1. Fork this repository
  2. Run dart pub get
  3. Make any changes you would like
  4. Update the relevant documentation (readme, code comments)
  5. Create a PR on upstream