Slider in Flutter.

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