[Python] Unknown control: navigationdrawer

I'm trying to add a drawer, however I can't understand why it always shows as unknown control.



app.py:

from flet import *
from pages.home import Home

class Main(UserControl):
def __init__(self, page: Page):
super().__init__()
self.page = page
self.init_helper()

def init_helper(self):
self.page.on_route_change = self.on_route_change
self.page.go('/home')

def on_route_change(self, route):
# Instanciar as páginas ROUTE
new_page = {
"/home": Home,
}[self.page.route](self.page)

self.page.views.clear()
self.page.views.append(
View(route,
[new_page]
)
)

self.page.update()

def main(page: Page):
page.title = "Lta Music"
page.add(Main(page))

app(target=main, assets_dir='assets')


home.py:

from flet import *

class Home(UserControl):
def __init__(self, page: Page):
super().__init__()
self.page = page
self.expand = True

# Iniciar configurações
self.observer(None) # Chamar o observer com None

# Adicionar um listener para mudanças de tamanho da tela
self.page.on_resize = self.observer

#########################################################
# Abaixo escrever os widgets (contúdos) #
#########################################################

# Criar um NavigationDrawer com estado inicial como fechado
self.drawer = NavigationDrawer(
open=False,
controls=[
Container(height=12),
NavigationDrawerDestination(
label="Item 1",
icon=icons.DOOR_BACK_DOOR_OUTLINED,
selected_icon_content=Icon(icons.DOOR_BACK_DOOR),
),
Divider(thickness=2),
NavigationDrawerDestination(
icon_content=Icon(icons.MAIL_OUTLINED),
label="Item 2",
selected_icon=icons.MAIL,
),
NavigationDrawerDestination(
icon_content=Icon(icons.PHONE_OUTLINED),
label="Item 3",
selected_icon=icons.PHONE,
),
],
)

def show_drawer(e):
self.drawer.open = not self.drawer.open
self.page.update()
print('que merda')

# Criar o AppBar personalizado
self.appbar = Container(
content=Row(
controls=[
IconButton(icon=icons.MENU_OUTLINED, on_click=show_drawer, icon_color=colors.WHITE),
Text("Reprodutor de música", style="titleLarge", color=colors.WHITE),
IconButton(icon=icons.PALETTE_OUTLINED, on_click=self.toggle_theme, icon_color=colors.WHITE),
IconButton(icon=icons.SEARCH, on_click=self.search_action, icon_color=colors.WHITE)
],
alignment="spaceBetween",
vertical_alignment="center"
),
bgcolor=colors.TRANSPARENT,
padding=10
)

# Criar um Tabs
self.homeTabs = Tabs(
selected_index=1,
divider_color= colors.GREY,
divider_height=0.1,
indicator_color=colors.PURPLE,
label_color="white",
unselected_label_color="grey",
scrollable= True,
animation_duration=300,
tabs=[
Tab(
adaptive= True,
text="Faixas",
content=Container(
content=Text(" Aqui vai ser inserido uma lista com todas as músicas", style="titleLarge", color=colors.WHITE), alignment=alignment.center
),
),
Tab(
adaptive= True,
text="Lista de reprodução",
content=Container(
content=Text(" Aqui vai aparecer as listas de reprodução", style="titleLarge", color=colors.WHITE), alignment=alignment.center
),
),
Tab(
adaptive= True,
text="Pastas",
content=Container(
content=Text(" Aqui vai poder selecionar a pasta origem das músicas", style="titleLarge", color=colors.WHITE), alignment=alignment.center
),
),
Tab(
adaptive= True,
text="Teste 1",
content=Container(
content=Text(" Aqui vai poder selecionar a pasta origem das músicas", style="titleLarge", color=colors.WHITE), alignment=alignment.center
),
),
Tab(
adaptive= True,
text="Teste 2",
content=Container(
content=Text(" Aqui vai poder selecionar a pasta origem das músicas", style="titleLarge", color=colors.WHITE), alignment=alignment.center
),
),
Tab(
adaptive= True,
text="Teste 3",
content=Container(
content=Text(" Aqui vai poder selecionar a pasta origem das músicas", style="titleLarge", color=colors.WHITE), alignment=alignment.center
),
),
],
width=400,
height=400,
)

# Atribuição de widgets ao content com self.widget
self.content = Column(
controls=[
self.homeTabs,
]
)

# Criar um Container com fundo gradiente
self.background = Container(
content=Column(
controls=[
self.appbar,
self.content
],
expand=True,
spacing=0
),
expand=True,
gradient=LinearGradient(
begin=alignment.top_left,
end=Alignment(0.1, 1.5),
colors=["#1c2454","#342c5b" ,"#64244b"] # Cores do gradiente
)
)

# Adicionar os objetos ao controle principal
self.controls.append(self.background)
self.controls.append(self.drawer)
self.page.update()
print("Controles ativos: ", self.controls)

#########################################################
# Abaixo escrever as funções/métodos (def) #
#########################################################
def observer(self, e=None):
larg_tela = self.page.width
alt_tela = self.page.height
if larg_tela < 768:
tipo_tela = "MOBILE"
elif larg_tela < 1000:
tipo_tela = "TABLET"
else:
tipo_tela = "DESKTOP"

os_name = self.page.platform
print("largura: ", larg_tela, "\naltura: ", alt_tela, "\ndispositivo: ", tipo_tela, "\nsistema: ", os_name)
return larg_tela, alt_tela, tipo_tela, os_name

def toggle_theme(self, e):
print("Toggle theme action triggered")

def search_action(self, e):
print("Search action triggered")

def more_action(self, e):
print("More action triggered")

def go_home(self, e):
print("Home clicked")

def go_settings(self, e):
print("Settings clicked")

def go_about(self, e):
print("About clicked")


Print message:

Controles ativos: [Container(expand=1), NavigationDrawer(open=False)]
​

I have tried enlisting the control in several ways, but it remains an unknown control. I am using the following command line:

flet run -r -p 8551 --android /home/felipereis/Dev/11-ltamusic/app.py


References:

• NavigationDrawer
• Flet Tutorial - Make Navigation Drawer [ Official Flet Team ]

Continue reading...