Flutter Slider
A slider is a material design widget used for selecting a value from a range. It is an input widget on which you can set a range of values by dragging the slider on clicking on the position. In this article, we are going to learn how to use the slider widget.
It can be used to select value from a continuous or discrete set of values. By default, it is a continuous range. For discrete values we must add a non-null value for divisions.
Slider Properties:
| Attributes | Type | Descriptions |
|---|---|---|
| value | double | This is a required argument and it is used for specifying the slider’s selected value. |
| onChanged | double | This is also a required argument and is called while dragging the slider to select a new value for the slider |
| onChangedStart | double | This is an optional argument and it is called when we start selecting. |
| max | double | It is an optional argument and we set the maximum value that can be selected by the user. By default, it is 1.0. |
| min | double | It is an optional argument and we set the minimum value that can be selected by the user. By default, it is 0.0. |
| divisions | int | determines the number of discrete divisions in the slider. If null, the slider is continuous. |
| label | string | specifies the text label that will be shown. |
| activeColor | class Color | the color of the active slider position |
Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MySliderApp(),
);
}
}
class MySliderApp extends StatefulWidget {
MySliderApp({Key key}) : super(key: key);
@override
_MySliderAppState createState() => _MySliderAppState();
}
class _MySliderAppState extends State {
int _value = 6;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Slider Demo'),
),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.volume_up,
size: 40,
),
new Expanded(
child: Slider(
value: _value.toDouble(),
min: 1.0,
max: 20.0,
divisions: 10,
activeColor: Colors.green,
inactiveColor: Colors.orange,
label: 'Set volume value',
onChanged: (double newValue) {
setState(() {
_value = newValue.round();
});
},
semanticFormatterCallback: (double newValue) {
return '${newValue.round()} dollars';
}
)
),
]
)
),
)
);
}
}
Output
Flutter Range Slider
This is a highly customizable component that helps us select multiple values from a range of values. This can be used as a continuous or discrete slider.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// This Widget is the main application widget.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MySliderApp(),
);
}
}
class MySliderApp extends StatefulWidget {
MySliderApp({Key key}) : super(key: key);
@override
_MySliderAppState createState() => _MySliderAppState();
}
class _MySliderAppState extends State {
RangeValues _currentRangeValues = const RangeValues(20, 60);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Range Slider Demo'),
),
body: Padding(
padding: EdgeInsets.all(15.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisSize: MainAxisSize.max,
children: [
Icon(
Icons.volume_up,
size: 40,
),
new Expanded(
child: RangeSlider(
values: _currentRangeValues,
min: 0,
max: 100,
divisions: 10,
labels: RangeLabels(
_currentRangeValues.start.round().toString(),
_currentRangeValues.end.round().toString(),
),
onChanged: (RangeValues values) {
setState(() {
_currentRangeValues = values;
});
},
)
),
]
)
),
)
);
}
}
Output
