Switch

Switch

MUISwitch

A basic switch widget provided by Modular UI.

Properties

  • checked: bool - The value to use for the underlying switch widget.

  • onChanged: ValueChanged? - Called when the value of the switch should change.

  • width: double - The width of the switch; default: 40.

  • height: double - The height of the switch; default: 20.

  • circleSize: double - The absolute size of the circle, aka diameter; default: 18.

  • animationDuration: Duration - The duration of the animation; default: Durations.short3.

  • animationCurve: Curve - The curve of the animation; default: Curves.easeInOut.

  • onStateCol: Color - The color when the switch is in the "on" state; default: Colors.white.

  • offStateCol: Color - The color when the switch is in the "off" state; default: Color.fromARGB(255, 39, 39, 42).

newYork({ ... })

A factory method to create a New York-style switch.

Parameters

  • checked: bool - The initial value of the switch; default: false.

  • onChanged: ValueChanged? - Callback when the value of the switch changes.

  • width: double - The width of the switch; default: 38.

  • height: double - The height of the switch; default: 18.

  • circleSize: double - The absolute size of the circle, aka diameter; default: 16.

  • onStateCol: Color - The color when the switch is in the "on" state; default: Colors.white.

  • offStateCol: Color - The color when the switch is in the "off" state; default: Color.fromARGB(255, 39, 39, 42).

Example Usage

Logohttps://verdant-lokum-9bd5c2.netlify.app/#/switchverdant-lokum-9bd5c2.netlify.app
Switch
MUISwitch(
  checked: true,
  onChanged: (value) {
    // Handle switch value change
    print("Switch Value: $value");
  },
  width: 40,
  height: 20,
  circleSize: 18,
  animationDuration: Durations.short3,
  animationCurve: Curves.easeInOut,
  onStateCol: Colors.white,
  offStateCol: Color.fromARGB(255, 39, 39, 42),
);

// Alternatively, use the New York-style switch
MUISwitch.newYork(
  checked: false,
  onChanged: (value) {
    // Handle switch value change
    print("Switch Value: $value");
  },
  width: 38,
  height: 18,
  circleSize: 16,
  onStateCol: Colors.white,
  offStateCol: Color.fromARGB(255, 39, 39, 42),
);

Notes

  • Provides a basic switch widget with customizable appearance.

  • Supports a New York-style switch through the newYork factory method.

  • Utilizes animations for a smooth transition between states.

PreviousSliderNextTabs

Last updated