BottomAppBar

A material design bottom app bar.

ft.BottomAppBar(
    bgcolor=ft.Colors.SURFACE_CONTAINER_LOW,
    content=ft.Row(
        alignment=ft.MainAxisAlignment.SPACE_AROUND,
        controls=[
            ft.IconButton(ft.Icons.MENU),
            ft.IconButton(ft.Icons.SEARCH),
            ft.IconButton(ft.Icons.SETTINGS),
        ],
    ),
)

Basic BottomAppBar

Inherits: LayoutControl

Properties

• bgcolor(ColorValue | None) –

  The fill color to use for this app bar.

• border_radius(BorderRadiusValue | None) –

  The border radius to apply when clipping and painting this app bar.

• clip_behavior(ClipBehavior | None) –

  Defines how the content of this app bar should be clipped.

• content(Control | None) –

  The content of this bottom app bar.

• elevation(Number | None) –

  The z-coordinate at which to place this bottom app bar relative to its

• notch_margin(Number) –

  The margin between the FloatingActionButton and this

• padding(PaddingValue | None) –

  Empty space to inscribe inside a container decoration (background, border).

• shadow_color(ColorValue | None) –

  The color of the shadow below this app bar.

• shape(NotchShape | None) –

  The notch that is made for the floating action button.

Examples

Live example

Notched FloatingActionButton

import flet as ft


def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.floating_action_button = ft.FloatingActionButton(
        icon=ft.Icons.ADD,
        shape=ft.CircleBorder(),
    )
    page.floating_action_button_location = ft.FloatingActionButtonLocation.CENTER_DOCKED

    page.appbar = ft.AppBar(
        title=ft.Text("Bottom AppBar Demo"),
        center_title=True,
        bgcolor=ft.Colors.GREEN_300,
        automatically_imply_leading=False,
    )
    page.bottom_appbar = ft.BottomAppBar(
        bgcolor=ft.Colors.BLUE,
        shape=ft.CircularRectangleNotchShape(),
        content=ft.Row(
            controls=[
                ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE),
                ft.Container(expand=True),
                ft.IconButton(icon=ft.Icons.SEARCH, icon_color=ft.Colors.WHITE),
                ft.IconButton(icon=ft.Icons.FAVORITE, icon_color=ft.Colors.WHITE),
            ]
        ),
    )

    page.add(ft.Text("Body!"))


ft.run(main)

Custom border radius

import flet as ft


def main(page: ft.Page):
    page.vertical_alignment = ft.MainAxisAlignment.CENTER
    page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

    page.bottom_appbar = ft.BottomAppBar(
        border_radius=ft.BorderRadius.all(20),
        bgcolor=ft.Colors.BLUE,
        content=ft.Row(
            controls=[
                ft.IconButton(icon=ft.Icons.MENU, icon_color=ft.Colors.WHITE),
                ft.Container(expand=True),
                ft.IconButton(icon=ft.Icons.SEARCH, icon_color=ft.Colors.WHITE),
                ft.IconButton(icon=ft.Icons.FAVORITE, icon_color=ft.Colors.WHITE),
            ]
        ),
    )

    page.add(ft.Text("Content goes here..."))


ft.run(main)

Properties

bgcolor

bgcolor: ColorValue | None = None

The fill color to use for this app bar.

If None, BottomAppBarTheme.bgcolor is used; if that is also None, then defaults to ColorScheme.surface.

border_radius

border_radius: BorderRadiusValue | None = None

The border radius to apply when clipping and painting this app bar.

clip_behavior

clip_behavior: ClipBehavior | None = None

Defines how the content of this app bar should be clipped.

If None, defaults to: - ClipBehavior.ANTI_ALIAS if border_radius is set and not equal to BorderRadius.all(0); - Else ClipBehavior.NONE.

content

content: Control | None = None

The content of this bottom app bar.

elevation

elevation: Number | None = None

The z-coordinate at which to place this bottom app bar relative to its parent. It controls the size of the shadow below this app bar.

If None, BottomAppBarTheme.elevation is used; if that is also None, then defaults to 3.

Raises:

• ValueError –

  If it is less than 0.

notch_margin

notch_margin: Number = 4.0

The margin between the FloatingActionButton and this app bar's notch.

Note

Has effect only if shape is not None.

padding

padding: PaddingValue | None = None

Empty space to inscribe inside a container decoration (background, border).

If None, BottomAppBarTheme.padding is used; if that is also None, then defaults to Padding.symmetric(vertical=12.0, horizontal=16.0).

shadow_color

shadow_color: ColorValue | None = None

The color of the shadow below this app bar.

If None, BottomAppBarTheme.shadow_color is used; if that is also None, then defaults to Colors.TRANSPARENT.

shape

shape: NotchShape | None = None

The notch that is made for the floating action button.

If None, BottomAppBarTheme.shape is used; if that is also None, then the shape will be rectangular with no notch.