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.

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

flutter slider

 

 

Show Buttons
Hide Buttons
Read previous post:
Android Google Login Integration Tutorial For Beginners

[et_pb_section admin_label="section"][et_pb_row admin_label="row"][et_pb_column type="4_4"][et_pb_text admin_label="Text" background_layout="light" text_orientation="left" use_border_color="off" border_color="#ffffff" border_style="solid"] Android google login : Android google login tutorial will guide...

Close