Banner
Examples#
Basic example#
import flet as ft
def main(page: ft.Page):
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
def handle_banner_close(e: ft.Event[ft.TextButton]):
page.pop_dialog()
page.add(ft.Text("Action clicked: " + e.control.content))
action_button_style = ft.ButtonStyle(color=ft.Colors.BLUE)
banner = ft.Banner(
bgcolor=ft.Colors.AMBER_100,
leading=ft.Icon(ft.Icons.WARNING_AMBER_ROUNDED, color=ft.Colors.AMBER, size=40),
content=ft.Text(
value="Oops, there were some errors while trying to delete the file. What would you like to do?",
color=ft.Colors.BLACK,
),
actions=[
ft.TextButton(
content="Retry",
style=action_button_style,
on_click=handle_banner_close,
),
ft.TextButton(
content="Ignore",
style=action_button_style,
on_click=handle_banner_close,
),
ft.TextButton(
content="Cancel",
style=action_button_style,
on_click=handle_banner_close,
),
],
)
page.add(
ft.ElevatedButton("Show Banner", on_click=lambda e: page.show_dialog(banner))
)
ft.run(main)
Bases: DialogControl
A banner displays an important, succinct message, and provides actions for users to address (or dismiss the banner). A user action is required for it to be dismissed.
Banners are displayed at the top of the screen, below a top app bar. They are persistent and non-modal, allowing the user to either ignore them or interact with them at any time.
| RAISES | DESCRIPTION |
|---|---|
AssertionError
|
if |
AssertionError
|
if |
AssertionError
|
if |
The set of actions that are displayed at the bottom or trailing side of this banner.
Typically this is a list of TextButton
controls.
adaptive: bool | None = None
Enables platform-specific rendering or inheritance of adaptiveness from parent controls.
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 |
content_padding: PaddingValue | None = None
The amount of space by which to inset the content.
If the actions are below the content, this defaults to
Padding.only(left=16.0, top=24.0, right=16.0, bottom=4.0).
If the actions are trailing the content, this defaults to
Padding.only(left=16.0, top=2.0).
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.
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: IconValueOrControl | None = None
The leading Control of this banner.
Typically an Icon control.
leading_padding: PaddingValue | None = None
The amount of space by which to inset the leading control.
Defaults to BannerTheme.leading_padding, or if that is None,
falls back to Padding.only(end=16).
min_action_bar_height: Number = 52.0
The optional minimum action bar height.
on_dismiss: ControlEventHandler[DialogControl] | None = None
Called when dialog is dismissed.
on_visible: ControlEventHandler[Banner] | None = None
Called when this banner is shown or made visible for the first time.
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.
surface_tint_color: ColorValue | None = None
The color used as an overlay on bgcolor
to indicate elevation.
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.