Em aplicativos modernos, navegar entre diferentes telas é essencial. Imagine um app como o Instagram: há uma tela para o feed, outra para pesquisar, outra para o perfil... O menu de navegação ajuda o usuário a se mover entre essas partes.
O Flet oferece diferentes opções de navegação visual, como:
Nesta semana, focaremos na parte visual desses elementos, antes de adicionar a lógica de navegação nas próximas aulas.
Vamos começar criando uma estrutura de layout básica com uma barra superior e uma barra inferior de navegação.
import flet as ft
def main(page: ft.Page):
page.title = "Exemplo com AppBar e NavigationBar"
def ao_mudar(index):
print(f"Selecionado: {index}")
page.appbar = ft.AppBar(
title=ft.Text("Meu App"),
center_title=True,
bgcolor=ft.colors.SURFACE_VARIANT
)
page.navigation_bar = ft.NavigationBar(
destinations=[
ft.NavigationDestination(icon=ft.icons.HOME, label="Início"),
ft.NavigationDestination(icon=ft.icons.SEARCH, label="Buscar"),
ft.NavigationDestination(icon=ft.icons.PERSON, label="Perfil"),
],
on_change=ao_mudar
)
page.add(ft.Text("Conteúdo da tela principal"))
page.update()
ft.app(target=main)O layout acima é estático, mas já traz estrutura profissional ao app. O conteúdo ainda não muda ao clicar nos itens.
Mesmo sem implementar ainda a lógica de troca de telas, podemos preparar as "páginas" e deixá-las prontas para serem exibidas de acordo com a seleção no menu.
conteudo_paginas = [
ft.Text("📄 Página Início"),
ft.Text("🔍 Página de Busca"),
ft.Text("👤 Página de Perfil"),
]
Na próxima aula, vamos associar a troca de página com o índice selecionado no
NavigationBar. Por enquanto, pense nessas variáveis como diferentes áreas visuais que seu
app poderá mostrar.
Exemplo real: Quando você abre o YouTube, há páginas como "Início", "Inscrições", "Biblioteca". Cada botão muda o conteúdo, mas a estrutura permanece.
Crie um app com a seguinte estrutura:
Você pode usar uma Column ou Container central para exibir o conteúdo de cada
"tela".
Desafio: Desenvolva um app com estrutura de navegação visual (sem mudar o conteúdo ainda).
Entrega: Código + print do app rodando