Skip to main content

BottomSheet

Shows a modal Material Design bottom sheet.

A modal bottom sheet is an alternative to a menu or a dialog and prevents the user from interacting with the rest of the app.

To open this control, simply call the page.open() helper-method.

Examples​

Live example

Simple BottomSheet​

import flet as ft


def main(page: ft.Page):
page.horizontal_alignment = ft.CrossAxisAlignment.CENTER

def handle_dismissal(e):
page.add(ft.Text("Bottom sheet dismissed"))
bs = ft.BottomSheet(
on_dismiss=handle_dismissal,
content=ft.Container(
padding=50,
content=ft.Column(
tight=True,
controls=[
ft.Text("This is bottom sheet's content!"),
ft.ElevatedButton("Close bottom sheet", on_click=lambda _: page.close(bs)),
],
),
),
)
page.add(ft.ElevatedButton("Display bottom sheet", on_click=lambda _: page.open(bs)))


ft.app(main)

Properties​

bgcolor​

The sheet's background color.

content​

The content Control of the bottom sheet.

dismissible​

Specifies whether the bottom sheet will be dismissed when user taps on the scrim.

enable_drag​

Specifies whether the bottom sheet can be dragged up and down and dismissed by swiping downwards.

elevation​

Controls the size of the shadow below the BottomSheet.

Defaults to 0.0.

is_scroll_controlled​

Specifies if the bottom sheet contains scrollable content, such as ListView or GridView.

Defaults to False.

maintain_bottom_view_insets_padding​

Adds a padding at the bottom to avoid obstructing bottom sheet content with on-screen keyboard or other system elements.

open​

Set to True to display a bottom sheet.

Defaults to False.

show_drag_handle​

Whether to display drag handle at the top of sheet or not.

use_safe_area​

Specifies whether the sheet will avoid system intrusions on the top, left, and right.

Defaults to False.

Events​

on_dismiss​

Fires when bottom sheet is dismissed.