So, I’m trying to make a Flet app to give useful info to people in my town such as news, recycling, events,… Basically, I put the various categories in a NavigationDrawer, which is opened through a hamburger button placed on the appbar.

When I try to open it with page.open(drawer), it raises this error:

AssertionError: Control must be added to the page first.

This error usually happens when the page.drawer is not set, but that’s not the case.

I tried debugging a bit and it turns out that, if I use page.drawer.open = True, the drawer opens succesfully, but it doesn’t show.

Instead, with the first approach (described in the docs), it raises said error.

Code: (I replaced long parts with comments)

# Handle drawer navigation with page.go(<route corresponding to index>)

  drawer = ft.NavigationDrawer(
      on_change=handle_change,
      controls=[
          ft.Container(height=12),
          ft.NavigationDrawerDestination(
              label="Home",
              icon=ft.icons.HOME,
              selected_icon_content=ft.Icon(ft.icons.HOME_FILLED),
          ),
          ft.Divider(thickness=2),
          ft.NavigationDrawerDestination(
              icon_content=ft.Icon(ft.icons.NEWSPAPER),
              label="Notizie",
              selected_icon=ft.icons.NEWSPAPER_OUTLINED,
          ),
          ft.NavigationDrawerDestination(
              icon_content=ft.Icon(ft.icons.RECYCLING),
              label="Differenziata",
              selected_icon=ft.icons.RECYCLING_OUTLINED,
          )
      ]
  )

  
  def show_drawer(e):
      page.open(drawer)

  hamburger_btn = ft.IconButton(
      icon=ft.icons.MENU,
      on_click=show_drawer
  )

  page.drawer = drawer
  
  # Route change event handler

  def view_pop(view):
      page.views.pop()
      top_view = page.views[-1]
      page.go(top_view.route)

  page.on_route_change = route_change
  page.on_view_pop = view_pop
  # appbar creation with page.appbar
  page.update()
  page.go(page.route)