Skip to main content

CupertinoNavigationBar

An iOS-styled bottom navigation tab bar.

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

Inherits: LayoutControl

Properties

Events

  • on_change - Called when selected destination changed.

Examples​

Live example

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!"),
        )
    )


if __name__ == "__main__":
    ft.run(main)
basic

Wired navigation bar​

import flet as ft


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

    body_text = ft.Text("Explore!")

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

    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(
        ft.SafeArea(
            content=body_text,
        )
    )


if __name__ == "__main__":
    ft.run(main)

Properties​

active_colorclass-attributeinstance-attribute​

active_color: Optional[ColorValue] = None

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

bgcolorclass-attributeinstance-attribute​

bgcolor: Optional[ColorValue] = None

The color of the navigation bar itself.

borderclass-attributeinstance-attribute​

border: Optional[Border] = None

Defines the border of this navigation bar.

destinationsinstance-attribute​

destinations: Annotated[list[NavigationBarDestination], V.visible_controls(min_count=2)]

The destinations of this navigation bar.

Raises:

  • ValueError - If it does not contain at least two visible NavigationBarDestinations.

icon_sizeclass-attributeinstance-attribute​

icon_size: Number = 30

The size of all destination icons.

inactive_colorclass-attributeinstance-attribute​

inactive_color: ColorValue = CupertinoColors.INACTIVE_GRAY

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

selected_indexclass-attributeinstance-attribute​

selected_index: int = 0

The index into destinations for the currently selected NavigationBarDestination.

Raises:

  • IndexError - If it is not greater than or equal to 0.
  • IndexError - If it is not less than the length of visible destinations.

Events​

on_changeclass-attributeinstance-attribute​

on_change: Optional[ControlEventHandler[CupertinoNavigationBar]] = None

Called when selected destination changed.