> ## Documentation Index
> Fetch the complete documentation index at: https://docs.stac.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Switch

> Documentation for Switch

export const PLAYGROUND_BASE_URL = "https://playground.stac.dev/";

export const switchPreviewJson = {
  "type": "switch",
  "switchType": "cupertino",
  "value": true
};
export const switchPreviewSrc = `${PLAYGROUND_BASE_URL}/embed`;

The Stac `Switch` widget allows you to build the Flutter Switch widget using JSON.
To know more about the Switch widget in Flutter, refer to the [official documentation](https://api.flutter.dev/flutter/material/Switch-class.html).

## Properties

| Property              | Type                        | Description                                                                                                     |
| --------------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------- |
| switchType            | `StacSwitchType`            | The type of the Switch.                                                                                         |
| value                 | `bool`                      | Whether this switch is on or off.                                                                               |
| onChanged             | `StacAction`                | Called when the user toggles the switch on or off.                                                              |
| autofocus             | `bool`                      | True if this widget will be selected as the initial focus when no other node in its scope is currently focused. |
| activeThumbColor      | `StacColor`                 | The color to use when this switch is on.                                                                        |
| activeTrackColor      | `StacColor`                 | The color to use on the track when this switch is on.                                                           |
| focusColor            | `StacColor`                 | The color for the button's when it has the input focus.                                                         |
| hoverColor            | `StacColor`                 | The color for the button's when a pointer is hovering over it.                                                  |
| inactiveThumbColor    | `StacColor`                 | The color to use on the thumb when this switch is off.                                                          |
| inactiveTrackColor    | `StacColor`                 | The color to use on the track when this switch is off.                                                          |
| onLabelColor          | `StacColor`                 | The color to use for the accessibility label when the switch is on.                                             |
| offLabelColor         | `StacColor`                 | The color to use for the accessibility label when the switch is off.                                            |
| splashRadius          | `double`                    | The splash radius of the circular ink response.                                                                 |
| dragStartBehavior     | `StacDragStartBehavior`     | Determines the way that drag start behavior is handled.                                                         |
| overlayColor          | `StacMaterialColor`         | The color for the switch.                                                                                       |
| thumbColor            | `StacMaterialColor`         | The color of this Switch's thumb.                                                                               |
| trackColor            | `StacMaterialColor`         | TThe color of this Switch's track.                                                                              |
| materialTapTargetSize | `StacMaterialTapTargetSize` | Configures the minimum size of the tap target.                                                                  |
| trackOutlineColor     | `StacMaterialColor`         | The outline color of this Switch's track.                                                                       |
| thumbIcon             | `StacWidget`                | The icon to use on the thumb of this switch.                                                                    |
| inactiveThumbImage    | `String`                    | An image to use on the thumb of this switch when the switch is off.                                             |
| activeThumbImage      | `String`                    | An image to use on the thumb of this switch when the switch is on.                                              |
| applyTheme            | `bool`                      | Whether to apply the ambient theme data.                                                                        |
| applyCupertinoTheme   | `bool`                      | Whether to apply the ambient theme data.                                                                        |

## Example

### Example 1: Cupertino Switch

<Tabs sync={false}>
  <Tab title="Dart">
    ```dart theme={null}
    StacSwitch(
      switchType: StacSwitchType.cupertino,
      value: true,
    )
    ```
  </Tab>

  <Tab title="JSON">
    ```json theme={null}
    {
      "type": "switch",
      "switchType": "cupertino",
      "value": true
    }
    ```
  </Tab>

  <Tab title="Preview">
    <Frame>
      <iframe
        id="stac"
        src={switchPreviewSrc}
        title="Stac Playground"
        className="w-full rounded-xl border-0"
        style={{ height: "640px" }}
        loading="lazy"
        onLoad={(event) => {
      const iframe = event.currentTarget;
      const targetOrigin = PLAYGROUND_BASE_URL;
      const message = {
        type: "stac-preview-json",
        payload: switchPreviewJson
      };

      let attempts = 0;
      const maxAttempts = 12;
      const interval = setInterval(() => {
        iframe.contentWindow?.postMessage(message, targetOrigin);
        attempts += 1;

        if (attempts >= maxAttempts) {
          clearInterval(interval);
        }
      }, 250);
    }}
      />
    </Frame>
  </Tab>
</Tabs>

### Example 2: Adaptive Switch

<CodeGroup>
  ```dart Dart theme={null}
  StacSwitch(
    switchType: StacSwitchType.adaptive,
    value: true,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "switch",
    "switchType": "adaptive",
    "value": true
  }
  ```
</CodeGroup>

### Example 3: Material Switch

<CodeGroup>
  ```dart Dart theme={null}
  StacSwitch(
    switchType: StacSwitchType.material,
    value: false,
  )
  ```

  ```json JSON theme={null}
  {
    "type": "switch",
    "switchType": "material",
    "value": false
  }
  ```
</CodeGroup>