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

modularuiwidgetsverdant-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.