SquigglySlider constructor

const SquigglySlider({
  1. Key? key,
  2. required double value,
  3. double? secondaryTrackValue,
  4. required ValueChanged<double>? onChanged,
  5. ValueChanged<double>? onChangeStart,
  6. ValueChanged<double>? onChangeEnd,
  7. double min = 0.0,
  8. double max = 1.0,
  9. int? divisions,
  10. String? label,
  11. Color? activeColor,
  12. Color? inactiveColor,
  13. Color? secondaryActiveColor,
  14. Color? thumbColor,
  15. WidgetStateProperty<Color?>? overlayColor,
  16. MouseCursor? mouseCursor,
  17. SemanticFormatterCallback? semanticFormatterCallback,
  18. FocusNode? focusNode,
  19. bool autofocus = false,
  20. double squiggleAmplitude = 0.0,
  21. double squiggleWavelength = 0.0,
  22. double squiggleSpeed = 1.0,
  23. bool useLineThumb = false,
})

Creates a squiggly Material Design slider.

The squiggle itself is a sinus curve with rounded edges, vertically centered its amplitude and wavelength can be adjusted by squiggleAmplitude and squiggleWavelength respectively, the curve itself is animated, and the animation speed can be adjusted with squiggleSpeed which controls how many waves pass from left to right in one second.

The slider itself does not maintain any state. Instead, when the state of the slider changes, the widget calls the onChanged callback. Most widgets that use a slider will listen for the onChanged callback and rebuild the slider with a new value to update the visual appearance of the slider.

  • value determines currently selected value for this slider.
  • onChanged is called while the user is selecting a new value for the slider.
  • onChangeStart is called when the user starts to select a new value for the slider.
  • onChangeEnd is called when the user is done selecting a new value for the slider.

You can override some of the colors with the activeColor and inactiveColor properties, although more fine-grained control of the appearance is achieved using a SliderThemeData.

A slider can be used to select from either a continuous or a discrete set of values. The default is to use a continuous range of values from min to max. To use discrete values, use a non-null value for divisions, which indicates the number of discrete intervals. For example, if min is 0.0 and max is 50.0 and divisions is 5, then the slider can take on the discrete values 0.0, 10.0, 20.0, 30.0, 40.0, and 50.0.

The terms for the parts of a slider are:

  • The "thumb", which is a shape that slides horizontally when the user drags it.
  • The "track", which is the line that the slider thumb slides along.
  • The "value indicator", which is a shape that pops up when the user is dragging the thumb to indicate the value being selected.
  • The "active" side of the slider is the side between the thumb and the minimum value.
  • The "inactive" side of the slider is the side between the thumb and the maximum value.

The slider will be disabled if onChanged is null or if the range given by min..max is empty (i.e. if min is equal to max).

The slider widget itself does not maintain any state. Instead, when the state of the slider changes, the widget calls the onChanged callback. Most widgets that use a slider will listen for the onChanged callback and rebuild the slider with a new value to update the visual appearance of the slider. To know when the value starts to change, or when it is done changing, set the optional callbacks onChangeStart and/or onChangeEnd.

By default, a slider will be as wide as possible, centered vertically. When given unbounded constraints, it will attempt to make the track 144 pixels wide (with margins on each side) and will shrink-wrap vertically.

Implementation

const SquigglySlider({
  super.key,
  required super.value,
  super.secondaryTrackValue,
  required super.onChanged,
  super.onChangeStart,
  super.onChangeEnd,
  super.min = 0.0,
  super.max = 1.0,
  super.divisions,
  super.label,
  super.activeColor,
  super.inactiveColor,
  super.secondaryActiveColor,
  super.thumbColor,
  super.overlayColor,
  super.mouseCursor,
  super.semanticFormatterCallback,
  super.focusNode,
  super.autofocus = false,
  this.squiggleAmplitude = 0.0,
  this.squiggleWavelength = 0.0,
  this.squiggleSpeed = 1.0,
  this.useLineThumb = false,
});