Slider is part of material design library in Flutter. Slider is used to select the values. It can be continues or discrete type. By default it acts as continues slider.
Slider have many component like min value, max value, default value and more. You can perform action or save the value into a variable when slider scroll. Default value is the initial value which set when slider first launch.
Slider is the part of material design library, so you needed to import following package before to use it.
import 'package:flutter/material.dart';
How to create slider in Flutter
To create a slider just use the Slider() library and implement its features. Some of features are below-
- value: this is initial value which set by default when we open the screen which contains the slider.
- thumb: this is circular shape which slides on the slider track.
- track: this is the horizontal line on which thumb slides.
Example
Set initial value by creating a double type variable and assign initial value in that.
double sliderValue = 20.0;
Slider(
value: sliderValue,
min: 1,
max: 1000,
activeColor: Colors.red,
inactiveColor: Colors.black,
divisions: 5,
label: sliderValue.round().toString(),
onChanged: (double nvalue) {
setState(() {
sliderValue = nvalue.roundToDouble();
});
},
),
//to show the slider value
Text(sliderValue.toString()),Always use setState(){} method inside onChange() to assign the slider value into any variable. Initially this is double type so it also provides double value. If you want value in int then you have to convert it. To use slider directly copy and paste the above code.
Result
Range Slider in Flutter
Range slider in flutter used to select two value from minimum and maximum. All the features are same but some components are different. It takes two value as shown in below image. To set the initial value you have to create a variable of RangeValues() Type and pass min and max initial values there.
RangeValues rangeValues = const RangeValues(20, 50);
RangeSlider(
values: rangeValues,
min: 10,
max: 100,
divisions: 10,
activeColor: Colors.blue,
inactiveColor: Colors.red,
labels: RangeLabels(rangeValues.start.round().toString(),
rangeValues.end.round().toString()),
onChanged: (RangeValues values) {
rangeValues = values;
}),
Text(rangeValues.toString()),Result
Thank you for learning Slider In Flutter from FlutterTPoint. Please visit more Flutter and Android examples which can help you to build your skill better.
