Flutter CupertinoSlider Example

This article walks you through a complete example of using CupertinoSlider, an iOS-style widget in Flutter that lets the user select from a range of number values.

A Prefatory Note

The CupertinoSlider class requires 2 parameters:

• value: The current value of the slider (type: double)
• onChanged: A function called whenever the user moves the slider’s thumb (some people call it cursor) and returns the newly selected value.

You can find more information about the constructor and properties in the official docs. If you want to see the code in action and move fast instead of reading the boring text, check the example below.

The Example

Preview

What we’re going to build is a sample app that contains a slider and a text widget in the center of the screen. When the slider changes, the selected value will be immediately reflected in the text widget, as shown below:

The Code

In order to use a Cupertino widget, you have to import the Cupertino library as follows:

import 'package:flutter/cupertino.dart';

Here’s the complete code (with explanations):

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: 'Kindacode.com',
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // this will be displayed on the screen
  double _currentValue = 1;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('Kindacode.com'),
      ),
      child: SafeArea(
        child: Container(
          padding: const EdgeInsets.all(15),
          width: double.infinity,
          child: Column(children: [
            // Implement the Cupertino slider
            CupertinoSlider(
                value: _currentValue,
                min: 0,
                max: 10,
                divisions: 10,
                onChanged: (selectedValue) {
                  setState(() {
                    _currentValue = selectedValue;
                  });
                }),
            const SizedBox(height: 25),
            // display the result
            Text(
              'Current value: ${_currentValue.toString()}',
              style: const TextStyle(fontSize: 28),
            )
          ]),
        ),
      ),
    );
  }
}

Conclusion

We’ve gone over an end-to-end example of using the CupertinoSlider widget to create an iOS-style slider in Flutter. If you’d like to learn more about iOS-style widgets, take a look at the following articles:

• How to use Cupertino icons in Flutter
• Flutter CupertinoSegmentedControl Example
• Example of CupertinoSliverNavigationBar in Flutter
• Flutter: Cupertino ActionSheet Example
• Working with Cupertino Date Picker in Flutter
• Flutter: CupertinoPicker Example

You can also check out our Flutter category page, or Dart category page for the latest tutorials and examples.