My page.drawer makes an error: AssertionError: Control must be added to the page first

Question

import flet as ft
from textos import Welcome

def main(page = ft.Page):
page.title = 'Mejora tu glucemia'
page.padding = ft.padding.only(
    top = 0,
    bottom = 0,
    left = 0,
    right = 0
)
page.window_height = 900
page.window_width = 400


header_height = page.window_height * 0.08
body_height = page.window_height - header_height

def navigation_drawer_changed(e):
    selected = e.control.selected_index
    if selected == 0:
        page.go('/')
    elif selected == 1:
        page.go('/cuaderno')


page.drawer = ft.NavigationDrawer(
    on_change= navigation_drawer_changed,
    controls = [
        ft.Container(height=12),
        ft.NavigationDrawerDestination(
            label = 'Inicio',
            icon = ft.icons.DOOR_BACK_DOOR_OUTLINED,
            selected_icon_content = ft.Icon(ft.icons.DOOR_BACK_DOOR)
        ),
        ft.Container(height=12),
        ft.Container(height=2, bgcolor= ft.colors.BLACK),
        ft.Container(height=12),
        ft.NavigationDrawerDestination(
            label = 'Cuaderno',
            icon = ft.icons.BOOKMARK_BORDER_OUTLINED,
            selected_icon_content = ft.Icon(ft.icons.BOOKMARK)
        ),
        ft.Container(height=12),
        ft.NavigationDrawerDestination(
            label = 'Añadir notas',
            icon = ft.icons.BORDER_COLOR_OUTLINED,
            selected_icon_content = ft.Icon(ft.icons.BORDER_COLOR)
        )
    ]
)


def show_drawer(e):
    page.drawer.open = True
    page.drawer.update()



header = ft.Container(
    height= header_height,
    padding = ft.padding.only(
        left = page.window_width*0.05,
        right = page.window_width*0.05
    ),
    shadow = ft.BoxShadow(
        blur_radius=1,
        spread_radius=1,
        color=ft.colors.BLACK,
        offset=ft.Offset(0, 1),
    ),
    bgcolor = ft.colors.BLACK,
    content = ft.Column(
        alignment = 'center',
        controls= [
            ft.Row(
                alignment= 'spaceBetween',
                controls = [
                    ft.IconButton(icon = ft.icons.MENU, on_click=show_drawer)
                ]
            )
        ]
    )
)


class PaginaInicio(ft.UserControl):
    def build(self):
        return ft.Column(
            spacing= 0,
            controls= [
                header,
                ft.Container(
                    height= body_height,
                    bgcolor= ft.colors.WHITE,
                    content = ft.Row(
                        alignment= 'center',
                        controls = [
                            ft.Column(
                                alignment= 'center',
                                controls= [
                                    Welcome
                                ]
                            )
                        ]
                    )
                )
            ]
        )


class PaginaCuaderno(ft.UserControl):
    def build(self):
        return ft.Column(
            spacing= 0,
            controls= [
                header,
                ft.Container(
                    height= body_height,
                    bgcolor= ft.colors.WHITE,
                    content = ft.Row(
                        alignment= 'center',
                        controls = [
                            ft.Column(
                                alignment= 'center',
                                controls= [
                                    
                                ]
                            )
                        ]
                    )
                )
            ]
        )


pagina_inicio = PaginaInicio()
pagina_cuaderno = PaginaCuaderno()

pages = {
    '/': ft.View(
        "/",
        [
            pagina_inicio
        ]
    ),
    '/cuaderno': ft.View(
        "/cuaderno",
        [
            pagina_cuaderno
        ]
    )
}

def route_change(route):
    print('a')
    page.views.clear()
    page.views.append(
        pages[page.route]
    )
    page.update()


page.on_route_change = route_change
page.go(page.route)

if __name__ == '__main__':
    ft.app(target=main)

I tried using the page.add(page.drawer), page.add(header) and page.add(pagina_inicio) But when i use the function page.update() flet says the page.drawer must be added to the page first. I think I'm adding something wrong or maybe i should use page.update() in another way. And there is no tutorial for this on internet or someone solving the problem, so i would appreciate any help.

Answer 1

page.update refreshes the screen but dosen't add items to it. From the docs, page.add(e) is equivalent to

page.controls.append(e)
page.update()

So you should be using page.add(e) instead of updating the page before adding the item to it