CupertinoSlider Widget – Flutter Widget Guide By Flutter Agency

CupertinoSlider Widget – Flutter Widget Guide By Flutter Agency

In this Cupertino Widget Series, We have been through  CupertinoPopupSurface Widget, CupertinoPageScaffold Widget, and many other widgets like CupertinoActionSheet Widget, so now in this article, we will be focusing on CupertinoSlider Widget which is an iOS-style slider.

What is CupertinoSlider Widget in Flutter?

CupertinoSlider Widget can be used to select from a continuous value or a set of discrete values. The default value is used fromminTomaxThe range of continuous values. To use discrete values, use divisions Non-null value, which represents the number of discrete intervals.

Default Constructor for it will look like below:

CupertinoSliderWidget({
  Key key,
  @required double value,
  @required ValueChanged<double> onChanged,
  ValueChanged<double> onChangeStart,
  ValueChanged<double> onChangeEnd,
  double min: 0.0,
  double max: 1.0,
  int divisions,
  Color activeColor,
  Color thumbColor: CupertinoColors.white,
});

In Above Constructor all fields marked with @required must not be empty.

Properties:

• Color activeColor: The color to use for the portion of the slider that has been selected. Defaults to the CupertinoTheme’s primary color if null.
• int divisions: The number of discrete divisions. If null, the slider is continuous.
• double max: The maximum value the user can select. Defaults to 1.0.
• double min: The minimum value the user can select. Defaults to 0.0.
• ValueChanged<double> onChanged(): This method called when the user selects a new value for the slider.The slider passes the new value to the callback but does not actually change state until the parent widget rebuilds the slider with the new value. If null, the slider will be displayed as disabled.
• ValueChanged<double> onChangeEnd(): onChangeEnd() called when the user is done selecting a new value for the slider. This callback shouldn’t be used to update the slider value (use onChanged for that), but rather to know when the user has completed selecting a new value by ending a drag.
• ValueChanged<double> onChangeStart: This method is called when the user starts selecting a new value for the slider. This callback shouldn’t be used to update the slider value (use onChanged for that), but rather to be notified when the user has started selecting a new value by starting a drag.
• Color thumbColor: The color to use for the thumb of the slider. Thumb color must not be null. Defaults to CupertinoColors.white.
• double value: The currently selected value for this slider. The slider’s thumb is drawn at a position that corresponds to this value.

How to use CupertinoSlider Widget in Flutter?

The following code snippet tells us how to implement CupertinoSlider Widget in Flutter.

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

class CupertinoSliderWidget extends StatefulWidget {
  @override
  _CupertinoSliderWidgetState createState() => _CupertinoSliderWidgetState();
}

class _CupertinoSliderWidgetState extends State<CupertinoSliderWidget> {
  var _progress;
  @override
  Widget build(BuildContext context) {
    return CupertinoSlider(
      value: _progress,
      min: 0.0,
      max: 100.0,
      onChanged: (value) {
        setState(() {
          _progress = value.roundToDouble();
        });
      },
    );
  }
}

We will get output like as shown in the below screenshot.

CupertinoSlider Widget

Conclusion:

In this article, we have been through What is CupertinoSlider Widget in Flutter along with how to implement it in a Flutter.

Thanks for being with us!!!
Do let us know your valuable feedback for the same.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.