`toggleable` Modifier In Jetpack Compose

Photo by Arthur Mazi on Unsplash

In this article we will be talking about toggleable modifier in Jetpack Compose.

Let’s understood through an example…. Suppose we have a Row and inside it we have a Text & CheckBox composable function , we want to make Row clickable so that CheckBox can check On/Off . This can be achieve through toggleable modifier.

@Composable
fun ToggleableModifierExample() {

    var isCheck by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier
            .padding(20.dp)
            .fillMaxSize(),
        verticalArrangement = Arrangement.Center
    ) {

        Row(
            modifier = Modifier
                .fillMaxWidth()
                .toggleable(
                    value = isCheck,
                    onValueChange = { isCheck = it },
                    role = Role.Checkbox,
                )
        ) {
            Text(text = "Checkbox", modifier = Modifier.weight(1f), fontSize = 20.sp)
            Checkbox(checked = isCheck, onCheckedChange = null)
        }

    }

}

As you can see above we have Text & CheckBox inside Row . Row is clickable through toggleable modifier.

• value :- it indicates the…