🧩 Exercícios - Cap 08: Dashboard Gamer (Layouts e Pastas)

📖 Ver Cap 08

🎯 Antes de começar

No Cap 08 você montou o DashboardGamer() usando Column, Row e organizou o projeto nas pastas ui/screens e ui/components. Na Prática 2, você criou uma Box com fundo cinza e o texto “Nível 1” centralizado (contentAlignment = Alignment.Center). Depois de completar as duas Práticas, faça o exercício extra abaixo para ver como uma Box pode sobrepor itens em cantos diferentes.

---

💪 Exercício Extra 1: Badge de Notificação no Canto (15 min)

Objetivo: Praticar Box com múltiplos filhos, usando Modifier.align() em cada filho para posicioná-los em cantos diferentes (sobreposição).

Passos:

1. Crie uma nova função @Composable fun DashboardComBadge() { ... }.
2. Dentro de um Box(modifier = Modifier.fillMaxWidth()), coloque dois Text:

   @Composable
   fun DashboardComBadge() {
       Box(modifier = Modifier.fillMaxWidth()) {
           Text("Status do Treinador", fontWeight = FontWeight.Bold)
           Text(
               text = "🔔 3",
               color = Color.Red,
               modifier = Modifier.align(Alignment.TopEnd)
           )
       }
   }
   

3. Chame DashboardComBadge() na Preview (ou dentro de DashboardGamer(), antes do Row de HP/Mana).

✅ Resultado Esperado

• O texto “Status do Treinador” aparece no canto superior esquerdo.
• O texto “🔔 3” (em vermelho) aparece no canto superior direito, na mesma linha.
• Os dois textos ficam sobrepostos na mesma área (a Box), não um embaixo do outro.

---

🆘 Resolução de Problemas Comuns

Erro	Causa	Solução
Unresolved reference: align	Falta o import androidx.compose.ui.Alignment, ou .align() foi usado fora de um filho direto de Box	Adicione o import e confirme que Modifier.align(...) está em um Text/View dentro da Box
"🔔 3" aparece colado ao lado de "Status do Treinador", não no canto direito	O Box não tem Modifier.fillMaxWidth(), então ele só tem o tamanho do seu conteúdo	Adicione Modifier.fillMaxWidth() na Box para que TopEnd tenha espaço até a borda direita
Os dois textos aparecem um embaixo do outro	Foi usada uma Column em vez de uma Box	Box sobrepõe; Column empilha verticalmente — troque o container para Box

---

⬅️ Voltar para Exercícios

⬅️ Anterior Próximo ➡️