Jetpack Compose Academy · Aula

TextField e OutlinedTextField

Leia o que o usuário digita.

TextField e OutlinedTextField é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.

Partes desta aula ainda não foram traduzidas e aparecem em inglês.

Why Text Fields Matter

Almost every app asks the user to type something. In Compose, the TextField is your gateway to reading that input. ✏️

The TextField Composable

A TextField shows an editable box. It needs a current value and a callback that fires every time the text changes.

TextField(
    value = name,
    onValueChange = { name = it }
)

State Drives the Value

The field never stores text itself. You hold it in state and feed it back in, so the UI always shows the latest value.

var name by remember { mutableStateOf("") }

onValueChange Closes the Loop

Each keystroke calls onValueChange with the new text. You save it to state, Compose redraws, and the field reflects what was typed.

onValueChange = { newText -> name = newText }

Meet OutlinedTextField

OutlinedTextField works exactly the same way, but draws a clean border around the input instead of a filled background.

OutlinedTextField(
    value = name,
    onValueChange = { name = it }
)

Filled vs Outlined

The filled TextField has a shaded box and underline. The outlined one is lighter and airier. They behave identically, so pick by style.

Add a Label

A label tells the user what the field is for. It floats above the text once the field is focused or filled.

OutlinedTextField(
    value = name,
    onValueChange = { name = it },
    label = { Text("Name") }
)

Single Line by Default

Set singleLine to true to keep input on one row. The keyboard then shows a Done action instead of a newline.

TextField(
    value = name,
    onValueChange = { name = it },
    singleLine = true
)

Read the Value Anywhere

Because the text lives in state, any other Composable can read it. Greet the user the moment they finish typing their name. 👋

Text("Hello, " + name)

It Is a Controlled Field

Compose fields are controlled: what you display is whatever you pass as value. Forget to update state and the field appears frozen.

Start Simple, Grow Later

A value plus an onValueChange is all you truly need. Labels, icons, and validation are extras you add on top.

Quick Check

Which parameter receives the user's new text on every keystroke?

Recap

You met TextField and OutlinedTextField: bind a value from state, update it in onValueChange, and add a label. That is text input in Compose. 🎉

Perguntas Frequentes

A aula “TextField e OutlinedTextField” é grátis?

Sim — o texto completo de “TextField e OutlinedTextField” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.

O que vou aprender em “TextField e OutlinedTextField”?

Leia o que o usuário digita. Você pratica Jetpack Compose Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Jetpack Compose Academy?

Nenhuma experiência prévia é necessária. Jetpack Compose Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “TextField e OutlinedTextField”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Jetpack Compose Academy?

Sim. Cada aula de Jetpack Compose Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para Jetpack Compose Academy