Slider in Flutter Example 

  • 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 drag and slide 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 ranging of values and how to customize the look of a slider.
  • Flutter Slider will provide a user interface to accept input when the slider is sliding in between the range of values provided in the bar and process indicator.
  • We can fetch the values and parse them further as user input.


main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.dark
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text("Slider App"),
        ),
        body: MyStatefulWidget(),
      ),
    );
  }
}

Provided the range

 min: 0,
 max: 100

Slider Code

 Slider(
          value: _currentSliderValue1,
          min: 0,
          max: 100,
          divisions: 10,
          label: _currentSliderValue1.round().toString(),
          onChanged: (double value) {
            setState(() {
              _currentSliderValue1 = value;
            });

            print(_currentSliderValue1.toString());
          },
        ),

Full Source Code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark
      ),
        home: Scaffold(
            appBar: AppBar(
                title: Text('Slider in Flutter')
            ),
            body: Center(
                child: SliderWidgetApp()
            )
        )
    );
  }
}

class SliderWidgetApp extends StatefulWidget {
  @override
  SliderWidget createState() => new SliderWidget();
}

class SliderWidget extends State{

  int valueHolder = 15;
  int valueHolder1 = 15;

  @override
  Widget build(BuildContext context) {
    return Center(
        child: Column(
            children: [
              Container(
                  margin: EdgeInsets.fromLTRB(0, 200, 0, 0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Slider(
                          value: valueHolder.toDouble(),
                          min: 5,
                          max: 100,
                          divisions: 100,
                          activeColor: Colors.cyan,
                          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),),

                      SizedBox(height: 50,),

                      Slider(
                          value: valueHolder1.toDouble(),
                          min: 5,
                          max: 100,
                          divisions: 100,
                          activeColor: Colors.green,
                          inactiveColor: Colors.grey,
                          label: '${valueHolder1.round()}',
                          onChanged: (double newValue1) {
                            setState(() {
                              valueHolder1 = newValue1.round();
                            });
                          },
                          semanticFormatterCallback: (double newValue1) {
                            return '${newValue1.round()}';
                          }
                      ),
                    ],
                  ),
              ),
              Text('$valueHolder1', style: TextStyle(fontSize: 22),)

            ]
        ));
  }
}

OUTPUT