CupertinoSwitch class

This example shows a toggleable CupertinoSwitch. When the thumb slides to the other side of the track, the switch is toggled between on/off.

import 'package:cupertino_ui/cupertino_ui.dart';

/// Flutter code sample for [CupertinoSwitch].

void main() => runApp(const CupertinoSwitchApp());

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp(
      theme: CupertinoThemeData(brightness: .light),
      home: CupertinoSwitchExample(),
    );
  }
}

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

  @override
  State<CupertinoSwitchExample> createState() => _CupertinoSwitchExampleState();
}

class _CupertinoSwitchExampleState extends State<CupertinoSwitchExample> {
  bool switchValue = true;

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoSwitch Sample'),
      ),
      child: Center(
        child: CupertinoSwitch(
          // This bool value toggles the switch.
          value: switchValue,
          activeTrackColor: CupertinoColors.activeBlue,
          onChanged: (bool value) {
            // This is called when the user toggles the switch.
            setState(() {
              switchValue = value;
            });
          },
        ),
      ),
    );
  }
}

This sample shows how to use a CupertinoSwitch in a CupertinoListTile. The MergeSemantics is used to turn the entire CupertinoListTile into a single item for accessibility tools.

MergeSemantics(
  child: CupertinoListTile(
    title: const Text('Lights'),
    trailing: CupertinoSwitch(
      value: _lights,
      onChanged: (bool value) { setState(() { _lights = value; }); },
    ),
    onTap: () { setState(() { _lights = !_lights; }); },
  ),
)