Flutter Slider

 

A slider in Flutter is a material design widget used for selecting a range of values. It is an input widget where we can set a range of values by dragging or pressing on the desired position. In this article, we are going to show how to use the slider widget in Flutter in setting the range of values and how to customize the look of a slider.

Usually, we use the slider widget for changing a value. So, it is required to store the value in a variable. This widget has a slider class that requires the onChanged() function. This function will be called whenever we change the slider position.

A slider can be used for selecting a value from a continuous or discrete set of values. By default, it uses a continuous range of values. If we want to use discrete values, we must have to use a non-null value for divisions. This discrete division indicates the number of discrete intervals. Before getting the value, we have to set the minimum and maximum value. Slider provides min and max arguments to set the minimum and maximum limitations. For example, we have a set of values from 0.0 to 50.0, and divisions are 10, the slider would take values like 0.0, 10.0, 20.0, 30.0, 40.0, and 50.0.

Slider Properties

The following are the slider attributes used in Flutter. It has two required arguments, and all others are optional.

Attributes	Type	Descriptions
value	double	It is a required argument and used to specify the slider's current value.
onChanged	double	It is a required argument and called during dragging when the user selects a new value for the slider. If it is null, the slider is disabled.
onChangedStart	double	It is an optional argument and called when we start selecting a new value.
onChangedStart	double	It is an optional argument and called when we have done in selecting a new value for the slider.
max	double	It is an optional argument and determines the maximum value that can be used by the user. By default, it is 1.0. It should be greater than or equal to min.
min	double	It is an optional argument that determines the minimum value that can be used by the user. By default, it is 0.0. It should be less than or equal to max.
divisions	int	It determines the number of discrete divisions. If it is null, the slider is continuous.
label	string	It specifies the text label that will be shown above the slider. It displays the value of a discrete slider.
activeColor	class Color	It determines the color of the active portion of the slider track.
inactiveColor	class Color	It determines the color of the inactive portion of the slider track.
SemanticFormatterCallback		It is a callback that is used to create a semantic value. By default, it is a percentage.

The slider in Flutter uses the following terms:

Thumb: It is a round shape that slides horizontally when we change values by dragging.

Track: It is a horizontal line where we can slide the thumb.

Overlay: It appears around the thumb while dragging.

Tick marks: It is used to mark the discrete values of a slider.

Value indicators: It will show the labels for the thumb values when we defined the labels.

Active: It is the active side of the slider, which is in between the thumb and the minimum value.

Inactive: It is the inactive side of the slider, which is in between the thumb and the maximum value.

How to use the slider widget in Flutter?

Here is the basic example of using a slider widget in Flutter.

1. Slider(  
2.       min: 0,  
3.       max: 100,  
4.       value: _value,  
5.       onChanged: (value) {  
6.         setState(() {  
7.           _value = value;  
8.         });  
9.       },  
10.     ),  

Example

Let us understand how to use the slider in Flutter with the help of an example. In the following code, we had stored the value as an integer that must be cast to double first when it passed as a value argument and then rounded to integer inside the onChanged method. We have also specified the active portion of the slider as green, while the inactive portion is orange.

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. // This Widget is the main application widget.  
6. class MyApp extends StatelessWidget {  
7.   @override  
8.   Widget build(BuildContext context) {  
9.     return MaterialApp(  
10.       home: MySliderApp(),  
11.     );  
12.   }  
13. }  
14.   
15. class MySliderApp extends StatefulWidget {  
16.   MySliderApp({Key key}) : super(key: key);  
17.   
18.   @override  
19.   _MySliderAppState createState() => _MySliderAppState();  
20. }  
21.   
22. class _MySliderAppState extends State<MySliderApp> {  
23.   int _value = 6;  
24.   @override  
25.   Widget build(BuildContext context) {  
26.     return Scaffold(  
27.       appBar: AppBar(  
28.         title: Text('Flutter Slider Demo'),  
29.         ),  
30.         body: Padding(  
31.           padding: EdgeInsets.all(15.0),  
32.             child: Center(  
33.                 child: Row(  
34.                     mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
35.                     mainAxisSize: MainAxisSize.max,  
36.                     children: [  
37.                       Icon(  
38.                         Icons.volume_up,  
39.                         size: 40,  
40.                       ),  
41.                       new Expanded(  
42.                           child: Slider(  
43.                             value: _value.toDouble(),  
44.                             min: 1.0,  
45.                             max: 20.0,  
46.                             divisions: 10,  
47.                             activeColor: Colors.green,  
48.                             inactiveColor: Colors.orange,  
49.                             label: 'Set volume value',  
50.                             onChanged: (double newValue) {  
51.                               setState(() {  
52.                                 _value = newValue.round();  
53.                                 });  
54.                               },  
55.                               semanticFormatterCallback: (double newValue) {  
56.                                 return '${newValue.round()} dollars';  
57.                               }  
58.                             )  
59.                       ),  
60.                     ]  
61.                 )  
62.             ),  
63.           )  
64.       );  
65.   }  
66. }  

Output:

When we run this app in the IDE, we should get the UI similar to the below screenshot. Here we can drag the slider to set the volume label.

Flutter Range Slider

It is a highly customizable component that selects a value from a range of values. It can be selected either from a continuous or discrete set of values.

