Jetpack Compose Academy · Aula

Linha de Estatísticas e Botão Seguir

Adicione detalhes interativos ao cartão.

Linha de Estatísticas e Botão Seguir é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 3 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.

Add the Interactive Details

With the header done, you will add the lower half: a row of stats and a follow button that responds to taps. This is where the card comes alive. ⚡

One Stat Block

Each stat is two stacked Texts: a big number and a small label. A tiny Column holds them together as one neat block.

Column(horizontalAlignment = Alignment.CenterHorizontally) {
    Text("128")
    Text("Posts")
}

Emphasize the Number

The count should pop while the label stays quiet. Give the number a bold style and the label a smaller one.

Text("128", style = MaterialTheme.typography.titleMedium)
Text("Posts", style = MaterialTheme.typography.labelSmall)

Put Stats in a Row

Three stat blocks sit side by side, so wrap them in a Row. Each block becomes a child laid out left to right.

Row {
    StatBlock("128", "Posts")
    StatBlock("4.2k", "Followers")
    StatBlock("180", "Following")
}

Space the Stats Evenly

Spread the blocks across the card with Arrangement.SpaceEvenly on the Row, so the gaps are equal and balanced.

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) { /* ... */ }

Add the Follow Button

Below the stats, add a Button. Its onClick lambda runs your code the moment the user taps it.

Button(onClick = { /* follow */ }) {
    Text("Follow")
}

Make It Full Width

A primary action button reads best across the whole card. Add fillMaxWidth so it spans edge to edge.

Button(
    onClick = { /* follow */ },
    modifier = Modifier.fillMaxWidth()
) { Text("Follow") }

Track the Follow State

The button should toggle between Follow and Following. Hold that with remember and mutableStateOf so the UI reacts to taps.

var following by remember { mutableStateOf(false) }

Flip State on Tap

Inside onClick, flip the boolean. Compose notices the state changed and redraws the button with new text automatically.

Button(onClick = { following = !following }) {
    Text(if (following) "Following" else "Follow")
}

Wire It Into the Card

Drop the stats Row and the Button below the header inside the outer Column. The full card now reads top to bottom in order.

An Interactive Card

You now have stats, a follow button, and live state. Tapping really changes the screen, which is the heart of a declarative Compose UI. 🎉

Quick Check

What lets the button text update when tapped?

Recap: Stats and Action

You built a Row of evenly spaced stat blocks and a full-width follow button driven by remembered state. Next you will refactor it all into clean, reusable pieces.

Perguntas Frequentes

A aula “Linha de Estatísticas e Botão Seguir” é grátis?

Sim — o texto completo de “Linha de Estatísticas e Botão Seguir” é 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 “Linha de Estatísticas e Botão Seguir”?

Adicione detalhes interativos ao cartão. 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 3 de 4.

Quanto tempo leva a aula “Linha de Estatísticas e Botão Seguir”?

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