Flutter Fluid Slider Package

flutter fluid slider

a fluid slider design that works just like the slider material widget for flutter.

used to select from a range of values.

installation

just add the fluid slider package to your dependencies in the pubspec.yaml file:

dependencies:
  flutter_fluid_slider: ^0.0.1

basic usage

place the fluidslider in your widget tree.

fluidslider(
  value: _value,
  onchanged: (double newvalue) {
    setstate(() {
      _value = newvalue;
    });
  },
  min: 0.0,
  max: 100.0,
),

properties

• value : [required] the currently selected value for this slider. the slider’s thumb is drawn at a position that corresponds to this value.
• min : the minimum value the user can select. defaults to 0.0. must be less than or equal to max.
• max : the maximum value the user can select. defaults to 1.0. must be less than or equal to min.
• start : the widget to be displayed as the min label. for eg: an icon can be displayed. if not provided the min value is displayed as text.
• end : the widget to be displayed as the max label. for eg: an icon can be displayed. if not provided the max value is displayed as text.
• onchanged : [required] called during a drag when the user is selecting a new value for the slider by dragging.
  • the slider passes the new value to the callback but does not actually change state until the parent widget rebuilds the slider with the new value.
  • if null, the slider will be displayed as disabled.
• onchangestart : called when the user starts selecting a new value for the slider. the value passed will be the last value that the slider had before the change began.
• onchangeend : called when the user is done selecting a new value for the slider.
• labelstextstyle : the styling of the min and max text that gets displayed on the slider. if not provided the ancestor theme‘s accenttexttheme text style will be applied.
• valuetextstyle : the styling of the current value text that gets displayed on the slider. if not provided the ancestor theme‘s texttheme.title text style with bold will be applied .
• slidercolor : the color of the slider. if not provided the ancestor theme‘s primarycolor will be applied.
• thumbcolor : the color of the thumb. if not provided the colors.white will be applied.