🧱 Cap 06: Dashboard Gamer (Layouts e Pastas)

🎯 Objetivo da Aula: Ao final desta aula, você dominará os três pilares de organização do Compose: Column, Row e Box. Além disso, você aprenderá a organizar seus arquivos no Android Studio usando o Mapa do Tesouro (Estrutura de Pastas).

---

🏢 O Cenário Prático (Seu Desafio): Sua tela de perfil ficou simples. Agora, o desafio é criar um Dashboard de Batalha. Você precisa colocar o HP e a Mana lado a lado (Row), as habilidades uma embaixo da outra (Column) e um ícone de “Alerta” por cima de tudo (Box). E o mais importante: você deve organizar esses arquivos nas pastas corretas!

---

🧠 Fundamentos: A Teoria Traduzida

📖 Dicionário do Programador

• Column (Coluna): Itens um embaixo do outro.
• Row (Linha): Itens um ao lado do outro.
• Box (Caixa): Itens sobrepostos (um em cima do outro, como camadas).

🎨 O Mapa do Tesouro (Pastas)

Para o código não virar bagunça, clique com o botão direito na pasta java/br.com.curso.projeto e crie estas subpastas (New > Package):

1. ui/screens/: Para as telas inteiras.
2. ui/components/: Para as peças pequenas (ex: seu Botão customizado).

graph TD
    A[Dashboard Gamer] --> B[Row: HP e Mana]
    A --> C[Column: Habilidades]
    A --> D[Box: Notificação]

---

📖 Exemplo Passo a Passo: O Painel de Status

1. Crie um novo arquivo chamado DashboardScreen.kt dentro da pasta ui/screens/.
2. Use o modificador Modifier.fillMaxWidth() para que o item ocupe a largura toda.

@Composable
fun DashboardGamer() {
    Column(modifier = Modifier.padding(16.dp)) {
        // Título
        Text("Status do Treinador", fontWeight = FontWeight.Bold)
        
        // HP e Mana Lado a Lado
        Row(modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.SpaceBetween) {
            Text("HP: 100/100", color = Color.Red)
            Text("MANA: 50/50", color = Color.Blue)
        }
        
        // Habilidades uma embaixo da outra
        Column(modifier = Modifier.padding(top = 10.dp)) {
            Text("⚔️ Corte Rápido")
            Text("🛡️ Defesa Absoluta")
        }
    }
}

---

🛠️ Prática Obrigatória 1: Organize seu projeto! Crie as pastas ui/screens e ui/components no seu Android Studio. Mova sua tela de Dashboard para a pasta screens.

---

🛠️ Prática Obrigatória 2: Crie uma Box que tenha um fundo cinza e coloque um texto “Nível 1” centralizado nela. Use o modificador Modifier.align(Alignment.Center).

---

🔑 Gabarito Passo a Passo:

Exercício 2:

@Composable
fun BadgeNivel() {
    Box(
        modifier = Modifier.size(100.dp).background(Color.Gray),
        contentAlignment = Alignment.Center
    ) {
        Text(text = "NÍVEL 1", color = Color.White)
    }
}

📤 Instruções de Entrega (Microsoft Teams):

1. Envie um print da sua estrutura de pastas no Android Studio.
2. Envie o código do seu Dashboard.
3. Submeta no canal de tarefas.

---

← Capitulo Anterior | Proximo Capitulo →