interactive_slider_kit 0.1.1

Interactive Flutter sliders and dials: circular knobs, tier gauges, activity rings, bedtime pickers, studio meters, and category spin wheels — with themes, haptics, and callbacks.

interactive_slider_kit

Interactive Flutter sliders and dials: knobs, gauges, rings, bedtime pickers, studio meters, and category spin wheels.

Try the interactive example

• Live (web): GitHub Pages demo — open a widget, tune options, tap Copy config.
• Local: the example/ project (gallery + per-widget customizers).

Install

dependencies:
  interactive_slider_kit: ^0.1.1

import 'package:interactive_slider_kit/interactive_slider_kit.dart';

Widgets

Widget	What it does
CircularKnob	Rotary knob on a 270° tick arc (steps, themes, haptics)
GaugeMeter	Vertical tier gauge with colored bands + value/status labels
ActivityRings	Three concentric progress rings (0–100)
BedtimeSlider	24-hour bedtime / wake circular picker
StudioMeter	Audio strip: fader + knob + read-only VU
CategorySpinWheel	JSON-driven flingable category / sub-value wheel

All widgets support lightTheme and optional backgroundColor. Defaults keep a dark look except CircularKnob (lightTheme: true by default).

Callbacks (track widget state)

Every widget exposes optional callbacks so you can react to live interaction and settle events:

Widget	Callbacks	Payload
CircularKnob	onValueChanged, onChangeEnd	double? value
GaugeMeter	onValueChanged, onChangeEnd	value, tierLabel, tierColor
ActivityRings	onRingSelectionChanged	selectedRingIndex, ringTitle, progress, ringColor
BedtimeSlider	onBedTimeChanged, onWakeTimeChanged, onChangeEnd	bed/wake hours (0–24)
StudioMeter	onFaderChanged, onFaderChangeEnd, onKnobChanged, onKnobChangeEnd	fader/knob double? (VU is read-only)
CategorySpinWheel	onSelectionChanged, onSpinEnd	category/item indexes + names/description

*Changed / onSelectionChanged fire during interaction; *ChangeEnd / onSpinEnd fire when the gesture settles. The example customizers wire these up and show live values — open a widget, interact, then use Copy config to paste a snippet that includes the callbacks.

Quick start

CircularKnob(
  min: 0,
  max: 100,
  initialValue: 40,
  stepSize: 1,
  onValueChanged: (v) => debugPrint('$v'),
)

CategorySpinWheel(
  wheelAlignment: SpinWheelAlignment.center,
  lightTheme: true,
  onSelectionChanged: (cat, item, name, shortName, desc) async {
    debugPrint('$name / $shortName');
  },
)

Example (local)

git clone https://github.com/Dev-Muhammad-Junaid/interactive_slider_kit.git
cd interactive_slider_kit/example
flutter pub get
flutter run -d chrome --web-port=8080

Development

flutter pub get
dart format .
flutter analyze --fatal-infos
flutter test
dart pub publish --dry-run

License

MIT. See LICENSE.