Switch

A switch flips a boolean the moment it is toggled. It is controlled: render the current state through value and commit the new one in onChanged. A tap, a drag, or Space and Enter all toggle it. Colors, the track crossfade, and the thumb read from the theme, so a global retheme restyles every switch at once.

import 'package:fossui/fossui.dart';

FossSwitch(
  value: wifiOn,
  semanticsLabel: 'Wi-Fi',
  onChanged: (on) => setState(() => wifiOn = on),
);

Disabled

Pass a null onChanged to disable the switch. It dims to a muted opacity and stops responding to the pointer. There is no separate enabled flag.

const FossSwitch(
  value: true,
  onChanged: null,
);

Label

The switch carries no visible label. Lay out the row around it and name it for assistive tech with semanticsLabel.

Row(
  children: [
    const Text('Wi-Fi'),
    const Spacer(),
    FossSwitch(
      value: wifiOn,
      semanticsLabel: 'Wi-Fi',
      onChanged: (on) => setState(() => wifiOn = on),
    ),
  ],
);

One-off styling

Global retheming is the first choice, but a single switch can override the theme-resolved look with a FossSwitchStyle. Every field is optional and falls back to the theme.

FossSwitch(
  value: on,
  onChanged: (v) => setState(() => on = v),
  style: const FossSwitchStyle(
    activeTrackColor: Color(0xFF16A34A),
  ),
);

API

FossSwitch

Live demo

Open the interactive gallery to try every variant, size, and state with live knobs.