CupertinoNavigationBar

Examples#

Basic Example#

import flet as ft


def main(page: ft.Page):
    page.title = "CupertinoNavigationBar Example"

    page.navigation_bar = ft.CupertinoNavigationBar(
        bgcolor=ft.Colors.AMBER_100,
        inactive_color=ft.Colors.GREY,
        active_color=ft.Colors.BLACK,
        on_change=lambda e: print("Selected tab:", e.control.selected_index),
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.Icons.EXPLORE_OUTLINED,
                selected_icon=ft.Icons.EXPLORE,
                label="Explore",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icons.COMMUTE_OUTLINED,
                selected_icon=ft.Icons.COMMUTE,
                label="Commute",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icons.BOOKMARK_BORDER,
                selected_icon=ft.Icons.BOOKMARK,
                label="Favorites",
            ),
        ],
    )

    page.add(ft.SafeArea(content=ft.Text("Body!")))


ft.run(main)

import flet as ft


def main(page: ft.Page):
    page.title = "CupertinoNavigationBar Example"

    def handle_nav_destination_change(e: ft.Event[ft.CupertinoNavigationBar]):
        if e.control.selected_index == 0:
            body.content.value = "Explore!"
        elif e.control.selected_index == 1:
            body.content.value = "Find Your Way!"
        else:
            body.content.value = "Your Favorites!"
        page.update()

    page.navigation_bar = ft.CupertinoNavigationBar(
        bgcolor=ft.Colors.AMBER_100,
        inactive_color=ft.Colors.GREY,
        active_color=ft.Colors.BLACK,
        on_change=handle_nav_destination_change,
        destinations=[
            ft.NavigationBarDestination(
                icon=ft.Icons.EXPLORE_OUTLINED,
                selected_icon=ft.Icons.EXPLORE,
                label="Explore",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icons.COMMUTE_OUTLINED,
                selected_icon=ft.Icons.COMMUTE,
                label="Commute",
            ),
            ft.NavigationBarDestination(
                icon=ft.Icons.BOOKMARK_BORDER,
                selected_icon=ft.Icons.BOOKMARK,
                label="Favorites",
            ),
        ],
    )

    page.add(
        body := ft.SafeArea(content=ft.Text("Explore!")),
    )


ft.run(main)

CupertinoNavigationBar #

Bases: LayoutControl

An iOS-styled bottom navigation tab bar.

Navigation bars offer a persistent and convenient way to switch between primary destinations in an app.

RAISES	DESCRIPTION
`AssertionError`	If `destinations` does not contain at least two visible `NavigationBarDestination`s.
`IndexError`	If `selected_index` is out of range.

active_color #

active_color: ColorValue | None = None

The foreground color of the icon and title of the selected destination.

bgcolor #

bgcolor: ColorValue | None = None

The color of the navigation bar itself.

border #

border: Border | None = None

Defines the border of this navigation bar.

destinations #

destinations: list[NavigationBarDestination]

The destinations of this navigation bar.

Note

Must be a list of two or more NavigationBarDestinations.

icon_size #

icon_size: Number = 30

The size of all destination icons.

inactive_color #

inactive_color: ColorValue = INACTIVE_GRAY

The foreground color of the icon and title of the unselected destinations.

on_change #

on_change: (
    ControlEventHandler[CupertinoNavigationBar] | None
) = None

Called when selected destination changed.

selected_index #

selected_index: int = 0

The index into destinations for the currently selected NavigationBarDestination.