Flutter CupertinoSlider Example

Updated: May 27, 2023 By: Augustus Post a comment

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

A CupertinoSlider widget 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.

The Example


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);

  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);

  State<MyHomePage> createState() => _MyHomePageState();

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

  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
                value: _currentValue,
                min: 0,
                max: 10,
                divisions: 10,
                onChanged: (selectedValue) {
                  setState(() {
                    _currentValue = selectedValue;
            const SizedBox(height: 25),
            // display the result
              'Current value: ${_currentValue.toString()}',
              style: const TextStyle(fontSize: 28),


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:

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

Notify of
Inline Feedbacks
View all comments

Related Articles