Slider Widget in Flutter | Android Studio

Slider Widget in Flutter | Complete Tutorial

Slider Widget in Flutter is useful to create a slider like animation. The primary aim of the widget is to give the user an animated slider bar that can adjust a value on the UI. This will eventually be read as a double value and can be used to perform actions in the background.

Slider Widget in Flutter plays an important part in the UI element creation. Simple, yet powerful Widget is used to create a very cleaner Sliders on the UI. The Slider Widget in Flutter can be created with a simple class called Slider. This can help in creating a sound up/down or even rating like sliders.

In this article, we will see what are the properties of a SliderWidget and how it can be used for performing UI actions in detail.

Slider Widget – Basics

To create a Slider Widget, we will be making use of the Slider class. The class constructor looks like below.

Slider({Key key@required double value@required ValueChanged<double> onChangedValueChanged<double> onChangeStartValueChanged<double> onChangeEnddouble min0.0double max1.0int divisionsString labelColor activeColorColor inactiveColorSemanticFormatterCallback semanticFormatterCallback })

The constructor looks costly with lot of attributes/values present. We will look at what they do and construct important Sliders with them.

Note: Slider widget needs to have a widget which inherits mediaQuery.In other words, Widgets like MaterialApp along with Scaffold Widget has to be present for the Slider animation to work.

The Slider widget by itself cannot return the value it is pointing, rather it will only move the slider and it is up to the developer to reset the state of the slider by calling the setState() method on it.

Before we jump into seeing the attributes that are part of the Slider Widget, let’s create a simple Template that will serve us in the following sections.

Even before we jump into the template, you will have to understand what a simple Stateful Widget does. If you haven’t read the article on basics of flutter, check that out before jumping in here.

Below is the sample template which we will use,

import 'package:flutter/material.dart';

void main() {
  runApp(SliderWidget());
}
class SliderWidget extends StatefulWidget {
  @override
  _SliderWidgetState createState() {
    return _SliderWidgetState();
  }
}

class _SliderWidgetState extends State {
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        appBar: AppBar(title: Text("Sample Data Table"),),
        backgroundColor: Colors.redAccent,
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(

                ),)
            ],
          ),
        ),
      ),
    );
  }
}

Explanation

  • The simple Stateful Widget is used in order to call the setState() method every time the value change is recorded.
  • Like mentioned in the initial section, Slider cannot by itself change the sliding position when slid left or right. It has to be manually set every time using the setState() method.
  • The above sample calls the Expanded widget and passes the Slider widget into it. This way the Slider occupies the remaining portion left on the row.

Slider Widget – Attributes

With the template code ready, let us look at the important properties of the Slider Widget in detail.

value

Value is an important attribute of the Slider Widget. It gives the Slider Widget an initial position to keep its pointer. The value attribute takes only a double value. Make sure to give this value from a variable like shown below.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        appBar: AppBar(title: Text("Sample Data Table"),),
        backgroundColor: Colors.grey,
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  
                ),)
            ],
          ),
        ),
      ),
    );
  }
}

Since there is no min,max attribute specified, the app will crash at this point. We will look at those two attributes also and see what the final app looks like.

min

Minimum value of the slider widget. The value from which the bar should start with is defined. This takes in an integer value only since there cannot be floating value starting point. Once the min attribute is defined, it looks like.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        appBar: AppBar(title: Text("Sample Data Table"),),
        backgroundColor: Colors.grey,
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  min: 1,
                  
                ),)
            ],
          ),
        ),
      ),
    );
  }
}

Still, we are yet to specify the max value.

max

You should have guessed this by now. The max attribute defines the maximum value that the slider widget can take. Once it is defined, the class looks like below.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        appBar: AppBar(title: Text("Sample Data Table"),),
        backgroundColor: Colors.grey,
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  min: 1,
                  max: 10,

                ),)
            ],
          ),
        ),
      ),
    );
  }
}

This creates the app which looks like.

Slider Widget in Flutter
Slider Widget in Flutter
divisions

Another self-explanatory attribute which defines the number of divisions from the min to the max value specified.

Check out the example shown below.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(title: Text("Sample Slider Widget"),),
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  min: 1,
                  max: 10,
                  divisions: 10,
                  onChanged: (value){

                  },
                ),)
            ],
          ),
        ),
      ),
    );
  }
}

This creates the app which looks like,

Division attribute in flutter app
Division attribute in flutter app
activeColor

ActiveColor attribute decides what color to have as the primary Color of the Slider Bar. Meaning whichever the user is going to perceive as the Slider Color. In the example code below, the difference is seen.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(title: Text("Sample Slider Widget"),),
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  min: 1,
                  max: 10,
                  divisions: 10,
                  activeColor: Colors.lightGreen,
                  onChanged: (value){

                  },
                ),)
            ],
          ),
        ),
      ),
    );
  }
}
Active Color in Slider Widget
Active Color in SliderWidget
inactiveColor

Inactive Color denotes whichever color is present in the remaining portion of the Slider Bar. This color is usually light when compared to the Primary/active color. The example below explains the same.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(title: Text("Sample Slider Widget"),),
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  min: 1,
                  max: 10,
                  divisions: 10,
                  activeColor: Colors.lightGreen,
                  inactiveColor: Colors.white54,
                  onChanged: (value){

                  },
                ),)
            ],
          ),
        ),
      ),
    );
  }
}
Inactive color in Slider Widget
Inactive color in SliderWidget

label

Label attribute lets you define what the user is clicking on while trying to move the Slider. The small popup should be kept as short as possible to let the user know why he is moving the slider. The below code helps you understand the same.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(title: Text("Sample Slider Widget"),),
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  min: 1,
                  max: 10,
                  divisions: 10,
                  activeColor: Colors.lightGreen,
                  inactiveColor: Colors.white54,
                  label: "Slide Volume",
                  onChanged: (value){

                  },
                ),)
            ],
          ),
        ),
      ),
    );
  }
}
Label attribute in Slider Widget
Label attribute in SliderWidget
onChanged(double)

This is a very important callback in terms of recording what values the user pushes the slider to. Like explained at the beginning of the article, the Slider Widget cannot by itself move the slider. The setState() method has to be called with the onChanged() callback’s value. The below code explains what the onChanged() callback does and how it can be made to create a responsive slider.

Note: The onChanged() takes a double value as its argument. Since Slider returns the double value denoting the position with respect to the minimum value and maximum value specified.

class _SliderWidgetState extends State {
  double value = 5.0;
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: 'Androidmonks',
      home: Scaffold(
        backgroundColor: Colors.red,
        appBar: AppBar(title: Text("Sample Slider Widget"),),
        body: Center(
          child: Row(
            children: <Widget>[
              Icon(Icons.volume_up),
              Expanded(
                child: Slider(
                  value: value,
                  min: 1,
                  max: 10,
                  divisions: 10,
                  activeColor: Colors.lightGreen,
                  inactiveColor: Colors.white54,
                  label: "Slide Volume",
                  onChanged: (_value){
                    setState((){
                      value = _value;
                    });
                    print(_value);
                  },
                ),)
            ],
          ),
        ),
      ),
    );
  }
}

This code generates the slider bar which moves like,

Slider Widget example with setState()
Slider Widget example with setState()

Slider Widget – Conclusion

This brings us to the end of this article. We saw what the Slider Widget can do and how it can be made responsive with respect to using setState() inside the onChanged() callback.

Drop in any comments below.

“Learn and Be Curious”

Leave a Comment

Your email address will not be published. Required fields are marked *