Lesson 11: Buttons and Handling User Input

Buttons and Handling User Input

Time to make something interactive. Compose gives you several built-in input components — let's cover the two you'll use constantly.

Button

Button(onClick = { println("Clicked!") }) {
    Text("Add Task")
}

Everything inside the { } content block can be any composable — usually just Text, but it can include an Icon too for an icon + label button.

TextField — capturing typed input

var text by remember { mutableStateOf("") }

TextField(
    value = text,
    onValueChange = { newValue -> text = newValue },
    label = { Text("Task name") }
)

This introduces something important: TextField doesn't manage its own text — you hold the current value (text) and update it yourself in onValueChange. This pattern is called a "state hoisting", and it's the single most important concept in Compose. We're dedicating the entire next lesson to it, because this exact remember { mutableStateOf(...) } pattern is everywhere from here on.

Putting it together

Column {
    TextField(
        value = text,
        onValueChange = { text = it },
        label = { Text("Task name") }
    )
    Button(onClick = { println("Adding: $text") }) {
        Text("Add Task")
    }
}

Try it yourself

Build this exact Column, run it, type something into the field, and check Logcat when you tap the button to confirm your typed text made it through.

Next: Lesson 12 — properly understanding state with remember and mutableStateOf.