SnackBar in Flutter

Haider Ali
Complete Flutter Guide
1 min readJun 11, 2024

In Flutter, a Snackbar is a lightweight, temporary message that appears at the bottom of the screen to provide brief user feedback. It’s ideal for informing users about actions, errors, or confirmations without interrupting the main app flow.

Key characteristics of Snackbars:

  • Transient: They stay visible for a short duration (typically 5–10 seconds) and then disappear automatically.
  • Informative: They display a concise message to the user, often accompanied by an icon for better clarity.
  • Optional Action: You can optionally include an action button that the user can tap to perform a related action.

Use Cases for Snackbars:

  • Success/Error Messages: Notify users about the outcome of an action (e.g., “Item added to cart!” or “Login failed”).
  • Undo Actions: Provide an option to undo a recent action (e.g., “Item deleted. Undo?”).
  • Background Tasks: Inform users about ongoing background processes (e.g., “Image uploading…”).

Simple Snackbar Example:

Here’s an example of a Snackbar displayed after a button press:

ElevatedButton(
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text('Item added to cart!'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Code to undo the action (optional)
print('Undoing item addition');
},
),
),
);
},
child: Text('Add to Cart'),
),

--

--