CupertinoSlider Widget – Flutter Widget Guide By Flutter Agency

• Flutter
• Flutter Widget Guide

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:

CupertinoSlider({
  Key? key,
  required double value,
  required ValueChanged? onChanged,
  ValueChanged? onChangeStart,
  ValueChanged? 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';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Cupertino Slider Demo'),
        ),
        body: const Center(
          child: CupertinoSliderWidget(),
        ),
      ),
    );
  }
}

class CupertinoSliderWidget extends StatefulWidget {
  const CupertinoSliderWidget({super.key});

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

class _CupertinoSliderWidgetState extends State {
  double _progress = 0.0; // Initialize _progress with a default value

  @override
  Widget build(BuildContext context) {
    return CupertinoSlider(
      value: _progress,
      min: 0.0,
      max: 100.0,
      divisions: 100, // Optional: Adds divisions for discrete values
      onChanged: (double value) {
        setState(() {
          _progress = value;
        });
      },
    );
  }
}

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.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.