Slider widget also known as Seekbar in android is used to create a horizontal slider between 2 given point start and end. Slider widget has a moving object place on it which is used to move left to right and right to left to change the Slider value. App user can drag the slider according to his requirement and the value will update on slider motion. So in this tutorial we would Flutter Create Material Seekbar Slider in Android iOS Example Tutorial.
Contents in this project Flutter Create Material Seekbar Slider in Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main MyApp class extends with State less widget. In below class in body section we are calling SliderWidget() class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Slider Seekbar in Flutter') ), body: Center( child: SliderWidget() ) ) ); } } |
4. Create a class named as SliderWidget extends with State full widget. In this class we would call our SiderWidgetState class using createState() method. This method would allow us to use States in given class tree.
|
1 2 3 4 |
class SliderWidget extends StatefulWidget { @override SiderWidgetState createState() => new SiderWidgetState(); } |
5. Create a class named as SiderWidgetState extends with State. In this class we would create our Slider widget.
|
1 2 3 4 |
class SiderWidgetState extends State{ } |
6. Create a integer variable named as valueHolder with 20 default value. This is our default selected value of Slider.
|
1 |
int valueHolder = 20; |
7. Create Slider widget and Text widget in Widget build area in SiderWidgetState class.
- value : Used to set current selected value for Slider.
- min : Minimum value of Slider.
- max : Maximum value of Slider.
- divisions : Used to create desecrate divisions of given value.
- activeColor : Active color of Slider.
- inactiveColor : Inactive color of Slider.
- label : Used to show Slider value just above the Slider.
- onChanged : Calls each time when slider moves.
- semanticFormatterCallback : Used to create semantic value for Slider.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
Widget build(BuildContext context) { return Center( child: Column( children: [ Container( margin: EdgeInsets.fromLTRB(0, 100, 0, 0), child: Slider( value: valueHolder.toDouble(), min: 1, max: 100, divisions: 100, activeColor: Colors.green, inactiveColor: Colors.grey, label: '${valueHolder.round()}', onChanged: (double newValue) { setState(() { valueHolder = newValue.round(); }); }, semanticFormatterCallback: (double newValue) { return '${newValue.round()}'; } )), Text('$valueHolder', style: TextStyle(fontSize: 22),) ] )); } |
8. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Slider Seekbar in Flutter') ), body: Center( child: SliderWidget() ) ) ); } } class SliderWidget extends StatefulWidget { @override SiderWidgetState createState() => new SiderWidgetState(); } class SiderWidgetState extends State{ int valueHolder = 20; @override Widget build(BuildContext context) { return Center( child: Column( children: [ Container( margin: EdgeInsets.fromLTRB(0, 100, 0, 0), child: Slider( value: valueHolder.toDouble(), min: 1, max: 100, divisions: 100, activeColor: Colors.green, inactiveColor: Colors.grey, label: '${valueHolder.round()}', onChanged: (double newValue) { setState(() { valueHolder = newValue.round(); }); }, semanticFormatterCallback: (double newValue) { return '${newValue.round()}'; } )), Text('$valueHolder', style: TextStyle(fontSize: 22),) ] )); } } |
Screenshots:
