flutter
/

GetX Snackbar: The Ultimate Guide to Toast & Notifications

Last Sync: Today

On this page

12
0%
5 min read
Remaining
5 minleft

Click any section to jump — progress syncs automatically

flutter

GetX Snackbar: The Ultimate Guide to Toast & Notifications

What is GetX Snackbar?

GetX provides a powerful, context‑free way to show snackbars (toast‑like notifications) anywhere in your app. Unlike Flutter's native ScaffoldMessenger, you don't need a BuildContext. You can show a snackbar from a controller, a service, or any Dart class with a single line of code. This makes it ideal for showing temporary messages like success, error, or information.

Basic Usage

DARTRead-only
1
// Simple snackbar
Get.snackbar('Title', 'This is the message');

// With more options
Get.snackbar(
  'Success',
  'Your data has been saved',
  snackPosition: SnackPosition.BOTTOM,
  duration: Duration(seconds: 3),
);

Key Parameters

  • title – The main title (required).
  • message – The descriptive message (required).
  • snackPosition – Where to show the snackbar: SnackPosition.TOP (default) or SnackPosition.BOTTOM.
  • duration – How long it stays on screen. Default is 3 seconds.
  • backgroundColor – Background color of the snackbar.
  • colorText – Text color for title and message.
  • mainButton – A button (e.g., TextButton) that appears at the end.
  • onTap – Callback when the snackbar is tapped.
  • isDismissible – Whether the user can swipe to dismiss (default true).
  • showProgressIndicator – Show a progress indicator.
  • progressIndicatorBackgroundColor – Color of the progress bar background.
  • progressIndicatorValueColor – Color of the progress indicator.
  • margin – Margin around the snackbar.
  • padding – Padding inside the snackbar.
  • borderRadius – Corner radius of the snackbar.
  • icon – An icon to show at the beginning.
  • shouldIconPulse – Whether the icon should pulse.
  • leftBarIndicatorColor – Color of a vertical bar on the left.
  • forwardAnimationCurve – Animation curve when appearing.
  • reverseAnimationCurve – Animation curve when disappearing.

Positioning

You can control where the snackbar appears using snackPosition.

DARTRead-only
1
// Show at the top (default)
Get.snackbar('Info', 'This is a top snackbar');

// Show at the bottom
Get.snackbar(
  'Info',
  'This is a bottom snackbar',
  snackPosition: SnackPosition.BOTTOM,
);

Customization

GetX snackbars are highly customizable. You can change colors, add icons, and even a button.

DARTRead-only
1
Get.snackbar(
  'Error',
  'Please check your internet connection',
  backgroundColor: Colors.red,
  colorText: Colors.white,
  icon: Icon(Icons.wifi_off, color: Colors.white),
  snackPosition: SnackPosition.BOTTOM,
  duration: Duration(seconds: 5),
  mainButton: TextButton(
    onPressed: () => Get.back(),
    child: Text('Retry', style: TextStyle(color: Colors.white)),
  ),
);

Snackbar with Progress Indicator

You can show a progress indicator that moves during the snackbar's lifetime.

DARTRead-only
1
Get.snackbar(
  'Uploading',
  'Please wait...',
  showProgressIndicator: true,
  progressIndicatorBackgroundColor: Colors.grey,
  progressIndicatorValueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
  duration: Duration(seconds: 2),
);

Using Get.showSnackbar for More Control

If you need even more flexibility, you can use Get.showSnackbar with a GetSnackBar widget. This allows you to define a custom widget as content.

DARTRead-only
1
Get.showSnackbar(
  GetSnackBar(
    title: 'Custom Snackbar',
    message: 'This is a fully custom snackbar',
    duration: Duration(seconds: 4),
    snackPosition: SnackPosition.TOP,
    backgroundColor: Colors.purple,
    borderRadius: 20,
    margin: EdgeInsets.all(10),
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 15),
    icon: Icon(Icons.favorite, color: Colors.white),
    mainButton: TextButton(
      onPressed: () => Get.back(),
      child: Text('Close'),
    ),
  ),
);

Dismissing Snackbars

By default, snackbars auto‑dismiss after the duration. You can also dismiss them manually.

DARTRead-only
1
// Show a snackbar that cannot be swiped away
Get.snackbar(
  'Important',
  'This message requires attention',
  isDismissible: false,
  duration: Duration(seconds: 5),
);

// Manually dismiss the currently visible snackbar (if any)
Get.closeCurrentSnackbar();

Best Practices

  • Use snackbars for temporary messages – They are great for feedback after user actions, errors, or success confirmations.
  • Keep messages short and actionable – Avoid long texts. If needed, provide a button for more info.
  • Choose appropriate colors – Use green for success, red for error, blue for info, and yellow for warnings.
  • Avoid overusing snackbars – They can become annoying if shown too frequently.
  • Use Get.snackbar for simple messages – It's concise and works well in most cases.
  • Use Get.showSnackbar when you need custom widgets – For complex designs or custom animations.

Common Mistakes

  • ❌ Calling Get.snackbar without GetMaterialApp – Snackbars won't work. ✅ Always use GetMaterialApp (or GetCupertinoApp) as your root widget.
  • ❌ Not setting a duration for important messages – Users may miss them. ✅ Set an appropriate duration, or make them non‑dismissible if critical.
  • ❌ Using snackbars for critical errors that require user action – Snackbars are transient; use dialogs for important decisions. ✅ Choose the right UI element.
  • ❌ Ignoring the snackPosition – Users may expect them at the bottom in some apps. ✅ Consider the platform and user expectation.

FAQ

  • Q: Can I show a snackbar from a controller?
    A: Absolutely! Since Get.snackbar doesn't need context, you can call it from any class.
  • Q: How do I show a snackbar without a title?
    A: You can pass an empty string for title, or use Get.showSnackbar with a custom widget.
  • Q: Can I have multiple snackbars stacked?
    A: By default, only one snackbar is shown at a time. The new one replaces the old one.
  • Q: How to handle snackbar tap?
    A: Use the onTap parameter of GetSnackBar or Get.snackbar (via onTap).
  • Q: Does GetX snackbar work with Cupertino?
    A: Yes, use GetCupertinoApp instead of GetMaterialApp. The snackbar will still show, but the style may be material by default. For full Cupertino styling, consider showCupertinoDialog or custom Get.showSnackbar with a Cupertino‑styled widget.
  • Q: Can I change the animation?
    A: Yes, you can use forwardAnimationCurve and reverseAnimationCurve parameters.

Conclusion

GetX snackbars offer a simple, context‑free way to display temporary notifications in your Flutter app. With extensive customization options and easy usage from any part of your code, they are a perfect fit for modern Flutter applications.

Try it yourself

import 'package:flutter/material.dart';
import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: SnackbarDemo(),
    );
  }
}

class SnackbarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('GetX Snackbar Demo')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Get.snackbar('Success', 'Your action was successful');
              },
              child: Text('Simple Snackbar'),
            ),
            ElevatedButton(
              onPressed: () {
                Get.snackbar(
                  'Error',
                  'Something went wrong',
                  backgroundColor: Colors.red,
                  colorText: Colors.white,
                  icon: Icon(Icons.error, color: Colors.white),
                  snackPosition: SnackPosition.BOTTOM,
                  duration: Duration(seconds: 4),
                  mainButton: TextButton(
                    onPressed: () => Get.back(),
                    child: Text('Retry', style: TextStyle(color: Colors.white)),
                  ),
                );
              },
              child: Text('Error Snackbar'),
            ),
            ElevatedButton(
              onPressed: () {
                Get.snackbar(
                  'Uploading',
                  'Please wait...',
                  showProgressIndicator: true,
                  progressIndicatorBackgroundColor: Colors.grey,
                  progressIndicatorValueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
                  duration: Duration(seconds: 2),
                );
              },
              child: Text('With Progress'),
            ),
          ],
        ),
      ),
    );
  }
}

Test Your Knowledge

Q1
of 3

Which method is used to show a simple snackbar in GetX?

A
Get.toast()
B
Get.showSnackbar()
C
Get.snackbar()
D
Get.message()
Q2
of 3

How do you change the position of a GetX snackbar?

A
Use the position parameter
B
Use the snackPosition parameter with SnackPosition.TOP or SnackPosition.BOTTOM
C
Use alignment
D
Use margin
Q3
of 3

What widget must be used at the root of the app for GetX snackbars to work?

A
MaterialApp
B
CupertinoApp
C
GetMaterialApp (or GetCupertinoApp)
D
Scaffold

Previous

getx find

Next

getx dialog

Related Content

Need help?

Explore our comprehensive docs or start a chat with our tech experts.