SnackBar

A snackbar displays brief feedback over the current view.

Example

Show a snackbar with page.show_snack_bar. It mounts the snackbar and opens it for you:

page.show_snack_bar(
  snack_bar(content: text("Profile saved"))
)

Add an action button. When action is a string, its button fires on_action:

page.show_snack_bar(
  snack_bar(
    content: text("Item deleted"),
    action: "Undo",
    on_action: ->(_event) { restore_item },
    duration: 4000,
    show_close_icon: true
  )
)

You can also assign page.snack_bar directly, but the assignment form only displays when you pass open: true:

page.snack_bar = snack_bar(open: true, content: text("Profile saved"))

Prefer page.show_snack_bar — it opens the snackbar without the extra flag and mirrors page.show_dialog, page.show_bottom_sheet, and page.show_banner.

Properties

• content — required message control, such as text("...").
• action — optional action button. A string is used as the button label; a

snack_bar_action(...) control gives you full control over its styling.

• duration — how long the snackbar stays visible, in milliseconds.
• show_close_icon — show a close button.
• behavior — "fixed" or "floating".
• bgcolor, elevation, shape, margin, and padding — presentation options.
• open — whether the snackbar is visible. show_snack_bar sets this; you only

set it yourself when assigning page.snack_bar directly.

Events

• on_action — fired when a string action button is selected.
• on_dismiss — fired when the snackbar closes.
• on_visible — fired when the snackbar becomes visible.

Complete API

Helpers

• snack_bar(content = ..., **props)
• snackbar(content = ..., **props)

Accepted properties

• action — Sets the action property.
• action_overflow_threshold — Sets the action overflow threshold property.
• adaptive — Adapts to the platform (Material/Cupertino) when true.
• badge — Badge drawn on the corner of the control.
• behavior — Sets the behavior property.
• bgcolor — Background color.
• clip_behavior — How content overflowing the bounds is clipped.
• close_icon_color — Close icon color.
• 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.
• dismiss_direction — Sets the dismiss direction property.
• duration — Sets the duration 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.
• key — Stable identity used to preserve state across rebuilds.
• margin — Outer spacing around the control.
• opacity — Opacity from 0.0 (transparent) to 1.0 (opaque).
• open — Whether the control (dialog/sheet/menu) is open.
• padding — Inner spacing between the border and the content.
• persist — Sets the persist property.
• rtl — Renders right-to-left when true.
• shape — Shape/border of the control.
• show_close_icon — Show close icon.
• tooltip — Text shown on hover/long-press.
• visible — Hides the control when false.
• width — Fixed width in logical pixels.

Events

• on_action — Fired on action.
• on_dismiss — Fired when the control is dismissed.
• on_visible — Fired when the control becomes visible.

Wire reference

• Family: materials
• Widget type: snackbar