BottomSheet
Examples#
Basic example#
import flet as ft
def main(page: ft.Page):
page.title = "BottomSheet Example"
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER
def handle_sheet_dismissal(e: ft.Event[ft.BottomSheet]):
page.add(ft.Text("Bottom sheet dismissed"))
sheet = ft.BottomSheet(
on_dismiss=handle_sheet_dismissal,
content=ft.Container(
padding=50,
content=ft.Column(
horizontal_alignment=ft.CrossAxisAlignment.CENTER,
tight=True,
controls=[
ft.Text("Here is a bottom sheet!"),
ft.ElevatedButton("Dismiss", on_click=lambda _: page.pop_dialog()),
],
),
),
)
page.overlay.append(sheet)
page.add(
ft.ElevatedButton(
content="Display bottom sheet",
on_click=lambda e: page.show_dialog(sheet),
)
)
ft.run(main)
Bases: DialogControl
Displays a modal bottom sheet.
A bottom sheet is an alternative to a menu or dialog and prevents the user from interacting with the rest of the app.
| RAISES | DESCRIPTION |
|---|---|
AssertionError
|
If |
adaptive: bool | None = None
Enables platform-specific rendering or inheritance of adaptiveness from parent controls.
barrier_color: ColorValue | None = None
The color of the scrim that obscures content behind this bottom sheet.
clip_behavior: ClipBehavior | None = None
Defines how the content of the bottom sheet should be clipped.
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 |
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.
dismissible: bool = True
Specifies whether the bottom sheet will be dismissed when user taps on the scrim.
enable_drag: bool = False
Specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards.
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.
maintain_bottom_view_insets_padding: bool = True
Adds a padding at the bottom to avoid obstructing bottom sheet content with on-screen keyboard or other system elements.
on_dismiss: ControlEventHandler[DialogControl] | None = None
Called when dialog is dismissed.
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.
scroll_controlled: bool = False
Specifies if the bottom sheet contains scrollable content, such as ListView or GridView.
show_drag_handle: bool = False
Whether to display drag handle at the top of sheet or not.
size_constraints: BoxConstraints | None = None
The size constraints to apply to the bottom sheet.
tooltip: TooltipValue | None = None
The tooltip ot show when this control is hovered over.
use_safe_area: bool = True
Specifies whether the sheet will avoid system intrusions on the top, left, and right.
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.