Flutter: SnackBar and SnackBarAction Usage

SnackBar is a visual element that provides brief feedback to the user about their actions. It appears at the bottom of the screen and automatically disappears after a certain duration. SnackBarAction adds a clickable button on the SnackBar.

Live Demo

You can try this widget in the interactive example below:

💡 If the example above doesn't load, click DartPad to run it in a new tab.

Basic Usage

ScaffoldMessenger is used to show a SnackBar:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Your message here'),
  ),
);

SnackBarAction Usage

Adds a button that the user can interact with:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Item deleted'),
    action: SnackBarAction(
      label: 'UNDO',
      onPressed: () {
        // Undo operation
      },
    ),
  ),
);

Important Properties

Property	Description
content	SnackBar content (usually Text)
action	Clickable button (SnackBarAction)
duration	Display duration
backgroundColor	Background color
behavior	fixed or floating
shape	Shape (corner radius, etc.)
margin	Margins in floating mode

Floating SnackBar

A floating appearance slightly above the bottom of the screen:

SnackBar(
  content: Text('Floating SnackBar'),
  behavior: SnackBarBehavior.floating,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  margin: EdgeInsets.all(16),
)

SnackBar with Icon

SnackBar(
  content: Row(
    children: [
      Icon(Icons.info, color: Colors.white),
      SizedBox(width: 10),
      Text('Information message'),
    ],
  ),
  backgroundColor: Colors.blue,
)

Programmatically Closing SnackBar

final snackBar = ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Loading...')),
);

// Close when operation completes
await someAsyncOperation();
snackBar.close();

Summary

• SnackBar: Provides brief feedback to the user
• SnackBarAction: Clickable button on SnackBar
• ScaffoldMessenger: Used to show SnackBar
• behavior: floating for modern appearance
• duration: Controls display time

SnackBar is an essential tool for improving user experience.