Routing and navigation bar icon selected inconsistency

[fsmosca]

I am trying to use routing in the navigation bar.

import flet as ft


def main(page: ft.Page):
    page.title = "NavBar and Routes Example"
    page.window_width = 400

    def set_page(e):
        ind = e.control.selected_index
        if ind == 0:
            page.go("/")
        elif ind == 1:
            page.go("/store")

    appbar = ft.AppBar(
        title=ft.Text("App Name"),
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.WB_SUNNY_OUTLINED),
            ft.IconButton(ft.icons.FILTER_3),
            ft.PopupMenuButton(
                items=[
                    ft.PopupMenuItem(text="Item 1"),
                ]
            ),
        ]
    )

    navbar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(
                icon=ft.icons.ADD_HOME_OUTLINED,
                selected_icon=ft.icons.ADD_HOME,
                label="Home"),
            ft.NavigationDestination(
                icon=ft.icons.LOCAL_GROCERY_STORE_OUTLINED,
                selected_icon=ft.icons.LOCAL_GROCERY_STORE,
                label="Store"),
        ],
        on_change=lambda e: set_page(e)
    )

    def route_change(route):
        page.views.clear()
        page.views.append(
            ft.View(
                route="/",
                appbar=appbar,
                navigation_bar=navbar,
                controls=[
                    ft.Markdown('**Home**'),
                ],
            )
        )
        if page.route == "/store":
            page.views.append(
                ft.View(
                    route="/store",
                    appbar=appbar,
                    navigation_bar=navbar,
                    controls=[
                        ft.Markdown('**Store**'),
                    ],
                )
            )
        page.update()

    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
    page.go(page.route)


ft.app(target=main)

Image 1

Now let's select Store see image 2 below.

Image 2

So far so good.

Now press the back button, result is in image 3

Image 3

How to make the selection be in the Home navbar item after pressing the back button?

What I am trying to achieve is to have the navbar items be the root page. And from each root page, will create new routes.
Example

Navbar items:

Home
Store
  Store/ABC
  Store/DEF
    Store/DEF/111
    Store/DEF/222
Others

Where:
ABC and DEF could be the sub-navbar for the Store parent navbar item.

I can do this but the issue is the back button in the route page.

When you are in Store/DEF/111 and you press the back button, you will end up in Home. It should be in Store/DEF. However I can make a dedicated back button to navigate to specific page.

ft.ElevatedButton("Back", on_click=lambda _: page.go("/store/def"))

But the user can access the back button in the appbar. One way to solve the back button in the appbar is to remove the appbar. I don't want that. I need the appbar for other items.

The layout and functionality that I want to achieve is something similar to the lichess app beta. Its back button is working well.

References

navigation-and-routing
navigation-bar

[fsmosca]

This is the best that I have so far.

import flet as ft


def main(page: ft.Page):
    page.title = "NavBar and Routes Example"
    page.window.width = 400

    def set_page(e):
        ind = e.control.selected_index
        if ind == 0:
            page.go("/")
        elif ind == 1:
            page.go("/store")
        elif ind == 2:
            page.go("/warehouse")

    appbar = ft.AppBar(
        title=ft.Text("App Name"),
        bgcolor=ft.colors.SURFACE_VARIANT,
        actions=[
            ft.IconButton(ft.icons.WB_SUNNY_OUTLINED),
            ft.IconButton(ft.icons.FILTER_3),
            ft.PopupMenuButton(
                items=[
                    ft.PopupMenuItem(text="Item 1"),
                ]
            ),
        ]
    )

    navbar = ft.NavigationBar(
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.icons.ADD_HOME_OUTLINED,
                selected_icon=ft.icons.ADD_HOME,
                label="Home"),
            ft.NavigationBarDestination(
                icon=ft.icons.LOCAL_GROCERY_STORE_OUTLINED,
                selected_icon=ft.icons.LOCAL_GROCERY_STORE,
                label="Stores"),
            ft.NavigationBarDestination(
                icon=ft.icons.BEACH_ACCESS_OUTLINED,
                selected_icon=ft.icons.BEACH_ACCESS,
                label="Warehouse"),
        ],
        on_change=lambda e: set_page(e)
    )

    def route_change(route):
        page.views.clear()
        page.views.append(
            ft.View(
                route="/",
                appbar=appbar,
                navigation_bar=navbar,
                controls=[
                    ft.Markdown('**Home**'),
                    ft.Text('Welcome!!'),
                ],
            )
        )
        if page.route == "/warehouse":
            page.views.append(
                ft.View(
                    route="/warehouse",
                    navigation_bar=navbar,
                    controls=[
                        ft.Markdown('**Warehouse**'),
                        ft.Row(controls=[                            
                            ft.TextButton("Japan", on_click=lambda _: page.go("/warehouse/japan")),
                            ft.TextButton("China", on_click=lambda _: page.go("/warehouse/china")),
                        ]),
                    ],
                )
            )
        if page.route == "/store":
            page.views.append(
                ft.View(
                    route="/store",
                    navigation_bar=navbar,
                    controls=[
                        ft.Markdown('**Stores**'),
                        ft.Row(controls=[                            
                            ft.TextButton("Nike", on_click=lambda _: page.go("/store/nike")),
                            ft.TextButton("Adidas", on_click=lambda _: page.go("/store/adidas")),
                        ]),
                    ],
                )
            )
        if page.route == "/store/nike":
            page.views.append(
                ft.View(
                    route="/store/nike",
                    controls=[
                        ft.Markdown('**Nike**'),
                        ft.IconButton(icon=ft.icons.BACKSPACE, on_click=lambda _: page.go("/store")),                        
                    ],
                )
            )
        if page.route == "/store/adidas":
            page.views.append(
                ft.View(
                    route="/store/adidas",
                    controls=[
                        ft.Markdown('**Adidas**'),
                        ft.IconButton(icon=ft.icons.BACKSPACE, on_click=lambda _: page.go("/store")),                        
                    ],
                )
            )
        if page.route == "/warehouse/japan":
            page.views.append(
                ft.View(
                    route="/warehouse/japan",
                    controls=[
                        ft.Markdown('**Japan**'),
                        ft.IconButton(icon=ft.icons.BACKSPACE, on_click=lambda _: page.go("/warehouse")),                        
                    ],
                )
            )
        if page.route == "/warehouse/china":
            page.views.append(
                ft.View(
                    route="/warehouse/china",
                    controls=[
                        ft.Markdown('**China**'),
                        ft.IconButton(icon=ft.icons.BACKSPACE, on_click=lambda _: page.go("/warehouse")),
                    ],
                )
            )
        page.update()

    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
    page.go(page.route)


ft.app(target=main)

Image 1

Image 2

Image 3