How to call View or Screens using flet?

Question

I'm learning flet and I'm currently having a question. Firstly, I would like to clarify that I have no experience in programming but I was able to understand the code attached to this post.

I would like to find a way to switch screens using this attached code.

I wanted to create 3 screens, all of which must have a NavigationDrawer and an AppBar, so I tried to create classes of them, to reuse, I may have done something wrong. So I don't know how to perform this task.

Can you help me? If this is not a channel for questions, I apologize and help by indicating a forum on the subject.

import flet as ft

# Imports para definição de eventos.
from flet import (RouteChangeEvent, View, AppBar, PopupMenuItem, PopupMenuButton, Icon, icons, Text, colors, Container, margin, TextField, AlertDialog, ElevatedButton, Column )

class CustomNavigationDrawer(ft.NavigationDrawer):
    def __init__(self):
        super().__init__(
            controls=[
                ft.Container(height=12),
                ft.NavigationDrawerDestination(
                    label="Item 1",
                    icon=ft.icons.DOOR_BACK_DOOR_OUTLINED,
                    selected_icon_content=ft.Icon(ft.icons.DOOR_BACK_DOOR),
                ),
                ft.Divider(thickness=2),
                ft.NavigationDrawerDestination(
                    icon_content=ft.Icon(ft.icons.MAIL_OUTLINED),
                    label="Item 2",
                    selected_icon=ft.icons.MAIL,
                ),
                ft.NavigationDrawerDestination(
                    icon_content=ft.Icon(ft.icons.PHONE_OUTLINED),
                    label="Item 3",
                    selected_icon=ft.icons.PHONE,
                ),
            ]
        )

    def add_custom_control(self, control):
        self.controls.append(control)

class User:
    def __init__(self, name, password):
        self.name = name
        self.password = password

class CustomAppBar(AppBar):
    def __init__(self, title_text: str):
        login_profile_button = PopupMenuItem(text="Log in", on_click=self.login)
        appbar_items = [
            login_profile_button,
            PopupMenuItem(),  # divider
            PopupMenuItem(text="Settings"),
        ]

        super().__init__(
            # Ícone da barra, o padrão é o comentado
            # leading=Icon(icons.ACCESSIBILITY),
            # leading_width=100,
                
            leading=Icon(None),
            leading_width=-1,
            

            title=Text(title_text, font_family="Pacifico", size=32, text_align="start"),
            center_title=False,
            toolbar_height=75,
            bgcolor=colors.LIGHT_BLUE_ACCENT_700,
            actions=[
                Container(
                    content=PopupMenuButton(items=appbar_items, tooltip="Menu rápido"),
                    margin=margin.only(left=50, right=25),
                )
            ],
        )

    def login(self, e):
        def close_dlg(e):
            if user_name.value == "" or password.value == "":
                user_name.error_text = "Please provide username"
                password.error_text = "Please provide password"
                self.page.update()
                return
            else:
                user = User(user_name.value, password.value)
                if user not in self.store.get_users():
                    self.store.add_user(user)
                self.user = user_name.value
                self.page.client_storage.set("current_user", user_name.value)

            dialog.open = False
            self.appbar_items[0] = PopupMenuItem(
                text=f"{self.page.client_storage.get('current_user')}'s Profile"
            )
            self.page.update()

        user_name = TextField(label="Usuário")
        password = TextField(label="Password", password=True)
        dialog = AlertDialog(
            title=Text("Identifique-se"),
            content=Column(
                [
                    user_name,
                    password,
                    ElevatedButton(text="Login", on_click=close_dlg),
                ],
                tight=True,
            ),
            on_dismiss=lambda e: print("Modal dialog dismissed!"),
        )
        self.page.dialog = dialog
        dialog.open = True
        self.page.update()        

    def add_appbar_item(self, item):
        self.actions[0].content.items.append(item)

def main(page: ft.Page):
    # Criando minha primeira página.
    page.title = 'RD STATION'
    page.theme_mode = "dark"

    # --------------------------------------------------------------
    # Criando a instância da CustomAppBar
    custom_appbar = CustomAppBar("NOME DO MEU APP")

    # Adicionando itens específicos à instância customizada
    custom_appbar.add_appbar_item(PopupMenuItem(text="New Item"))

    # Definindo a instância customizada como a appbar da página
    page.appbar = custom_appbar
    # --------------------------------------------------------------

    # Criando a instância da CustomNavigationDrawer
    custom_drawer = CustomNavigationDrawer()

    # Adicionando controles específicos à instância customizada
    custom_drawer.add_custom_control(ft.NavigationDrawerDestination(
        icon_content=ft.Icon(ft.icons.SETTINGS_OUTLINED),
        label="Configurações",
        selected_icon=ft.icons.SETTINGS,
    ))

    # Definindo a instância customizada como o drawer da página
    page.drawer = custom_drawer
    # --------------------------------------------------------------

    def show_drawer(e):
        # Habilita o Drawer a ser aberto
        page.drawer.open = True
        page.drawer.update()

    page.add(
        ft.IconButton(
            icon=ft.icons.MENU_SHARP,
            icon_color="blue400",
            icon_size=25,
            tooltip="Clique para abrir",
            on_click=show_drawer
        )
    )

ft.app(main)

Answer 1

I suggest you go through this Flet guide on how to setup screens (called views in Flet) and navigate through them in the app.