flutter-tutorial

Flutter Slider

A slider is a widget that allows you to choose a value from a given range in the app. We can scroll through the values and pick the one we want. To implement a slider, we don’t need to install any dependencies.

Instead of selecting a single number, we may select a continuous range of values from a given range with a Range Slider.

Slider

Simply use the slider widget and provide the range values to build the slider widget. This widget requires two parameters:

  • value: When the app is launched, we must pass the default value, which must be of type double.
  • onChanged: When the slider value is changed, this function is called, and we get a double value that we may utilise for further processing.

Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'dart:async';

void main() {
  runApp(MyApp());
}

//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp> {
  bool _value = false;
  double val = 1;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.blue,
              title: Text("Learn Code Zone"),
            ),
            body: Container(
                height: 100,
                child: Slider(
                  value: val,
                  onChanged: (value) {
                    setState(() {
                      val = value;
                    });
                  },
                ))));
  }
}

RangeSlider

RangeSlider is a widget that is used to implement the RangeSlider widget. This widget requires two parameters:

  • values: The RangeValues kind of data, which has a start and an end, must be passed here.
  • onChanged: This function is called anytime the range values are modified and a RangeValue value is returned.

Example

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

import 'dart:async';

void main() {
  runApp(MyApp());
}

//void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
  @override
  _MyState createState() {
    return _MyState();
  }
}

class _MyState extends State<MyApp> {
  bool _value = false;
  double val = 1;
  RangeValues values = RangeValues(1, 100);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.blue,
              title: Text("Learn Code Zone"),
            ),
            body: Container(
              height: 100,
              child: RangeSlider(
                  activeColor: Colors.red[700],
                  inactiveColor: Colors.red[300],
                  min: 1,
                  max: 100,
                  values: values,
                  onChanged: (values) {
                    setState(() {
                      values = values;
                    });
                  }),
            )));
  }
}


RECOMMENDED ARTICLES





Leave a Reply

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