CupertinoSlider widget and Attributes

CupertinoSlider widget and Attributes

ยท

2 min read

The CupertinoSlider widget in Flutter is a slider widget designed to mimic the iOS-style slider found in Cupertino (iOS) applications. It allows users to select a value from a continuous range by dragging a thumb along a track, providing a native-like experience on iOS devices.

Attributes:

  1. value (double):

    • The current value of the slider.
  2. onChanged (ValueChanged<double>):

    • A callback function that is called whenever the value of the slider changes.
  3. min (double):

    • The minimum value of the slider's range.
  4. max (double):

    • The maximum value of the slider's range.
  5. activeColor (Color):

    • The color of the thumb and track when the slider is active (being dragged).
  6. thumbColor (Color):

    • The color of the thumb.
  7. trackColor (Color):

    • The color of the track when the slider is inactive (not being dragged).

Example:

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

class CupertinoSliderExample extends StatefulWidget {
  @override
  _CupertinoSliderExampleState createState() => _CupertinoSliderExampleState();
}

class _CupertinoSliderExampleState extends State<CupertinoSliderExample> {
  double _currentValue = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('CupertinoSlider Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Value: $_currentValue'),
            SizedBox(height: 16),
            CupertinoSlider(
              value: _currentValue,
              min: 0,
              max: 100,
              onChanged: (value) {
                setState(() {
                  _currentValue = value;
                });
              },
              activeColor: Colors.blue,
              thumbColor: Colors.red,
              trackColor: Colors.grey,
            ),
          ],
        ),
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: CupertinoSliderExample(),
  ));
}

In this example, a CupertinoSlider widget is used to allow users to select a value between 0 and 100. The current value of the slider is displayed as text below it. When the user drags the thumb, the value is updated accordingly. The activeColor is set to blue, thumbColor is set to red, and trackColor is set to grey. This demonstrates how you can use the CupertinoSlider widget to create iOS-style sliders in your Flutter app.

Did you find this article valuable?

Support Vinit Mepani (Flutter Developer) by becoming a sponsor. Any amount is appreciated!

ย