Skip to main content

BottomAppBar

A material design bottom app bar.

Examples​

Live example

BottomAppBar​

import flet as ft


def main(page: ft.Page):
    page.horizontal_alignment = page.vertical_alignment = "center"

    page.floating_action_button = ft.FloatingActionButton(icon=ft.icons.ADD)
    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.NotchShape.CIRCULAR,
        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.app(target=main)

Properties​

bgcolor​

The fill color to use for the BottomAppBar. Default color is defined by current theme.

clip_behavior​

The content will be clipped (or not) according to this option.

Property value is ClipBehavior enum with supported values:

  • NONE
  • ANTI_ALIAS
  • ANTI_ALIAS_WITH_SAVE_LAYER
  • HARD_EDGE

Default is NONE.

content​

A child Control contained by the BottomAppBar.

elevation​

This property controls the size of the shadow below the BottomAppBar. Default value is 4.

height​

The height of the BottomAppBar. Defaults to 80.0 when in material 3.

notch_margin​

The margin between the FloatingActionButton and the BottomAppBar's notch.

Will not be visible if the shape is not None.

padding​

Empty space to inscribe inside a container decoration (background, border). See Container.padding property for more information and possible values.

Defaults to padding.symmetric(vertical=12.0, horizontal=16.0).

shadow_color​

The color of the shadow below the BottomAppBar.

shape​

The notch that is made for the floating action button. The value is NotchShape enum:

  • CIRCULAR
  • AUTO

surface_tint_color​

The color used as an overlay on bgcolor to indicate elevation.

If this is None, no overlay will be applied. Otherwise this color will be composited on top of bgcolor with an opacity related to elevation and used to paint the BottomAppBar's background.

The default is None.