🗺️ Cap 09: 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]

---

📖 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.

---

← Capitulo Anterior | Proximo Capitulo →