Surface

ClickableSurfaceSample

@Preview
@Composable
fun ClickableSurfaceSample() {
    var count by remember { mutableStateOf(0) }
    Surface(onClick = { count++ }) { Text("Clickable Surface. Count: $count") }
}

SelectableSurfaceSample

@Preview
@Composable
fun SelectableSurfaceSample() {
    var selected by remember { mutableStateOf(false) }
    Surface(selected = selected, onClick = { selected = !selected }) {
        Text(text = if (selected) "Selected" else "Not Selected", textAlign = TextAlign.Center)
    }
}

SurfaceSample

@Preview
@Composable
fun SurfaceSample() {
    Surface { Text("Text on Surface") }
}

ToggleableSurfaceSample

@Preview
@Composable
fun ToggleableSurfaceSample() {
    var checked by remember { mutableStateOf(false) }
    Surface(
        checked = checked,
        onCheckedChange = { checked = !checked },
        color =
            if (checked) {
                MaterialTheme.colorScheme.surfaceVariant
            } else {
                MaterialTheme.colorScheme.surface
            },
    ) {
        Text(text = if (checked) "ON" else "OFF", textAlign = TextAlign.Center)
    }
}