Flutter UI Essentials — Sliders
3 min readApr 4, 2024
We use Sliders to make selections from range of values.
Material sliders
- configurations: Continuous, discrete, centered, range selection
- should display the full range of choices that are available
- value should immediately visible
- best to change settings such as volume and brightness
Changes in Material 3
Configuration: Added centered configuration
Shape: New shape for slider tracks and handles. Slider elements change shape when selected.
Motion: Slider handle adjusts width upon selection. Slider tracks adjust in shape when sliding to the edge.
Color: New color mappings and compatibility with dynamic color
Flutter Slider Widget
Constructors
This will create a Material Design slider
Slider({
Key? key,
required double value,
double? secondaryTrackValue,
required ValueChanged<double>?
onChanged, ValueChanged<double>?
onChangeStart,
ValueChanged<double>? onChangeEnd,
double min = 0.0,
double max = 1.0,
int? divisions,
String? label,
Color? activeColor,
Color? inactiveColor,
Color? secondaryActiveColor,
Color? thumbColor…