# CSA0X Cambia de opinión con `Switch`

###### tags: `blog`, `compose`, `csa`

## La función `Switch`

La función componible `Switch` nos proveerá la opción de alternar entre dos estados, encendio y apagado. Para usarlo, deberemos indicar el estado inicial, además de la función que responderá al evento de cambiar de estado.

Switch(
    checked = true,
    onCheckedChange = { /*TODO*/ }
)


La lista de atributos de Switch es la que sigue:

@Composable
@OptIn(ExperimentalMaterialApi::class)
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: SwitchColors = SwitchDefaults.colors()
)

- **checked**: Indica si está marcado o no.
- **onCheckedChange**: Evento que responde al cambio de estado entre marcado o no.
- **modifier**: Modificador aplicado al conmutador.
- **enabled**: Define si el conmutador está o no habilitado.
- **interactonState**: Estados de interacción del conmutador.
- **colors**: Colores aplicados al conmutador. Por defecto será el color secundario de la aplicación el que se aplique.

## Gestionar el cambio de marcado a no marcado

Creamos una val `isChecked` usando la función `remember` pasándole a la lambda un estado de Boolean mutable. Cuando declaremos la función Switch, pasaremos como parámetro `checked` el `value` de `isChecked` y en el parámetro `onCheckedChange` pasamos la lamda que actualice el valor del estado dependiendo de si el conmutador está marcado o no.

fun SwitchStateExample() {
    val isChecked = remember {
        mutableStateOf(false)
    }
    Switch(
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        }
    )
}

## Coloreemos al gusto nuestro conmutador

El parámetro color de `Switch` es una interfaz `SwitchColors` que define una serie de colores y transparencias aplicadas a cada parte y estado del conmutador.

- **Thumb**

| | checked | unchecked |
| -------- | -------- | -------- |
| **enable** | checkedThumbColor | uncheckedThumbColor |
| **disable** | disableCheckedThumbColor | disableUncheckedThumbColor |

- **Track**

| | checked | unchecked |
| -------- | -------- | -------- |
| **enable** | checkedTrackColor | uncheckedTrackColor |
| **disable** | disableCheckedTrackColor | disableUncheckedTrackColor |
| **alpha** | checkedTrackAlpha | uncheckedTrackAlpha |

Jugemos con los colores para ver los resultados. Empezamos aplicando color al `thumb` marcado y habilitado:

@Composable
fun SwitchColorsThumbExample(){
    val isChecked = remember { mutableStateOf(true) }
    Switch(
        modifier = Modifier.padding(16.dp),
        checked = isChecked.value,
        onCheckedChange = { checked ->
            isChecked.value = checked
        },
        colors = SwitchDefaults.colors(
            checkedThumbColor = Color.Red
        )
    )
}


Si en su lugar coloreamos de rojo el `track`:

    colors = SwitchDefaults.colors(
        checkedTrackColor = Color.Red
    )


Y además le aplicamos una transparencia:

colors = SwitchDefaults.colors(
            checkedTrackColor = Color.Red,
            checkedTrackAlpha = 0.1f
        )


Y por último le damos color a todo lo habilitado

    colors = SwitchDefaults.colors(
        checkedThumbColor = Color.Blue,
        checkedTrackColor = Color.Red,
        checkedTrackAlpha = 0.3f,
        uncheckedThumbColor = Color.LightGray,
        uncheckedTrackColor = Color.Magenta,
        uncheckedTrackAlpha = 0.1f,
    )


Podemos seguir coloreando para cuando el conmutador esté deshabilitado, pero ya podemos hacernos una idea de la flexibilidad de personalización que tenemos.