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.