Skip to content

SnackBar

A lightweight message with an optional action which briefly displays at the bottom of the screen.

Inherits: DialogControl

Properties

Events

Examples#

Live example

Basic Example#

import flet as ft


def main(page: ft.Page):
    def on_click(e: ft.Event[ft.Button]):
        page.show_dialog(ft.SnackBar(ft.Text("Hello, world!")))

    page.add(ft.Button("Open SnackBar", on_click=on_click))


ft.run(main)

basic

Counter#

import flet as ft


class Data:
    def __init__(self) -> None:
        self.counter = 0

    def increment(self):
        self.counter += 1

    def decrement(self):
        self.counter -= 1


data = Data()


def main(page: ft.Page):
    page.title = "SnackBar Example"

    snack_bar = ft.SnackBar(
        content=ft.Text("You did it!"),
        action="Undo it!",
        on_action=lambda e: data.decrement(),
    )

    def handle_button_click(e: ft.Event[ft.Button]):
        data.increment()
        snack_bar.content.value = f"You did it x {data.counter}"
        if not snack_bar.open:
            page.show_dialog(snack_bar)
        page.update()

    page.add(ft.Button("Open SnackBar", on_click=handle_button_click))


ft.run(main)

Properties#

action #

action: str | SnackBarAction | None = None

An optional action that the user can take based on the snack bar.

For example, the snack bar might let the user undo the operation that prompted the snackbar. Snack bars can have at most one action.

The action should not be "dismiss" or "cancel".

action_overflow_threshold #

action_overflow_threshold: Number = 0.25

The percentage threshold for action's width before it overflows to a new line.

If the width of the snackbar's content is greater than this percentage of the width of the snackbar minus the width of its action, then the action will appear below the content.

At a value of 0.0, the action will not overflow to a new line.

Note

Must be between 0.0 and 1.0 inclusive.

Raises:

behavior #

behavior: SnackBarBehavior | None = None

This defines the behavior and location of the snack bar.

Defines where a SnackBar should appear within a page and how its location should be adjusted when the page also includes a FloatingActionButton or a NavigationBar.

If None, SnackBarTheme.behavior is used. If that's is also None, defaults to SnackBarBehavior.FIXED.

Note

bgcolor #

bgcolor: ColorValue | None = None

SnackBar background color.

clip_behavior #

clip_behavior: ClipBehavior = HARD_EDGE

The content will be clipped (or not) according to this option.

close_icon_color #

close_icon_color: ColorValue | None = None

The color of the close icon, if show_close_icon is True.

content #

content: StrOrControl

The primary content of the snack bar.

Typically a Text control.

Raises:

dismiss_direction #

dismiss_direction: DismissDirection | None = None

The direction in which the SnackBar can be dismissed.

If None, SnackBarTheme.dismiss_direction is used. If that's is also None, defaults to DismissDirection.DOWN.

duration #

duration: DurationValue = field(
    default_factory=lambda: Duration(milliseconds=4000)
)

The amount of time this snack bar should stay open for.

elevation #

elevation: Number | None = None

The z-coordinate at which to place the snack bar. This controls the size of the shadow below the snack bar.

Raises:

margin #

margin: MarginValue | None = None

Empty space to surround the snack bar.

Has effect only when behavior=SnackBarBehavior.FLOATING and will be ignored if width is specified.

padding #

padding: PaddingValue | None = None

The amount of padding to apply to the snack bar's content and optional action.

shape #

shape: OutlinedBorder | None = None

The shape of this snack bar.

show_close_icon #

show_close_icon: bool = False

Whether to include a "close" icon widget.

Tapping the icon will close the snack bar.

width #

width: Number | None = None

The width of the snack bar.

If width is specified, the snack bar will be centered horizontally in the available space.

Note

Has effect only when behavior is SnackBarBehavior.FLOATING. It can not be used if margin is specified.

Events#

on_action #

on_action: ControlEventHandler[SnackBar] | None = None

Called when action button is clicked.

on_visible #

on_visible: ControlEventHandler[SnackBar] | None = None

Called the first time that the snackbar is visible within the page.

Inherits: Control

A button that can be used as an action in a SnackBar.

An action button for a SnackBar.

Note
  • Snack bar actions are always enabled. Instead of disabling a snack bar action, avoid including it in the snack bar in the first place.
  • Snack bar actions can will only respond to first click. Subsequent clicks/presses are ignored.

Properties

Events

Properties#

bgcolor #

bgcolor: ColorValue | None = None

The button background fill color.

If None, SnackBarTheme.action_bgcolor is used.

disabled_bgcolor #

disabled_bgcolor: ColorValue | None = None

The button disabled background color. This color is shown after the action is dismissed.

If None, SnackBarTheme.disabled_action_bgcolor is used.

disabled_text_color #

disabled_text_color: ColorValue | None = None

The button disabled label color. This color is shown after the action is dismissed.

label #

label: str

The button's label.

text_color #

text_color: ColorValue | None = None

The button label color.

If None, SnackBarTheme.action_text_color is used.

Events#

on_click #

on_click: ControlEventHandler[SnackBarAction] | None = None

Called when this action button is clicked.