Skip to content

Add a visual that shows a SnackBar #13231

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sfshaza2 merged 2 commits into from
Mar 30, 2026
+14 −11
Merged

Add a visual that shows a SnackBar #13231

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ebb0994
Add a visual showing a SnackBar
sfshaza2 Mar 30, 2026
ab2bf5e
My version of fixing the feedback
sfshaza2 Mar 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 14 additions & 11 deletions src/content/cookbook/design/snackbars.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ take place. For example, when a user swipes away a message in a list,
you might want to inform them that the message has been deleted.
You might even want to give them an option to undo the action.

![SnackBar Demo](/assets/images/docs/cookbook/snackbar.webp){:.site-mobile-screenshot}

In Material Design, this is the job of a [`SnackBar`][].
This recipe implements a snackbar using the following steps:

Expand All @@ -22,8 +24,8 @@ This recipe implements a snackbar using the following steps:
When creating apps that follow the Material Design guidelines,
give your apps a consistent visual structure.
In this example, display the `SnackBar` at the bottom of the screen,
without overlapping other important
widgets, such as the `FloatingActionButton`.
without overlapping other important widgets,
such as the `FloatingActionButton`.

The [`Scaffold`][] widget, from the [material library][],
creates this visual structure and ensures that important
Expand Down Expand Up @@ -55,21 +57,21 @@ ScaffoldMessenger.of(context).showSnackBar(snackBar);
```

:::note
To learn more, watch this short Widget of the Week video on
To learn more, watch the following two-minute Widget of the Week video on
the `ScaffoldMessenger` widget:

<YouTubeEmbed id="lytQi-slT5Y" title="ScaffoldMessenger | Flutter widget of the week"></YouTubeEmbed>
<YouTubeEmbed id="lytQi-slT5Y"
title="ScaffoldMessenger | Flutter widget of the week"></YouTubeEmbed>
:::

## 3. Provide an optional action

You might want to provide an action to the user when
the SnackBar is displayed.
the `SnackBar` is displayed.
For example, if the user accidentally deletes a message,
they might use an optional action in the SnackBar to recover
the message.
an `action` in the `SnackBar` could allow recovering the message.

Here's an example of providing
Here's an example that provides
an additional `action` to the `SnackBar` widget:

<?code-excerpt "lib/main.dart (SnackBarAction)"?>
Expand All @@ -88,7 +90,7 @@ final snackBar = SnackBar(
## Interactive example

:::note
In this example, the SnackBar displays when a user taps a button.
In this example, the `SnackBar` displays when a user taps a button.
For more information on working with user input,
see the [Gestures][] section of the cookbook.
:::
Expand Down Expand Up @@ -144,10 +146,11 @@ class SnackBarPage extends StatelessWidget {
```

<noscript>
<img src="/assets/images/docs/cookbook/snackbar.webp" alt="SnackBar Demo" class="site-mobile-screenshot" />
<img src="/assets/images/docs/cookbook/snackbar.webp"
alt="SnackBar Demo" class="site-mobile-screenshot" />
</noscript>

[Gestures]: /cookbook/gestures
[material library]: {{site.api}}/flutter/material/material-library.html
[`Scaffold`]: {{site.api}}/flutter/material/Scaffold-class.html
[`SnackBar`]: {{site.api}}/flutter/material/SnackBar-class.html
[material library]: {{site.api}}/flutter/material/material-library.html
Loading