How to use NavigationBar to change pages?

[Dekubaka]

Can I get an example of how to use the navigation bar code from the documentation to switch between different pages? I'm unsure how you define where each of the button presses go to. I read the Navigation and routing doc but still don't know how it would apply here.

import flet as ft

def main(page: ft.Page):

    page.title = "NavigationBar Example"
    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(icon=ft.icons.EXPLORE, label="Explore"),
            ft.NavigationDestination(icon=ft.icons.COMMUTE, label="Commute"),
            ft.NavigationDestination(
                icon=ft.icons.BOOKMARK_BORDER,
                selected_icon=ft.icons.BOOKMARK,
                label="Explore",
            ),
        ]
    )
    page.add(ft.Text("Body!"))

ft.app(target=main)

Update

So I had initially put how to "change views" but I'm not sure if that is right because that would just clear the screen. Still don't think "pages" is technically correct either. I just want to the switch content in between.

I'm learning Flet by cloning apps I use, so I am trying to clone the headspace app. I was able to work it out but please let me know if this is a good way to go about it.

Still not sure how to make it so that the navbar starts with the content index 0 though. I can use selected_index=0 but that is just the visual selection on the bar itself.

import flet as ft

def main(page: ft.Page):
    page.title = "Headspace Clone"

    def change_content(e):
        page.controls.clear()
        nav_dest = e.control.selected_index

        if nav_dest == 0:
            nav_content = ft.Container(
                content=ft.Text(value="Today")
                )
            page.add(nav_content)
        
        if nav_dest == 1:
            nav_content = ft.Container(
                content=ft.Text(value="Explore")
                )
            page.add(nav_content)
        
        if nav_dest == 2:
            nav_content = ft.Container(
                content=ft.Text(value="You")
                )
            page.add(nav_content)
        

    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(icon=ft.icons.LANDSCAPE_OUTLINED, selected_icon=ft.icons.LANDSCAPE, label="Today"),
            ft.NavigationDestination(icon=ft.icons.SEARCH, label="Explore"),
            ft.NavigationDestination(icon=ft.icons.PERSON_OUTLINED, selected_icon=ft.icons.PERSON, label="You")
        ],
        on_change=change_content
    )

    page.update()

ft.app(target=main)

[thetrotfreak]

@Dekubaka could you elaborate a little more on what you're trying to do?

[Dekubaka]

Okay, so basically I want learn how to recreate this UI in Flet.l below.

I used the navbar for the bottom, but my problem was I didn't know how to switch the actual page content when clicking on the other navbar options.

So now my problem is that I don't know how to make it default to the first navbar option when you open the app.

[Dekubaka]

One moment to read your other reply

[thetrotfreak]

Correct me if I'm wrong, you want the navigation_bar to render the Control that corresponds to the selected_index instead of merely highlighting the selected_index?

If that's the case, how about you invoke a synthetic event, meaning, programmatically call it's on_change event handler?

Here's the code:

import flet as ft


def main(page: ft.Page):
    page.title = "Headspace clone"

    def change_content(e):
        page.controls.clear()
        nav_dest = e.control.selected_index

        if nav_dest == 0:
            nav_content = ft.Container(
                content=ft.Text(value="Today")
            )
            page.add(nav_content)

        if nav_dest == 1:
            nav_content = ft.Container(
                content=ft.Text(value="Explore")
            )
            page.add(nav_content)

        if nav_dest == 2:
            nav_content = ft.Container(
                content=ft.Text(value="You")
            )
            page.add(nav_content)

    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(
                icon=ft.icons.LANDSCAPE_OUTLINED,
                selected_icon=ft.icons.LANDSCAPE,
                label="Today"
            ),
            ft.NavigationDestination(
                icon=ft.icons.SEARCH,
                label="Explore"
            ),
            ft.NavigationDestination(
                icon=ft.icons.PERSON_OUTLINED,
                selected_icon=ft.icons.PERSON,
                label="You"
            )
        ],
        on_change=change_content,
        selected_index=0
    )

    # a control's did_mount() is invoked right after it has been mounted
    page.navigation_bar.did_mount = lambda: synthetic_event(
        page=page, control=page.navigation_bar
    )

    # call the did_mount() once manually if you mess up the order of page.update()
    # page.navigation_bar.did_mount()
    page.update()


def synthetic_event(page: ft.Page, control: ft.NavigationBar):
    """
    Calls the control's event handler
    """
    control.on_change(
        ft.ControlEvent(
            target=control.uid,
            name="change",
            data=str(control.selected_index),
            control=control,
            page=page
        )
    )


ft.app(target=main)

[thetrotfreak]

@Dekubaka , you can try changing the selected_index when adding the NavigationBar, it fires the synthetic event accordingly, allowing it to load the control too instead of only highlighting the navigation index.

[Dekubaka]

Yes, this is what I was trying to do! But gonna be honest, I didn't fully understand what you did. Gonna keep going through the docs. I like your method better since it's only being checked once, but here is what I did:

import flet as ft

def main(page: ft.Page):
    page.title = "Headspace clone"

    def change_content(e):
        page.controls.clear()

        if e == "default":
            nav_dest = 0
        else:
            nav_dest = e.control.selected_index

        if nav_dest == 0:
            nav_content = ft.Container(
                content=ft.Text(value="Today")
            )
            page.add(nav_content)

        if nav_dest == 1:
            nav_content = ft.Container(
                content=ft.Text(value="Explore")
            )
            page.add(nav_content)

        if nav_dest == 2:
            nav_content = ft.Container(
                content=ft.Text(value="You")
            )
            page.add(nav_content)

    page.navigation_bar = ft.NavigationBar(
        destinations=[
            ft.NavigationDestination(
                icon=ft.icons.LANDSCAPE_OUTLINED,
                selected_icon=ft.icons.LANDSCAPE,
                label="Today"
            ),
            ft.NavigationDestination(
                icon=ft.icons.SEARCH,
                label="Explore"
            ),
            ft.NavigationDestination(
                icon=ft.icons.PERSON_OUTLINED,
                selected_icon=ft.icons.PERSON,
                label="You"
            )
        ],
        on_change=change_content,
        selected_index=0
    )

    page.navigation_bar.did_mount = page.navigation_bar.on_change("default")

    page.update()

From your code, I understand did_mount is triggering the synthetic_event and passing the page and navbar controls to it", but what is the lambda: for? (I don't really use lambda).

And I was unaware of ft.ControlEvent and it's options. Could you point where that is in the documentation?

[thetrotfreak]

The ingenuity of your code keeps it simpler to understand. It's great.

Why a lambda?

• I used a lambda function because otherwise, the function call on the RHS would be evaluated because of the immediately following pair of brackets () and not because did_mount() is called automatically by flet.

    page.navigation_bar.did_mount = lambda: synthetic_event(
        page=page,
        control=page.navigation_bar
    )

• This means that, in your case, the function page.navigation_bar.on_change("default") is evaluated and then did_mount() is called too.

page.navigation_bar.did_mount = page.navigation_bar.on_change("default")

• Whereas, in my case, using the lambda called only did_mount() as flet should do.

About flet.ControlEvent

Just landed on them while browsing the source code. Python's standard functions like type(), dirs(), print() helped me. Rest is history.

But as I said, yours might be easier to understand and grasp. I went a little overboard with my approach.

[Dekubaka]

Oh wow! Still, that helped me out a ton. Thank you!