A Slider widget in Flutter is a material design slider that allows users to select a value from a range of values. It is a horizontal bar that can be dragged to select a specific value or range of values. Sliders are commonly used to adjust settings such as volume, brightness, or to apply filters to images.
A RangSlider widget is similar to the slider widget but here we are provided two slider knobs so that we can select a range from the given range.
Slider Widget
To use a Slider widget in Flutter, you will need to import the flutter:widgets library and use the Slider class.
Here is an example where we create a basic Slider widget.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AllAboutFlutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const SliderWidgetTutorial(),
);
}
}
class SliderWidgetTutorial extends StatefulWidget {
const SliderWidgetTutorial({super.key});
@override
State<SliderWidgetTutorial> createState() => _SliderWidgetTutorialState();
}
class _SliderWidgetTutorialState extends State<SliderWidgetTutorial> {
double _sliderValue = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Slider Widget Tutorial'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Slider(
value: _sliderValue,
onChanged: (double value) {
setState(() {
_sliderValue = value;
});
},
),
Text('Slider Value: ${_sliderValue.toStringAsFixed(2)}'),
],
),
),
);
}
}
Output
This code will create a Slider widget that allows the user to select a value from 0.0 to 1.0. The value of the Slider is stored in a variable called _sliderValue, which is initially set to 0.0.
The onChanged callback function is called whenever the user moves the Slider. This function sets the _sliderValue variable to the new value selected by the user.
We can customize the Slider widget appearance or behaviour by using various properties and methods.Let us discuss some properties generally used of Slider widget.
value: It is the value that the slider knob is present at. This is a required property.
onChanged: This callback function is called whenever the value is changed with the help of knob. This needs to be configured otherwise the result wont show up.
min: The minimum value that can be selected.
max: The maximum value that can be selected.
divisions: The number of divisions to divide the range of values into.
label: A label to be displayed above the Slider.
activeColor: The color of the Slider track and thumb when the Slider is enabled.
inactiveColor: The color of the Slider track and thumb when the Slider is disabled.
onChangeStart: A callback function that is called when the user starts to drag the Slider.
onChangeEnd: A callback function that is called when the user stops dragging the Slider.
The customize the Slider widget theme, we can even use the SliderTheme for it.
RangeSlider Widget
The RangeSlider widget is very similar to the Slider widget. Here also we only need to import the flutter:widgets library and use the RangeSlider class.
Here is an basic example of RangeSlider widget.
main.dart
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AllAboutFlutter',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const RangeSliderTutorial(),
);
}
}
// Range Slider Widget
class RangeSliderTutorial extends StatefulWidget {
const RangeSliderTutorial({super.key});
@override
State<RangeSliderTutorial> createState() => _RangeSliderTutorialState();
}
class _RangeSliderTutorialState extends State<RangeSliderTutorial> {
RangeValues _rangeSliderValue = const RangeValues(0.0, 100.0);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Range Slider Widget Tutorial'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RangeSlider(
min: 0.0,
max: 100.0,
values: _rangeSliderValue,
onChanged: (RangeValues values) {
setState(() {
_rangeSliderValue = values;
});
},
),
Text(
'Range Slider Value: ${_rangeSliderValue.start.toStringAsFixed(2)} - ${_rangeSliderValue.end.toStringAsFixed(2)}'),
],
),
),
);
}
}
Output
This code will create a RangeSlider widget that allows the user to select a range of values from 0.0 to 100.0. The values of the RangeSlider are stored in a variable called _rangeValues, which is initially set to 0.0 and 100.0.
The onChanged callback function is called whenever the user moves either of the thumbs. This function sets the _rangeValues variable to the new range of values selected by the user.
We can customize the RangeSlider widget appearance or behaviour by using various properties and methods.Let us discuss some properties generally used of RangeSlider widget.
value: It is the value that the rangeslider knobs are present at. This is a required property.
onChanged: This callback function is called whenever the value is changed with the help of knobs. This needs to be configured otherwise the result wont show up.
min: The minimum value that can be selected.
max: The maximum value that can be selected.
divisions: The number of divisions to divide the range of values into.
label: A label to be displayed above the RangeSlider.
activeColor: The color of the RangeSlider track and thumbs when the RangeSlider is enabled.
inactiveColor: The color of the RangeSlider track and thumbs when the RangeSlider is disabled.
onChangeStart: A callback function that is called when the user starts to drag either of the thumbs.
onChangeEnd: A callback function that is called when the user starts to drag either of the thumbs.
The customize the RangeSlider widget theme, we can even use the RangeSliderTheme for it.
Conclusion
The Slider widget in Flutter is a useful tool for allowing users to select a value or range of values from a set of possible values. It is easy to use and customize, and can be a useful component in many types of apps. Whereas RangeSlider widget in Flutter is a useful tool for allowing users to select a range of values from a set of possible values.