SnackBar in Flutter

What is SnackBar in Flutter?

SnackBar is a Flutter Material widget that shows a brief, temporary message near the bottom of the screen, displayed through ScaffoldMessenger.of(context).showSnackBar, not through Scaffold directly.

Scaffold.of(context).showSnackBar was the older API and no longer exists in current Flutter – ScaffoldMessenger replaced it specifically to handle snackbars correctly across Scaffold rebuilds and page transitions.

Key facts at a glance

• SnackBar is part of Flutter's Material library and requires no external package.
• It's shown via ScaffoldMessenger.of(context).showSnackBar(...), not Scaffold.of(context).
• The default SnackBar.duration is 4 seconds if you don't override it – worth keeping in mind when deciding whether a user has enough time to tap an action like "Undo".
• SnackBarBehavior.floating positions the SnackBar above the bottom edge, which is useful when a FloatingActionButton or bottom navigation bar is present.
• ScaffoldMessenger.of(context).clearSnackBars() clears the currently displayed SnackBar and any snackbars queued for display.
• A SnackBar is displayed through a ScaffoldMessenger ancestor. In a typical Flutter app, MaterialApp provides the necessary ScaffoldMessenger.

How do I show a snackbar in Flutter?

Call ScaffoldMessenger.of(context).showSnackBar with a SnackBar widget, typically from a button's onPressed.

ElevatedButton(
  onPressed: () {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('Changes saved'),
        action: SnackBarAction(label: 'Undo', onPressed: undoChanges),
      ),
    );
  },
  child: const Text('Save'),
),

SnackBarAction adds an action button inside the SnackBar. Tapping it invokes its onPressed callback; it does not automatically dismiss the SnackBar. If you want to dismiss it from the callback, you can call ScaffoldMessenger.of(context).hideCurrentSnackBar().

How do I create a custom, floating snackbar in Flutter?

behavior: SnackBarBehavior.floating positions the SnackBar above the bottom edge of the Scaffold. Combined with shape and margin, it can create the rounded, detached style common in custom designs.

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text('Upload complete'),
    behavior: SnackBarBehavior.floating,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
    margin: const EdgeInsets.all(16),
    backgroundColor: Colors.green.shade700,
    duration: const Duration(seconds: 3),
  ),
);

SnackBarBehavior.fixed, the default, places the SnackBar at the bottom of the Scaffold, while floating positions it above the bottom edge and allows properties such as margin to create a detached appearance. shape can be used to customize the SnackBar's shape.

When should I use a snackbar – and when an alternative?

Use it when

• The message is a brief, dismissible confirmation of an action the user just took (saved, sent, deleted).
• An optional action (like Undo) makes sense as a single button inside the message.
• The interruption should be temporary and not block further interaction.

Reach for an alternative when

• The message needs to remain visible until the user dismisses it or takes action – a MaterialBanner is often a better fit for persistent, contextual messages.
• Multiple messages might be triggered in quick succession – ScaffoldMessenger queues SnackBars by default, which can delay an important message. Consider whether queuing is actually desirable for your use case.
• You need a global, overlay-based notification system with behavior that differs from a Material SnackBar – for example, notifications that should appear independently of the current Scaffold.

Best practices

1. Use ScaffoldMessenger.of(context).showSnackBar() to display a SnackBar. The old Scaffold.of(context).showSnackBar() API has been removed.
2. Use clearSnackBars() when previously queued messages are no longer relevant and only the latest message should be shown.
3. Consider SnackBarBehavior.floating when the SnackBar would otherwise interfere visually with a FAB, bottom navigation bar, or other bottom-aligned UI.
4. Keep the message concise – a SnackBar should communicate a brief status or confirmation that users can understand at a glance.
5. Use MaterialBanner instead of a SnackBar when the message is important enough to remain visible until the user dismisses it or takes action.

Common mistakes

• Calling Scaffold.of(context).showSnackBar. This API no longer exists in current Flutter; use ScaffoldMessenger.of(context).showSnackBar instead.
• Using ScaffoldMessenger.of(context) without a ScaffoldMessenger ancestor. This asserts in debug mode and throws in release; a root ScaffoldMessenger is provided automatically by MaterialApp, but isolated widget tests or previews may not have one.
• Using a stale BuildContext after an asynchronous operation. If the widget has been unmounted while waiting for an async operation, check context.mounted before using the context to show the SnackBar.
• Expecting several rapid SnackBars to all show immediately. They are queued by default; use clearSnackBars() when the newest message should take priority over messages already waiting in the queue.