Skip to content

Navigation Drawer Not Visible on Backward Navigation. #4894

@PNMugkesh

Description

@PNMugkesh

Issue: Navigation Drawer Not Visible on Backward Navigation.

Description
I encountered an issue where the Navigation Drawer does not behave correctly when navigating backward using the system back button or programmatic navigation (view_pop function).

  • The drawer appears correctly when initially opened and works fine during forward navigation.
  • However, when the user navigates back using view_pop, the drawer remains visible unexpectedly.
  • Once the drawer is clicked, does not appear on the same page.
  • After navigating to another page (either forward or backward), the drawer reappears again.

`import flet as ft

def main(page: ft.Page):
page.title = "Lazy Loader with Back Navigation"
page.theme_mode = "light"

def handle_change(e):
    if e.control.selected_index == 0:
        page.go("/")
    elif e.control.selected_index == 1:
        page.go("/store")
    elif e.control.selected_index == 2:
        page.go("/about")

drawer = ft.NavigationDrawer(
    on_change=handle_change,
    controls=[
        ft.Container(height=12),
        ft.NavigationDrawerDestination(
            label="Item 1",
            icon=ft.Icons.DOOR_BACK_DOOR_OUTLINED,
            selected_icon=ft.Icon(ft.Icons.DOOR_BACK_DOOR),
        ),
        ft.Divider(thickness=2),
        ft.NavigationDrawerDestination(
            icon=ft.Icon(ft.Icons.MAIL_OUTLINED),
            label="Item 2",
            selected_icon=ft.Icons.MAIL,
        ),
        ft.NavigationDrawerDestination(
            icon=ft.Icon(ft.Icons.PHONE_OUTLINED),
            label="Item 3",
            selected_icon=ft.Icons.PHONE,
        ),
    ],
)

page.drawer = drawer

def open_drawer(e):
    if page.drawer:
        page.drawer.open = True
        page.update()  # Ensure the entire page updates

def route_change(route):

        if page.route == "/":
            page.views.clear()
            page.views.append(
                ft.View(
                    "/",
                    [
                        ft.AppBar(
                            title=ft.Text("Home", expand=True),
                            bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
                            leading=ft.Row(
                                controls=[
                                    ft.IconButton(ft.icons.MENU, on_click=open_drawer)
                                ],
                                spacing=0
                            ),
                            automatically_imply_leading=False
                        ),
                        ft.Text("Welcome to Home Page"),
                    ],
                    drawer=drawer  # Ensure the drawer is available
                )
            )

        if page.route == "/store":
            page.views.append(
                ft.View(
                    "/store",
                    [
                        ft.AppBar(
                            title=ft.Text("Store", expand=True),
                            bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
                            leading=ft.Row(
                                controls=[
                                    ft.IconButton(ft.icons.MENU, on_click=open_drawer),
                                    ft.IconButton(ft.icons.ARROW_BACK, on_click=view_pop)  # Fix applied here
                                ],
                                spacing=0
                            ),
                            automatically_imply_leading=False
                        ),
                        ft.Text("Welcome to Store Page"),
                        ft.ElevatedButton("Go About", on_click=lambda _: page.go("/about")),
                    ],
                    drawer=drawer  # Add the drawer
                )
            )

        if page.route == "/about":
            page.views.append(
                ft.View(
                    "/about",
                    [
                        ft.AppBar(
                            title=ft.Text("About", expand=True),
                            bgcolor=ft.Colors.SURFACE_CONTAINER_HIGHEST,
                            leading=ft.Row(
                                controls=[
                                    ft.IconButton(ft.icons.MENU, on_click=open_drawer),
                                    ft.IconButton(ft.icons.ARROW_BACK, on_click=view_pop)  # Fix applied here
                                ],
                                spacing=0
                            ),
                            automatically_imply_leading=False
                        ),
                        ft.Text("Welcome to About Page"),
                        ft.ElevatedButton("Go Store", on_click=lambda _: page.go("/store")),
                    ],
                    drawer=drawer  # Add the drawer
                )
            )

        page.update()
        print("PAGE VIEWS: --- ", page.views)

def view_pop(view):
    print("BEFORE LEN ", len(page.views))
    page.views.pop()
    top_view = page.views[-1]
    page.go(top_view.route)
    print("AFTER LEN ", len(page.views))

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

ft.app(target=main)`

Metadata

Metadata

Assignees

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions