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.

sheet = ft.BottomSheet(
    content=ft.Column(
        width=150,
        alignment=ft.MainAxisAlignment.CENTER,
        horizontal_alignment=ft.CrossAxisAlignment.CENTER,
        controls=[
            ft.Text("Choose an option"),
            ft.TextButton("Dismiss"),
        ],
    )
)
page.show_dialog(sheet)

Basic BottomSheet

Inherits: DialogControl

Properties

• animation_style(AnimationStyle | None) –

  The animation style of this bottom sheet.

• barrier_color(ColorValue | None) –

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

• bgcolor(ColorValue | None) –

  The background color of this bottom sheet.

• clip_behavior(ClipBehavior | None) –

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

• content(Control) –

  The content of this bottom sheet.

• dismissible(bool) –

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

• elevation(Number | None) –

  Defines the size of the shadow below this bottom sheet.

• enable_drag(bool) –

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

• maintain_bottom_view_insets_padding(bool) –

  Adds a padding at the bottom to avoid obstructing the bottom sheet's content with

• scroll_controlled(bool) –

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

• shape(OutlinedBorder | None) –

  Defines the shape of this bottom sheet.

• show_drag_handle(bool) –

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

• size_constraints(BoxConstraints | None) –

  The size constraints to apply to this bottom sheet.

• use_safe_area(bool) –

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

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)

Properties

animation_style class-attribute instance-attribute

animation_style: AnimationStyle | None = None

The animation style of this bottom sheet.

barrier_color class-attribute instance-attribute

barrier_color: ColorValue | None = None

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

bgcolor class-attribute instance-attribute

bgcolor: ColorValue | None = None

The background color of this bottom sheet.

clip_behavior class-attribute instance-attribute

clip_behavior: ClipBehavior | None = None

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

content instance-attribute

content: Control

The content of this bottom sheet.

dismissible class-attribute instance-attribute

dismissible: bool = True

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

elevation class-attribute instance-attribute

elevation: Number | None = None

Defines the size of the shadow below this bottom sheet.

Raises:

• ValueError –

  If elevation is negative.

enable_drag class-attribute instance-attribute

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 class-attribute instance-attribute

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 class-attribute instance-attribute

scroll_controlled: bool = False

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

shape class-attribute instance-attribute

shape: OutlinedBorder | None = None

Defines the shape of this bottom sheet.

show_drag_handle class-attribute instance-attribute

show_drag_handle: bool = False

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

size_constraints class-attribute instance-attribute

size_constraints: BoxConstraints | None = None

The size constraints to apply to this bottom sheet.

use_safe_area class-attribute instance-attribute

use_safe_area: bool = True

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