Why Range Slider?

A slider component can provide single or multiple selections based on the continuous or discrete set of values. Here we must have to predetermine either a minimum or maximum value to adjust the selection in one direction. Unlike the slider, the range sliders allow two selection points that provide flexible adjustment to set the maximum and minimum value. This adjustment makes it a useful feature when we want to control a specific range, like indicating the length of time or price points.

See the below code where range values are in the intervals of 10 because we have divided the slider into ten divisions from 0 to 100. It means our values are split between 0, 10, 20, 30, 40, and so on to 100. Here, we will initialize the range values with 20 and 50.

1. import 'package:flutter/material.dart';  
2.   
3. void main() => runApp(MyApp());  
4.   
5. // This Widget is the main application widget.  
6. class MyApp extends StatelessWidget {  
7.   @override  
8.   Widget build(BuildContext context) {  
9.     return MaterialApp(  
10.       home: MySliderApp(),  
11.     );  
12.   }  
13. }  
14.   
15. class MySliderApp extends StatefulWidget {  
16.   MySliderApp({Key key}) : super(key: key);  
17.   
18.   @override  
19.   _MySliderAppState createState() => _MySliderAppState();  
20. }  
21.   
22. class _MySliderAppState extends State<MySliderApp> {  
23.   RangeValues _currentRangeValues = const RangeValues(20, 60);  
24.   @override  
25.   Widget build(BuildContext context) {  
26.     return Scaffold(  
27.         appBar: AppBar(  
28.           title: Text('Flutter Range Slider Demo'),  
29.         ),  
30.         body: Padding(  
31.           padding: EdgeInsets.all(15.0),  
32.           child: Center(  
33.               child: Row(  
34.                   mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
35.                   mainAxisSize: MainAxisSize.max,  
36.                   children: [  
37.                     Icon(  
38.                       Icons.volume_up,  
39.                       size: 40,  
40.                     ),  
41.                     new Expanded(  
42.                         child: RangeSlider(  
43.                           values: _currentRangeValues,  
44.                           min: 0,  
45.                           max: 100,  
46.                           divisions: 10,  
47.                           labels: RangeLabels(  
48.                             _currentRangeValues.start.round().toString(),  
49.                             _currentRangeValues.end.round().toString(),  
50.                           ),  
51.                           onChanged: (RangeValues values) {  
52.                             setState(() {  
53.                               _currentRangeValues = values;  
54.                             });  
55.                           },  
56.                         )  
57.                     ),  
58.                   ]  
59.               )  
60.           ),  
61.         )  
62.     );  
63.   }  
64. }  

Output:

When we run this app in the IDE, we should get the UI similar to the below screenshot.

When we drag the slider, we can see the range of values to set the volume label.

Flutter Image Slider

Image slider is a convenient way to display images, videos, or graphics in our app. Generally, it will show one big image at a time on our app screen. It helps to make our screen more attractive to the user.

Let us see how we can make an image slider in Flutter. There are many dependencies available in the Flutter library to create a sliding image in your app. Here, we are going to use flutter_swipper dependency. So first, we need to add the below dependency in the puspec.yaml file:

1. dependencies:  
2.   flutter:  
3.     sdk: flutter  
4.   flutter_swiper: ^1.1.6  

Next, add this dependency in your dart file as below:

1. import 'package:flutter_swiper/flutter_swiper.dart';  

Example

The following code explains the use of the flutter_swipper library in a simple way. Here, we have taken an image from the network that displays on the screen.

1. import 'package:flutter/material.dart';  
2. import 'package:flutter_swiper/flutter_swiper.dart';  
3.   
4. void main(){ runApp(MyApp()); }  
5.   
6. class MyApp extends StatelessWidget {  
7.   @override  
8.   Widget build(BuildContext context) {  
9.     return MaterialApp(  
10.         home: MyHomeScreen()  
11.     );  
12.   }  
13. }  
14.   
15. class MyHomeScreen extends StatelessWidget {  
16.   @override  
17.   Widget build(BuildContext context) {  
18.     return Scaffold(  
19.       appBar: AppBar(title: Text("Flutter Image Slider Demo"),),  
20.       body: Container(  
21.           padding: EdgeInsets.all(10),  
22.           margin: EdgeInsets.all(5),  
23.           alignment: Alignment.center,  
24.           constraints: BoxConstraints.expand(  
25.               height: 225  
26.           ),  
27.           child: imageSlider(context)),  
28.     );  
29.   }  
30. }  
31.   
32. Swiper imageSlider(context){  
33.   return new Swiper(  
34.     autoplay: true,  
35.     itemBuilder: (BuildContext context, int index) {  
36.       return new Image.network(  
37.         "https://lh3.googleusercontent.com/wIcl3tehFmOUpq-Jl3hlVbZVFrLHePRtIDWV5lZwBVDr7kEAgLTChyvXUclMVQDRHDEcDhY=w640-h400-e365-rj-sc0x00ffffff",  
38.         fit: BoxFit.fitHeight,  
39.       );  
40.     },  
41.     itemCount: 10,  
42.     viewportFraction: 0.7,  
43.     scale: 0.8,  
44.   );  
45. }  

Output:

When we run this app in the IDE, we should get the UI similar to the below screenshot. Here the image slides automatically.