🗺️ Cap 11: Navegação entre Fases (Menus)

🎯 Objetivo da Aula: Ao final desta aula, seu app deixará de ser uma tela única e passará a ter um fluxo. Você aprenderá a criar rotas que permitem ao jogador navegar do Menu Principal para a Pokedex e voltar, usando o Navigation Compose.

---

🏢 O Cenário Prático (Seu Desafio): Seu app agora tem três partes: o Menu, a Pokedex e a Arena. Mas elas estão desconectadas. O jogador não consegue clicar em “Jogar” e ir para a Arena. Seu desafio é criar o Navegador do Jogo: um sistema de rotas que gerencia para onde o jogador vai e garante que o botão “Voltar” do celular funcione corretamente.

---

🧠 Fundamentos: A Teoria Traduzida

📖 Dicionário do Programador

• NavController: É o seu “Guia de Viagem”. É o objeto que você comanda para mudar de tela: “Ei Guia, me leve para a tela Arena!”.
• NavHost: É o local físico onde as telas ficam guardadas. Pense nele como o palco de um teatro onde as telas (cenários) são trocadas.
• Rota (Route): É o nome “de batismo” de cada tela (ex: "home", "detalhes").

🎨 O Mapa das Telas (Organização)

No Android Studio, crie a pasta navigation/ e dentro dela o arquivo AppNavigation.kt. É lá que vamos desenhar o mapa do nosso app.

graph TD
    A["Menu Principal"] -->|navController.navigate| B["Tela da Pokedex"]
    B -->|navController.popBackStack| A
    A -->|navController.navigate| C["Arena de Batalha"]

---

📦 Dependência Gradle

O Navigation Compose não vem por padrão no projeto. Adicione no build.gradle (Module: app), dentro de dependencies { }:

implementation 'androidx.navigation:navigation-compose:2.7.7'

📦 Imports Necessários

Antes de copiar os códigos abaixo, adicione estes imports no topo do seu arquivo .kt:

import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController

---

📖 Exemplo Passo a Passo: Criando o Mapa

1. Importe a biblioteca de navegação: androidx.navigation.compose.*.
2. Crie o NavController e o NavHost.

@Composable
fun NavegadorDoJogo() {
    // 1. Criando o guia
    val navController = rememberNavController()

    // 2. Definindo o mapa e onde começamos (startDestination)
    NavHost(navController = navController, startDestination = "menu") {
        
        // Tela 1: Menu
        composable("menu") { 
            Button(onClick = { navController.navigate("pokedex") }) {
                Text("Ir para Pokedex")
            }
        }

        // Tela 2: Pokedex
        composable("pokedex") { 
             Column {
                 Text("Sua Pokedex")
                 Button(onClick = { navController.popBackStack() }) {
                     Text("Voltar")
                 }
             }
        }
    }
}

---

🛠️ Prática Obrigatória 1: Crie três rotas no seu NavHost: "inicio", "arena" e "vitoria". A tela "inicio" deve ter um botão que leva para a "arena".

---

🛠️ Prática Obrigatória 2: Na tela "arena", adicione um botão “Finalizar Batalha” que leve o jogador para a tela de "vitoria". Na tela de "vitoria", adicione um botão “Voltar ao Menu” que use navController.popBackStack().

---

🔑 Gabarito Passo a Passo:

NavHost(navController = navController, startDestination = "inicio") {
    composable("inicio") { 
        Button(onClick = { navController.navigate("arena") }) { Text("Iniciar Jogo") }
    }
    composable("arena") { 
        Button(onClick = { navController.navigate("vitoria") }) { Text("Vencer Batalha") }
    }
    composable("vitoria") { 
        Column {
            Text("🏆 PARABÉNS, TREINADOR!")
            Button(onClick = { navController.popBackStack() }) { Text("Voltar") }
        }
    }
}

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

1. Envie o código do seu NavHost completo.
2. Submeta no canal de tarefas.

---

⬅️ Voltar para a Home

⬅️ Anterior Próximo ➡️