FlutterFlow's built-in Show Snackbar action displays a brief notification bar at the bottom of the screen. Configure the message text, background color, and duration in the Action Flow Editor. For custom styled snackbars with icons, action buttons, and color variants (success green, error red, warning amber), create a notification Component shown via Show Bottom Sheet with an auto-dismiss timer using On Component Load → Wait → Navigator Pop.
Building Custom Snackbar Notifications in FlutterFlow
Snackbars provide brief, non-blocking feedback after user actions — like 'Item saved', 'Error occurred', or 'Message sent'. They auto-dismiss without requiring user interaction, unlike dialogs. This tutorial covers both the built-in snackbar and a custom styled version.
Prerequisites
- A FlutterFlow project open in the builder
- An action (button tap, form submit) that should show a notification
Step-by-step guide
Use the built-in Show Snackbar action for quick notifications
Use the built-in Show Snackbar action for quick notifications
Select the button or action trigger where you want to show a notification. In the Action Flow Editor, add a Show Snackbar action. Set the Message text (e.g., 'Item saved successfully!'). Set Background Color to Theme Primary for success or Theme Error for failures. Set Duration to 3 seconds (default). The snackbar appears at the bottom of the screen and auto-dismisses. This is the fastest way to add notifications.
Expected result: A colored notification bar briefly appears at the bottom of the screen with your message.
Create a custom snackbar Component with icon and styled variants
Create a custom snackbar Component with icon and styled variants
Create a Component called CustomSnackbar with parameters: message (String), type (String: success/error/warning/info). Build the layout: Container (full width, height 56, borderRadius 8 top corners only). Inside, a Row with: Icon widget (Conditional: checkmark for success, error_outline for error, warning for warning, info for info), SizedBox(12), Expanded Text (message, white, Body Medium), optional IconButton (X close button). Set Container color Conditionally: green for success, red for error, amber for warning, blue for info.
Expected result: A styled notification Component with contextual icon and color based on the type parameter.
Add auto-dismiss timer to the custom snackbar
Add auto-dismiss timer to the custom snackbar
On the CustomSnackbar Component, add an On Component Load action flow. Add a Wait action set to 3000 milliseconds (3 seconds). After the wait, add a Navigator Pop action to close the Bottom Sheet. This auto-dismisses the snackbar after 3 seconds without user intervention. Users can also tap the X button to close immediately via a separate Navigator Pop on the X button's On Tap.
Expected result: The custom snackbar automatically closes after 3 seconds, or immediately when the X button is tapped.
Trigger the custom snackbar from any action flow
Trigger the custom snackbar from any action flow
On any action that needs feedback (form submit, delete, save), add a Show Bottom Sheet action. Select the CustomSnackbar Component. Pass the message and type parameters. Set isDismissible to true and enableDrag to true so users can swipe it away. Set height to 56px (or minimal). The Bottom Sheet slides up from the bottom displaying your custom snackbar.
Expected result: The custom styled snackbar slides up from the bottom after the action and auto-dismisses.
Add an optional Undo action button on the snackbar
Add an optional Undo action button on the snackbar
Add a Component Parameter onUndo (Action, optional) to CustomSnackbar. In the Component, add a TextButton 'Undo' to the right side of the Row with Conditional Visibility (show only when onUndo is provided). On Undo button tap: Execute Callback onUndo, then Navigator Pop. On the parent page, when showing the snackbar after a delete action, pass the undo callback that restores the deleted item. This gives users a grace period to reverse destructive actions.
Expected result: The snackbar shows an Undo button when a callback is provided, allowing users to reverse the action.
Complete working example
1BUILT-IN SNACKBAR:2 Action Flow → Show Snackbar3 Message: "Item saved successfully!"4 Background Color: Theme Primary (or Theme Error)5 Duration: 3 seconds67CUSTOM SNACKBAR COMPONENT:8 Parameters: message (String), type (String), onUndo (Action, optional)910 Container (width: infinity, height: 56, borderRadius top: 8)11 Color: Conditional on type12 success → green13 error → red14 warning → amber15 info → blue16 └── Padding (horizontal: 16, vertical: 12)17 └── Row18 ├── Icon (Conditional on type)19 │ success → check_circle (white)20 │ error → error_outline (white)21 │ warning → warning (white)22 │ info → info_outline (white)23 ├── SizedBox (width: 12)24 ├── Expanded → Text (message, white, Body Medium)25 ├── TextButton "Undo" (Conditional: show if onUndo != null)26 │ On Tap: Execute Callback onUndo → Navigator Pop27 └── IconButton X (close)28 On Tap: Navigator Pop2930 On Component Load:31 1. Wait 3000ms32 2. Navigator Pop (auto-dismiss)3334TRIGGER:35 Show Bottom Sheet → CustomSnackbar36 message: "File deleted"37 type: "error"38 onUndo: [restore file action]39 height: 56, isDismissible: trueCommon mistakes when creating a Custom Snackbar for Your FlutterFlow App
Why it's a problem: Using Show Dialog instead of Show Snackbar for brief notifications
How to avoid: Use Show Snackbar or Show Bottom Sheet with auto-dismiss for non-blocking notifications. Reserve dialogs for actions requiring user decision.
Why it's a problem: Setting snackbar duration too long (over 5 seconds)
How to avoid: Set duration to 2-4 seconds for simple confirmations. Only use longer durations if there is an Undo action the user might need time to read.
Why it's a problem: Not providing color/icon variants for different message types
How to avoid: Use consistent color coding: green for success, red for error, amber for warning, blue for info. Match icons to the severity.
Best practices
- Use the built-in Show Snackbar for simple one-line notifications
- Build a custom Component for styled snackbars with icons and action buttons
- Keep snackbar duration between 2-4 seconds for optimal readability
- Use color coding: green=success, red=error, amber=warning, blue=info
- Add an Undo button on destructive action snackbars for error recovery
- Auto-dismiss with On Component Load → Wait → Navigator Pop for custom snackbars
- Position snackbars at the bottom of the screen where users expect notifications
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I want to build custom styled snackbar notifications in FlutterFlow with success (green), error (red), warning (amber), and info (blue) variants. Each has an icon, message text, and optional Undo button. Show the Component layout and auto-dismiss timer.
Create a Component with a full-width Container, height 56, green background. Add a Row inside with a checkmark icon, a message text, and a close X button.
Frequently asked questions
Can I show snackbars at the top of the screen instead of the bottom?
The built-in Show Snackbar always shows at the bottom. For top positioning, use a custom Component shown via Show Dialog or animate a Container from the top using a Custom Widget.
Can I stack multiple snackbars?
Show Bottom Sheet replaces the previous sheet. For stacking, use the built-in Show Snackbar which queues messages. Custom implementations would need a notification queue in App State.
How do I show a snackbar after navigation?
Pass a flag via Route Parameter or App State. On the destination page's On Page Load, check the flag and show the snackbar. Reset the flag after showing.
Can the snackbar include an image or avatar?
Yes. In your custom Component, add a CircleImage or Image widget to the Row alongside the icon and message text.
Does the built-in snackbar work on web?
Yes. Show Snackbar works on iOS, Android, and web. It uses Flutter's ScaffoldMessenger which is cross-platform.
Can RapidDev help build an advanced notification system?
Yes. RapidDev can create notification queues, animated toast messages, persistent banners, and in-app notification feeds.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation