Skip to content

BottomSheet

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.

Inherits: DialogControl

Properties

Examples#

Live example

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.Button("Dismiss", on_click=lambda _: page.pop_dialog()),
                ],
            ),
        ),
    )
    page.overlay.append(sheet)
    page.add(
        ft.Button(
            content="Display bottom sheet",
            on_click=lambda e: page.show_dialog(sheet),
        )
    )


ft.run(main)

basic

Properties#

animation_style #

animation_style: AnimationStyle | None = None

The animation style of this bottom sheet.

barrier_color #

barrier_color: ColorValue | None = None

The color of the scrim that obscures content behind this bottom sheet.

bgcolor #

bgcolor: ColorValue | None = None

The background color of this bottom sheet.

clip_behavior #

clip_behavior: ClipBehavior | None = None

Defines how the content of this bottom sheet should be clipped.

content #

content: Control

The content of this bottom sheet.

dismissible #

dismissible: bool = True

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

elevation #

elevation: Number | None = None

Defines the size of the shadow below this bottom sheet.

Raises:

enable_drag #

enable_drag: bool = False

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

maintain_bottom_view_insets_padding #

maintain_bottom_view_insets_padding: bool = True

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

scroll_controlled #

scroll_controlled: bool = False

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

shape #

shape: OutlinedBorder | None = None

Defines the shape of this bottom sheet.

show_drag_handle #

show_drag_handle: bool = False

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

size_constraints #

size_constraints: BoxConstraints | None = None

The size constraints to apply to this bottom sheet.

use_safe_area #

use_safe_area: bool = True

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