[Q] Use navbar to serve routes?

[goyalyashpal]

Question

How can i use the NavigationBar to return route when a different destination is picked?

• I was using the navigation bar not as a tab bar - but as routes bar - i.e. hosting different views where to go next.
• But all the examples available in the wild show it only used as tab bar - i.e. clearing current view then adding new controls to it.

I want to return new views on click of any button on navigation bar - in the same way as explained for the routes here

Code used is almost same as discussion #1678
Took from: https://github.com/codeWithOrange/fletfullcourse-2022/tree/master/22.bottomNavigationBar/

Code sample

# Code modified from https://github.com/codeWithOrange/fletfullcourse-2022/tree/master/22.bottomNavigationBar
from flet import (
    Column,
    Container,
    Icon,
    NavigationBar,
    NavigationBarLabelBehavior,
    NavigationDestination,
    Page,
    Text,
    UserControl,
    colors,
    icons,
)


class HomePage(UserControl):
    def build(self):
        return Column(controls=[Text("home page")])


class AboutPage(UserControl):
    def build(self):
        return Column(
            controls=[
                Text("About page"),
                Icon(name=icons.PERSON, color=colors.GREEN, size=30),
            ]
        )


class PageNotFound(UserControl):
    def __init__(self, title: str):
        super().__init__()
        self.title = title

    def build(self):
        return Container(content=Text(self.title))


def main(page: Page):
    page.title = "bottom navigation bar tutorial"
    # page.padding=0
    # page.theme_mode='light'
    page.window_width, page.window_height = (45 * i for i in (9, 16))
    page.window_resizable = False

    page.navigation_bar = NavigationBar(
        # bgcolor=colors.ON_SECONDARY,
        # elevation=30,
        label_behavior=NavigationBarLabelBehavior.ONLY_SHOW_SELECTED,
        destinations=[
            NavigationDestination(
                label="Home",
                icon=icons.HOME_OUTLINED,
                selected_icon=icons.HOME_FILLED,
                # icon_content=Icon(name=icons.HOME, color=colors.GREEN),
                # selected_icon_content=Icon(name=icons.HOME_FILLED, color=colors.BLUE)
            ),
            NavigationDestination(
                label="About",
                icon=icons.PERSON_OUTLINE,
                selected_icon=icons.PERSON
                # icon_content=Icon(name=icons.HOME, color=colors.GREEN),
            ),
        ],
        # selected_index=1
        on_change=lambda e: set_page(e),
    )

    def set_page(e):
        page.clean()
        page_index = e.control.selected_index
        page_label = e.control.destinations[page_index].label

        # HERE IS THE PROBLEM
        # HACK: this should not done here.
        if page_label == "Home":
            # page.bgcolor = colors.BLUE
            page.add(HomePage())
        elif page_label == "About":
            page.bgcolor = colors.RED
            page.add(AboutPage())

    # page.bgcolor='blue'
    page.add(HomePage())

    page.update()


if __name__ == "__main__":
    flet.app(target=main, view=flet.FletApp)

Error message

No response

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

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

[FeodorFitsner]

Make a List of tuples (NavigationDestination, str) where str is a route. Find a tuple by selected index.