Control must be added to the page first error..All i want is my navigation drawer to show

[GreggIsGreat]

Question

How can i show my navigation drawer?

Code sample

from flet import *
from sidebar.sidebar import ModernNavBar


class NavigationPanel(UserControl):
    def __init__(self, page):
        super().__init__()
        self.page = page
        self.drawer = NavigationDrawer(
            indicator_shape=None,
            controls=[
                Container(
                    height=200,
                    bgcolor='BLUE900',
                    content=Text("Welcome", weight='BOLD', size=20),
                    margin=10,
                    padding=10,
                    border_radius=10,
                    alignment=alignment.center,
                    on_click=lambda e: print("Clickable without Ink clicked!"),
                ),
                ModernNavBar(),
            ]
        )
        # self.page.drawer = self.drawer
        self.page.add(self.drawer)

    def show_drawer(self, e):
        self.drawer.open = True
        self.drawer.update()
        print('Tits')


    def AppBar(self):
        return AppBar(
            title=Text('Main', weight='bold', size=18, color='WHITE'),
            # leading_width=30,
            leading=IconButton(icons.MENU, on_click=self.show_drawer),
            bgcolor='BLUE800'
        )

    def build(self):
        return self.AppBar()



def main(page: Page):
    page.title = 'Hello'
    page.horizontal_alignment = 'center'
    page.vertical_alignment = 'center'
    page.window_width = 400
    page.window_height = 800
    page.theme_mode = ThemeMode.DARK

    menu = NavigationPanel(page)


    def route_change(e: RouteChangeEvent) -> None:
        page.views.clear()
        page.views.append(
            View(
                route='/',
                controls=[
                    Text(value='MENU', size=50, color='white', font_family='bl'),
                    IconButton(
                        icon=icons.NAVIGATE_NEXT,
                        icon_color="blue400",
                        icon_size=40,
                        tooltip="Open",
                        on_click=lambda _: page.go('/main'))],
                vertical_alignment=MainAxisAlignment.CENTER,
                horizontal_alignment=CrossAxisAlignment.CENTER,
                spacing=26,
            ),

        )

        # Account View
        if page.route == "/main":
            page.views.append(
                View(
                    route='/main',
                    controls=[
                        menu.AppBar(),
                        FloatingActionButton(
                            icon=icons.ARROW_BACK_IOS_ROUNDED,
                            bgcolor='BLUE900',
                            on_click=lambda _: page.go('/')
                        ),
                        Text(
                            value='Hello',
                            # weight='BOLD',
                            size=25,
                            text_align=TextAlign.CENTER
                        ),
                        ElevatedButton(
                            "Drawer",
                            on_click=menu.show_drawer),
                    ],
                    vertical_alignment=MainAxisAlignment.CENTER,
                    horizontal_alignment=CrossAxisAlignment.CENTER,
                )
            )

    # page.add(
    #     Text("Hello", size=20),
    #     menu.ApBr(),
    #     # ElevatedButton("Show drawer", on_click=side.show_drawer)
    # )
    page.update()

    def view_pop(e: ViewPopEvent) -> None:
        page.views.pop()
        top_view: View = page.views[-1]
        page.go(top_view.route)

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


app(target=main)

Error message

line 30, in show_drawer
    self.drawer.update()
 line 263, in update
    assert self.__page, "Control must be added to the page first."
AssertionError: Control must be added to the page first.

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[Michel7GitHub]

I have the same problem. No way the show Drawer when I use Route View.
Does anyone have an idea ?

[GreggIsGreat]

thiis is what i did: Add a navigation_menu = menu.drawer then navigation_menu at each page. Uncomment the commented variable self.page.drawer = self.drawer then finally remove page.views.clear

[Michel7GitHub]

SUPER, it works.
Thanks

[Michel7GitHub]

If I remove page.views.clear(), page.views.append will accumulate each time I call route_chage.
Could it cause a problem ?

[GreggIsGreat]

Im not exactly sure but potentially it could....I found no other way to solve the issue

[MaxXilon]

In the route_change function you're clearing the views list of the page (page.views.clear()), this causes the drawer to be removed or cleared along, when the self.drawer.update() is called the drawer isn't found and returns AssertionError: Control must be added to the page first., you can try adding the drawer to the new View control being appended to the page.views list, the View control has its own drawer property, you can read the View control docs for more information on the drawer property.