BottomSheet

A panel that slides up from the bottom of the screen. Show it with page.show_bottom_sheet.

Example

sheet = bottom_sheet(
  show_drag_handle: true,
  content: container(
    padding: 24,
    content: column(
      tight: true,
      spacing: 12,
      children: [
        text(value: "Share", style: { size: 18, weight: "w700" }),
        filled_button(content: text("Copy link"), on_click: ->(_e) { copy_link })
      ]
    )
  )
)

page.show_bottom_sheet(sheet)

# Later, from an event handler:
page.close_bottom_sheet

show_bottom_sheet opens the sheet for you. You can also assign page.bottom_sheet = bottom_sheet(open: true, …) directly, but the assignment form only displays when the control is built with open: true.

page.close_bottom_sheet closes the currently shown sheet. Pass a sheet when you want to close a specific instance: page.close_bottom_sheet(sheet). show_bottomsheet and close_bottomsheet are compact aliases.

Common properties

• content — the sheet's child control
• open — show / hide
• dismissible — tap outside to close
• draggable
• show_drag_handle
• bgcolor
• shape
• elevation
• use_safe_area
• fullscreen

Usage

Prefer the page helper:

page.close_bottom_sheet(sheet)

The lower-level equivalent is page.update(sheet, open: false).

For a modal that hosts your *website* content (e.g. an auth flow), see Native Shell.

Complete API

Helpers

• bottom_sheet(content = ..., **props)
• bottomsheet(content = ..., **props)

Accepted properties

• adaptive — Adapts to the platform (Material/Cupertino) when true.
• animation_style — Animation style.
• badge — Badge drawn on the corner of the control.
• barrier_color — Barrier color.
• bgcolor — Background color.
• clip_behavior — How content overflowing the bounds is clipped.
• col — Responsive column span (1-12) per breakpoint.
• content — The single child control rendered inside this control.
• data — Arbitrary value you can attach to the control and read back in handlers.
• disabled — Disables interaction when true.
• dismissible — Sets the dismissible property.
• draggable — Sets the draggable property.
• elevation — Shadow depth (z-height).
• expand — Fills the available space along the parent's main axis when true.
• expand_loose — Like expand, but only grows up to the child's natural size.
• fullscreen — Sets the fullscreen property.
• key — Stable identity used to preserve state across rebuilds.
• maintain_bottom_view_insets_padding — Maintain bottom view insets padding.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• open — Whether the control (dialog/sheet/menu) is open.
• rtl — Renders right-to-left when true.
• scrollable — Sets the scrollable property.
• shape — Shape/border of the control.
• show_drag_handle — Sets the show drag handle property.
• size_constraints — Min/max size constraints.
• tooltip — Text shown on hover/long-press.
• use_safe_area — Sets the use safe area property.
• visible — Hides the control when false.

Events

• on_dismiss — Fired when the control is dismissed.

Wire reference

• Family: materials
• Widget type: bottomsheet