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!"))
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.ElevatedButton("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
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).
The page (of type Page or PageView) to which this control belongs to.
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.
surface_tint_color: ColorValue | None = None
The color of the surface tint overlay applied to this app bar's bgcolor to
indicate elevation.
By default, no overlay will be applied.
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.