Docs
/
Headless Widgets
/
Switch

Switch

Switches toggle the state of a single setting on or off.

It does not hold state in itself. This means the checked state needs to be handled outside of the widget. The values can be provided and updated using the checked and onChanged properties on the SwitchX constructor.

bool checked = false;

SwitchX(
  active: checked,
  onChanged: (v) => setState(() => checked = v),
),

Thumb

You can provide a custom thumb to the radio button using the thumb property:

SwitchX(
  indicator: SwitchThumb(Mix(
    (active)( // if active
      bgColor(Colors.amber), // use the color amber
    ),
  )),
),

A child can also be provided to SwitchThumb.

SwitchThumb can be extended in order to create custom effects, like:

class _MySwitchThumb extends SwitchThumb {

  _MySwitchThumb() : super(Mix.constant);

  Widget build(BuildContext context, bool checked) {
    if (checked) { // Return a custom widget to be shown as the indicator
      return ...;
    }
    return const SizedBox.shrink();
  }

}