AppBar
Examples#
Actions and Popup Menu#
import flet as ft
def main(page: ft.Page):
page.title = "AppBar Example"
def handle_checked_item_click(e: ft.Event[ft.PopupMenuItem]):
e.control.checked = not e.control.checked
page.update()
page.appbar = ft.AppBar(
leading=ft.Icon(ft.Icons.PALETTE),
leading_width=40,
title=ft.Text("AppBar Example"),
center_title=False,
bgcolor=ft.Colors.BLUE_GREY_400,
actions=[
ft.IconButton(ft.Icons.WB_SUNNY_OUTLINED),
ft.IconButton(ft.Icons.FILTER_3),
ft.PopupMenuButton(
items=[
ft.PopupMenuItem(content="Item 1"),
ft.PopupMenuItem(), # divider
ft.PopupMenuItem(
content="Checked item",
checked=False,
on_click=handle_checked_item_click,
),
]
),
],
)
page.add(ft.Text("Body!"))
if __name__ == "__main__":
ft.run(main)
Theme and Material Mode Toggles#
import flet as ft
LIGHT_SEED_COLOR = ft.Colors.DEEP_ORANGE
DARK_SEED_COLOR = ft.Colors.DEEP_PURPLE
def main(page: ft.Page):
page.title = "AppBar Example"
def handle_checked_item_click(e: ft.Event[ft.PopupMenuItem]):
e.control.checked = not e.control.checked
page.update()
page.theme_mode = ft.ThemeMode.LIGHT
page.theme = ft.Theme(color_scheme_seed=LIGHT_SEED_COLOR, use_material3=False)
page.dark_theme = ft.Theme(color_scheme_seed=DARK_SEED_COLOR, use_material3=False)
page.update()
def toggle_theme_mode(e: ft.Event[ft.IconButton]):
page.theme_mode = (
ft.ThemeMode.DARK
if page.theme_mode == ft.ThemeMode.LIGHT
else ft.ThemeMode.LIGHT
)
theme_mode_toggle.icon = (
ft.Icons.WB_SUNNY_OUTLINED
if page.theme_mode == ft.ThemeMode.LIGHT
else ft.Icons.WB_SUNNY
)
page.update()
theme_mode_toggle = ft.IconButton(
icon=(
ft.Icons.WB_SUNNY_OUTLINED
if page.theme_mode == ft.ThemeMode.LIGHT
else ft.Icons.WB_SUNNY
),
on_click=toggle_theme_mode,
)
def toggle_material(e: ft.Event[ft.IconButton]):
use_material3 = not page.theme.use_material3
page.theme = ft.Theme(
color_scheme_seed=LIGHT_SEED_COLOR, use_material3=use_material3
)
page.dark_theme = ft.Theme(
color_scheme_seed=DARK_SEED_COLOR, use_material3=use_material3
)
material_mode_toggle.icon = (
ft.Icons.FILTER_3 if page.theme.use_material3 else ft.Icons.FILTER_2
)
page.update()
material_mode_toggle = ft.IconButton(
icon=ft.Icons.FILTER_3 if page.theme.use_material3 else ft.Icons.FILTER_2,
on_click=toggle_material,
)
page.padding = 50
page.appbar = ft.AppBar(
# toolbar_height=100,
bgcolor=ft.Colors.SECONDARY_CONTAINER,
leading=ft.Icon(ft.Icons.PALETTE),
leading_width=40,
title=ft.Text("AppBar Example"),
center_title=False,
actions=[
theme_mode_toggle,
material_mode_toggle,
ft.PopupMenuButton(
items=[
ft.PopupMenuItem(content="Item 1"),
ft.PopupMenuItem(icon=ft.Icons.POWER_INPUT, content="Check power"),
ft.PopupMenuItem(
on_click=lambda _: print(
"Button with a custom content clicked!"
),
content=ft.Row(
controls=[
ft.Icon(ft.Icons.HOURGLASS_TOP_OUTLINED),
ft.Text("Item with a custom content"),
]
),
),
ft.PopupMenuItem(), # divider
ft.PopupMenuItem(
content="Checked item",
checked=False,
on_click=handle_checked_item_click,
),
]
),
],
)
page.add(
ft.Text(
value="Flet is a framework that allows building web, desktop and mobile "
"applications in Python without prior experience in frontend development."
"You can build a UI for your program with Flet controls which are based "
"on Flutter by Google. Flet goes beyond merely wrapping Flutter widgets. "
"It adds its own touch by combining smaller widgets, simplifying "
"complexities, implementing UI best practices, and applying sensible "
"defaults. This ensures that your applications look stylish and polished "
"without requiring additional design efforts on your part.",
text_align=ft.TextAlign.END,
),
ft.Button("Click me!"),
)
ft.run(main)
Bases: AdaptiveControl
A material design app bar.
| RAISES | DESCRIPTION |
|---|---|
AssertionError
|
If |
AssertionError
|
If |
A list of Controls to display in a row after the title control.
Typically, these controls are IconButtons
representing common operations. For less common operations, consider using a
PopupMenuButton as the last
action.
Info
If AppBar.adaptive=True and this app is opened on an
iOS or macOS device, these actions will be automatically placed in a
Row.
This is because CupertinoAppBar.trailing
(which is the counterpart property of actions) takes only a single Control.
actions_padding: PaddingValue | None = None
The padding between the actions
and the end of this app bar.
adaptive: bool | None = None
Enables platform-specific rendering or inheritance of adaptiveness from parent controls.
bgcolor: ColorValue | None = None
The fill color to use for this app bar.
Default color is defined by AppBarTheme.bgcolor
center_title: bool | None = None
Whether the title should be centered.
Default value is defined by AppBarTheme.center_title
clip_behavior: ClipBehavior | None = None
The content will be clipped (or not) according to this option.
col: ResponsiveNumber = 12
If a parent of this control is a ResponsiveRow,
this property is used to determine
how many virtual columns of a screen this control will span.
Can be a number or a dictionary configured to have a different value for specific
breakpoints, for example col={"sm": 6}.
This control spans the 12 virtual columns by default.
Dimensions
| Breakpoint | Dimension |
|---|---|
| xs | <576px |
| sm | ≥576px |
| md | ≥768px |
| lg | ≥992px |
| xl | ≥1200px |
| xxl | ≥1400px |
color: ColorValue | None = None
The default color for Text
and Icon controls within this app bar.
Default color is defined by AppBarTheme.color
disabled: bool = False
Every control has disabled property which is False by default - control and all
its children are enabled.
Note
The value of this property will be propagated down to all children controls recursively.
elevation: Number | None = None
The app bar's elevation.
Note
This effect is only visible when using the Material 2 design
(when Theme.use_material3 = False).
elevation_on_scroll: Number | None = None
The elevation to be used if this app bar has something scrolled underneath it.
expand_loose: bool = False
Allows the control to expand along the main axis if space is available, but does not require it to fill all available space.
More information here.
leading: Control | None = None
A control to display before the toolbar's title.
Typically an Icon or IconButton control.
opacity: Number = 1.0
Defines the transparency of the control.
Value ranges from 0.0 (completely transparent) to 1.0 (completely opaque
without any transparency).
parent: BaseControl | None
The direct ancestor(parent) of this control.
It defaults to None and will only have a value when this control is mounted
(added to the page tree).
The Page control (which is the root of the tree) is an exception - it always
has parent=None.
secondary: bool = False
Whether this app bar is not being displayed at the top of the screen.
shadow_color: ColorValue | None = None
The color of the shadow below this app bar.
A shadow is only visible and displayed if the elevation
is greater than zero.
shape: OutlinedBorder | None = None
The shape of this app bar's Material as well as its shadow.
title: StrOrControl | None = None
The primary Control displayed in this app bar.
Typically a Text
control that contains a description of the current contents of this app.
Note
If AppBar.adaptive=True and this app is opened on
an iOS or macOS device, this title control will be
automatically centered, independent of the value of
center_title.
toolbar_height: Number | None = None
Defines the height of the toolbar component of this app bar.
toolbar_opacity: Number = 1.0
The opacity of the toolbar.
Note
Must be in the range 0.0 (transparent) to 1.0 (fully opaque).
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
visible: bool = True
Every control has visible property which is True by default - control is
rendered on the page. Setting visible to False completely prevents control (and
all its children if any) from rendering on a page canvas. Hidden controls cannot be
focused or selected with a keyboard or mouse and they do not emit any events.
Called once during control initialization to define its child controls. self.page is available in this method.