Flutter Slider Tutorial For Beginners

 

Flutter Slider :

Flutter Slider will provide a user interface to accept input when the slider is slide in between the range of values provided in the bar.We can fetch the values and parse them further as user input.

The best example is the volume control bar which is called to be seek bar for controlling the volume and also the brightness in the mobile device in the same way we can use flutter slider.

Also in music players the seek bar i.e., slider is used to know the current state of the song and can be altered too.

Slider can also be used to select the values from a range of available so that it can be further processed.

You can also customize the slider icons and text to be displayed according to your app requirement.

In this tutorial we will be seeing through the basic usage and implementation of the flutter slider so that you can use them in the app based on your requirement.

 

 

Project Structure :

This below image depicts the project structure of the flutter slider.

 

main.dart :

Initialize with void main() and consider the default class MyApp()

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

 

Declare the title for the app bar

static const String _title = 'Flutter Slider';

 

Return the material app with a StatefulWidget class in body and also provide the appBar

MaterialApp(
  title: _title,
  home: Scaffold(
    appBar: AppBar(title: const Text(_title)),
    body: MyStatefulWidget(),
  ),
);

 

Declare a Slider

Slider(
  );

 

specify the initial value which the slider should load on app start and this variable will be updated once the slider moves in setState

value: _currentSliderValue,

 

also the range through which we can slide

min: 0,
max: 100,

 

number of divisions in the range

divisions: 10,

 

provide the slide value once place on a range

label: _currentSliderValue.round().toString(),

 

onChange i.e., on slide capture the value using a setState where you get the values interms  of double data type.

 

onChanged: (double value) {
  setState(() {
    _currentSliderValue = value;
  });
},

 

Here i am printing the value of the slider converting it to a String

print(_currentSliderValue.toString());

 

FullCode :

Providing the full code for flutter slider integration.

import 'package:flutter/material.dart';

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

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  static const String _title = 'Flutter Slider';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: MyStatefulWidget(),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  MyStatefulWidget({Key key}) : super(key: key);

  @override
  _MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  double _currentSliderValue = 10;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: _currentSliderValue,
      min: 0,
      max: 100,
      divisions: 10,
      label: _currentSliderValue.round().toString(),
      onChanged: (double value) {
        setState(() {
          _currentSliderValue = value;
        });

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

 

Flutter slider Output :

This screen below depicts the usage of the flutter slider