# 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

{% embed url="https://verdant-lokum-9bd5c2.netlify.app/#/switch" %}
Switch
{% endembed %}

```dart
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.
