Flutter Create Material Seekbar Slider in Android iOS Example Tutorial

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.

2. Call our main MyApp class using void main runApp() method.

3. Create our main MyApp class extends with State less widget. In below class in body section we are calling SliderWidget() class.

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.

5. Create a class named as SiderWidgetState extends with State. In this class we would create our Slider widget.

6. Create a integer variable named as valueHolder with 20 default value. This is our default selected value of Slider.

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.

8. Complete source code for main.dart file:

Screenshots:

Flutter Create Material Seekbar Slider in Android iOS Example Tutorial

Leave a Reply

Your email address will not be published.