CupertinoSwitch Widget – Flutter Widget Guide By Flutter Agency

CupertinoSwitch Widget is an iOS-style switch. It is basically used to toggle the on/off state of a single setting just like Switch Widget.

What is CupertinoSwitch Widget in Flutter?

The switch itself does not maintain any state. Instead, when the state of the switch changes, the widget calls the onChanged() callback. Most widgets that use a switch will listen for the onChanged() callback and rebuild the switch with a new value to update the visual appearance of the switch.

Default Constructor for it will look like below:

CupertinoSwitch({
  Key key,
  @required bool value,
  @required ValueChanged<bool> onChanged,
  Color activeColor,
  Color trackColor,
  DragStartBehavior dragStartBehavior: DragStartBehavior.start,
});

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

Properties:

• Key key: The widget key, used to control if it’s should be replaced.
• bool value: It has a bool data type that decides whether this switch is on or off.
• ValueChanged<bool> onChanged(): onChanged() is called when the user tap on switch to turn it ON or OFF.
  The Switch passes the new value to the callback but does not actually change state until the parent widget rebuilds the switch with the new value. If null, the switch will be displayed as disabled, which has a reduced opacity. The callback provided to onChanged() should update the state of the parent StatefulWidget using the State.setState method,
• Color activeColor: The color to use when this switch is on. Defaults to CupertinoColors.systemGreen when null and ignores the CupertinoTheme in accordance with native iOS behavior.
• Color trackColor: The color to use for the background when the switch is off. Defaults to CupertinoColors.secondarySystemFill when null.
• DragStartBehavior dragStartBehavior: As the name suggests dragStartBehavior determines the way that drag start behavior is handled. If set to DragStartBehavior.start, the drag behavior used to move the switch from on to off will begin upon the detection of a drag gesture. If set to DragStartBehavior.down it will begin when a down event is first detected.

How to use CupertinoSwitch Widget in Flutter?

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

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

class CupertinoSwitchWidget extends StatefulWidget {
  @override
  _CupertinoSwitchWidgetState createState() => _CupertinoSwitchWidgetState();
}

class _CupertinoSwitchWidgetState extends State<CupertinoSwitchWidget> {
  var _lights = false;
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MergeSemantics(
        child: ListTile(
          title: Text('Lights'),
          trailing: CupertinoSwitch(
            value: _lights,
            onChanged: (bool value) {
              setState(() {
                _lights = value;
              });
            },
          ),
          onTap: () {
            setState(() {
              _lights = !_lights;
            });
          },
        ),
      ),
    );
  }
}

We will get output like below:

CupertinoSwitch Widget

Conclusion:

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

Thanks for reading!!!
Keep Fluttering.

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.

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.