dialog, flutter, snackbar, toast, tutorial

86  comments

Share0
Tweet0
Share0
Share0
Tweet0
Share0

Snackbars and toasts are the most used ways of notifying users about something within an app. The problem is that snackbars are not very modifiable and toasts, coming from native Android, are not even present in Flutter by default.

Flash is a highly customizable, powerful and easy-to-use alerting package for Flutter. It offers snackbars, toasts and even dialogs so that you can manage everything using just one API.

 Starter project
Finished project

Since the Flash package can be used to show toasts, snackbars and dialogs... We're going to build an app that showcases it all! There's also some starter code that needs to be put in place before we start with the tutorial, so feel free to grab it from above if you want to follow along.

Before we begin with the Dart code, let's add a dependency to the pubspec. Aside from the version we're going to use now, there's also 1.4.0-nullsafety, so you're covered for the future when null-safety hits stable.

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flash: ^1.3.1

Toasts

Toasts are short message popups that come from native Android, where they can be shown and remain visible even the app itself is not in the foreground.  In the case of the Flash library, toasts are just regular Flutter widgets that have nothing to do with the native platform and they're visible only as long as the app is visible too.

There are packages that allow you to display the native toasts from the Flutter code. One of them is  fluttertoast.

Let's now write the code that's going to show a toast in the "show toast" button's onPressed callback method that's already created for you in the starter project.

No matter what kind of a popup you're trying to show with the Flash package, you always call showToast method which can take in a bunch of arguments, for example, a duration and also a builder for the widget that'll be displayed.

main.dart

showFlash(
  context: context,
  duration: const Duration(seconds: 4),
  builder: (context, controller) {
    // The displayed toast widget will go here
  },
);

The builder should always return a Flash widget. I'd recommend that you always use the named constructors - Flash.dialog or Flash.bar. They're almost identical but they omit certain constructor parameters that just don't make sense for dialogs or snackbars respectively.

If you think about it, a toast behaves more like a dialog than a snackbar, so let's write the following for the builder:

main.dart

return Flash.dialog(
  controller: controller,
  borderRadius: const BorderRadius.all(Radius.circular(8)),
  backgroundGradient: LinearGradient(
    colors: [Colors.indigo, Colors.deepPurple],
  ),
  // Alignment is only available for the "dialog" named constructor
  alignment: Alignment.bottomCenter,
  margin: const EdgeInsets.only(bottom: 48),
  // Child can be any widget you like, this one just displays a padded text
  child: Padding(
    padding: const EdgeInsets.all(8.0),
    child: Text(
      'This is a toast',
      style: const TextStyle(
        color: Colors.white,
        fontSize: 16,
      ),
    ),
  ),
);

Background, border radius, alignment and even more properties of the "container" that holds the content of the toast/dialog/snackbar are configured in the Flash widget. The actual content, which in this case is just a Padding and a Text is then passed as the child argument.

Showing only one toast at a time

The toast is now successfully displayed but when you tap the button multiple times in rapid succession, you get overlapping toasts! How can we ensure that only one of them is shown at any given moment?

Some libraries come with this functionality built in and even offer something called a message queue which remembers the toasts you wanted to show and then displays them only if the previous one is already hidden. When it comes to the Flash package, we need to implement this functionality on our own.

While we're only going to take a look at not overlapping multiple toasts, you can find a working implementation of a message queue with the Flash library in the official example project.

Showing only one toast at a time is simple. Just create a boolean field _isToastShown in a State and then just don't call showFlash from the button press when the field is true. This is possible because showFlash returns a Future that completes once it's dismissed.

main.dart

class _FlashPageState extends State<FlashPage> {
  bool _isToastShown = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            RaisedButton(
              child: Text('Show Toast'),
              onPressed: () async {
                if (_isToastShown) {
                  return;
                }

                _isToastShown = true;

                await showFlash(
                  ...
                );

                _isToastShown = false;
              },
            ),

            ...

Snackbars

Showing snackbars is almost identical to showing toasts. The main difference is that you use the Flash.bar named constructor so that you can configure properties specific to snackbars. Inside the "show snackbar" button's onPressed callback:

main.dart

showFlash(
  context: context,
  duration: const Duration(seconds: 4),
  builder: (context, controller) {
    return Flash.bar(
      controller: controller,
      backgroundGradient: LinearGradient(
        colors: [Colors.yellow, Colors.amber],
      ),
      // Position is only available for the "bar" named constructor and can be bottom/top.
      position: FlashPosition.bottom,
      // Allow dismissal by dragging down.
      enableDrag: true,
      // Allow dismissal by dragging to the side (and specify direction).
      horizontalDismissDirection:
          HorizontalDismissDirection.startToEnd,
      margin: const EdgeInsets.all(8),
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      // Make the animation lively by experimenting with different curves.
      forwardAnimationCurve: Curves.easeOutBack,
      reverseAnimationCurve: Curves.slowMiddle,
      // While it's possible to use any widget you like as the child,
      // the FlashBar widget looks good without any effort on your side.
      child: FlashBar(
        title: Text(
          'You are seeing a snackbar!',
          style: Theme.of(context).textTheme.headline6,
        ),
        message: Text('This is something'),
        primaryAction: IconButton(
          // This icon's color is by default re-themed to have the primary color
          // from the material theme - blue by default.
          icon: Icon(Icons.ac_unit),
          onPressed: () {},
        ),
        icon: Icon(
          Icons.info,
          // This color is also pulled from the theme. Let's change it to black.
          color: Colors.black,
        ),
        shouldIconPulse: false,
        showProgressIndicator: true,
      ),
    );
  },
);

The child widget could again by anything you want but FlashBar looks good out-of-the-box, so we use it.

Popping the snackbar

As of now, navigating to the previous screen by tapping the back button is possible even while the snackbar is shown.

In order for the snackbar (or any other widget shown by calling showFlash) to be affected by calling Navigator.pop(), we need to set the persistent parameter to false.

main.dart

showFlash(
  context: context,
  duration: const Duration(seconds: 4),
  persistent: false,
  builder: (context, controller) {
    ...
  },
);

Doing only this, however, is not enough. If you tried to show the snackbar now, you'd get the following error message: "overlay can't be the root overlay when persistent is false". Hmmmm.

You see, individual "flashes" are shown as an OverlayEntry within an Overlay (learn more here) so that they can be displayed on top of other widgets. The MaterialApp widget which is at the root of our app contains such an Overlay.  To be able to pop the snackbar though, we need to have a route-specific Overlay, not just the one at the root of the app.

How can we do that? Easy! One way is to wrap the FlashPage (from the starter project) in an Overlay as an OverlayEntry.

main.dart

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: RaisedButton(
          child: Text('Go to the next page'),
          onPressed: () {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) => Overlay(
                  initialEntries: [
                    OverlayEntry(
                      builder: (context) => FlashPage(),
                    ),
                  ],
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

Dialogs

It's also possible to show regular-looking dialogs using Flash. In my opinion, you don't gain much from using showFlash compared to calling the default showDialog but you may want to keep everything streamlined using just one library for all of your in-app popup needs.

Whatever the case may be, showing dialogs is rather simple. Call showFlash with persistent set to false (dialogs must be poppable, otherwise, they're really just oversized weird toasts), you also probably don't want to specify any duration to make the dialog indefinite.

The builder should return a Flash constructed with the dialog named constructor.  Since persistent is false, the Flash will figure out that it should display a barrier that will dim the background. 

So, inside onPressed of the "show dialog" button:

main.dart

showFlash(
  context: context,
  // A dialog cannot be persistent - must be poppable.
  persistent: false,
  builder: (context, controller) {
    return Flash.dialog(
      controller: controller,
      borderRadius: const BorderRadius.all(Radius.circular(8)),
      margin: const EdgeInsets.all(8),
      // Again, FlashBar is a perfect candidate for the child widget.
      child: FlashBar(
        message:
            Text('This FlashBar looks like an AlertDialog.'),
        actions: [
          FlatButton(
            onPressed: () {
              controller.dismiss();
            },
            child: Text('OK'),
          ),
        ],
      ),
    );
  },
);

This is how you can display toasts, snackbars and dialogs using the Flash package. The great thing is that they good really good without much effort on your part. No matter what you want to use it for, this package is a good choice.

Author Image
Tweet0
Share0

About the author 

Matt Rešetár

Matt is an app developer with a knack for teaching others. Working as a Flutter Developer at LeanCode and a developer educator, he is set on helping other people succeed in their Flutter app development career.

You may also like

Flutter UI Testing with Patrol

Flutter UI Testing with Patrol

  • Thanks a lot!

    Wonder if you have some MVvM & BLOC/RIVERPOD/GETX integration tutorial…
    I’m kind of new to flutter looking for that, not really sure if it’s possible or maybe i’m wrong…

    Greetings from Mexico!

    Reply

  • Hi, Neat post. There is a problem along with your website in internet explorer, would test this텶E still is the market chief and a good section of other folks will pass over your magnificent writing due to this problem.

    Reply

  • hello!,I really like your writing so a lot! share we keep up a correspondence extra approximately your post on AOL? I need an expert in this house to unravel my problem. May be that is you! Taking a look ahead to see you.

    Reply

  • Hi, Neat post. There’s an issue together with your web site in internet explorer, may test this텶E still is the marketplace chief and a good component of people will pass over your fantastic writing due to this problem.

    Reply

  • I have been browsing online more than three hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my view, if all website owners and bloggers made good content as you did, the internet will be a lot more useful than ever before.

    Reply

  • I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an impatience over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike.

    Reply

  • you are in reality a just right webmaster. The site loading velocity is incredible. It seems that you are doing any unique trick. In addition, The contents are masterwork. you have performed a wonderful task on this topic!

    Reply

  • you are in reality a just right webmaster. The site loading velocity is incredible. It seems that you are doing any unique trick. In addition, The contents are masterwork. you have performed a wonderful task on this topic!

    Reply

  • Thank you, I have just been searching for information approximately this topic for a while and yours is the best I have found out so far. However, what in regards to the bottom line? Are you certain concerning the supply?

    Reply

  • you are in reality a just right webmaster The site loading velocity is incredible It seems that you are doing any unique trick In addition The contents are masterwork you have performed a wonderful task on this topic

    Reply

  • Simply wish to say your article is as amazing The clearness in your post is just nice and i could assume youre an expert on this subject Well with your permission let me to grab your feed to keep updated with forthcoming post Thanks a million and please carry on the gratifying work

    Reply

  • Wow amazing blog layout How long have you been blogging for you made blogging look easy The overall look of your web site is magnificent as well as the content

    Reply

  • Its like you read my mind You appear to know so much about this like you wrote the book in it or something I think that you can do with a few pics to drive the message home a little bit but instead of that this is excellent blog A fantastic read Ill certainly be back

    Reply

  • obviously like your website but you need to test the spelling on quite a few of your posts Several of them are rife with spelling problems and I to find it very troublesome to inform the reality on the other hand Ill certainly come back again

    Reply

  • Just wish to say your article is as surprising The clearness in your post is just cool and i could assume youre an expert on this subject Fine with your permission allow me to grab your RSS feed to keep updated with forthcoming post Thanks a million and please keep up the enjoyable work

    Reply

  • I loved as much as you will receive carried out right here The sketch is attractive your authored material stylish nonetheless you command get got an impatience over that you wish be delivering the following unwell unquestionably come more formerly again since exactly the same nearly a lot often inside case you shield this hike

    Reply

  • Its like you read my mind You appear to know so much about this like you wrote the book in it or something I think that you can do with a few pics to drive the message home a little bit but other than that this is fantastic blog A great read Ill certainly be back

    Reply

  • PEX Pipes in Iraq Elite Pipe Factory in Iraq is renowned for its high-quality PEX pipes, designed for both residential and commercial plumbing systems. Our PEX pipes offer excellent flexibility, durability, and resistance to temperature fluctuations, making them a versatile choice for various applications. As one of the best and most reliable manufacturers in Iraq, Elite Pipe Factory ensures that our PEX pipes are produced to the highest standards, delivering exceptional performance and reliability. For detailed information about our PEX pipes, visit elitepipeiraq.com.

    Reply

  • Fiber Optic Cable Conduit ElitePipe Factory in Iraq offers Fiber Optic Cable Conduits designed to protect and manage fiber optic cables with precision. Our conduits are constructed to ensure minimal signal loss and maximum protection against physical damage and environmental factors. With a focus on maintaining high performance and reliability, our fiber optic cable conduits are crucial for modern communication infrastructures. Renowned for our dedication to quality, ElitePipe Factory is one of the most reliable manufacturers in Iraq, providing conduits that meet international standards. Discover more about our products at elitepipeiraq.com.

    Reply

  • أنابيب الخرسانة المسلحة في العراق يوفر مصنع إيليت بايب أنابيب الخرسانة المسلحة المثالية لتحمل الأحمال العالية والظروف القاسية في مشاريع البنية التحتية. تم بناء هذه الأنابيب باستخدام تقنيات التعزيز المتقدمة لضمان المتانة والاعتمادية. كأحد أفضل المصانع في العراق، يضمن مصنع إيليت بايب أن أنابيب الخرسانة المسلحة الخاصة بنا تلتزم بجميع المعايير اللازمة وتوفر أداءً استثنائيًا. لمزيد من المعلومات، قم بزيارة elitepipeiraq.com.

    Reply

  • Family Dollar naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.

    Reply

  • شركة Bwer هي أحد الموردين الرئيسيين لموازين الشاحنات ذات الجسور في العراق، حيث تقدم مجموعة كاملة من الحلول لقياس حمولة المركبات بدقة. وتغطي خدماتها كل جانب من جوانب موازين الشاحنات، من تركيب وصيانة موازين الشاحنات إلى المعايرة والإصلاح. تقدم شركة Bwer موازين شاحنات تجارية وموازين شاحنات صناعية وأنظمة موازين جسور محورية، مصممة لتلبية متطلبات التطبيقات الثقيلة. تتضمن موازين الشاحنات الإلكترونية وموازين الشاحنات الرقمية من شركة Bwer تقنية متقدمة، مما يضمن قياسات دقيقة وموثوقة. تم تصميم موازين الشاحنات الثقيلة الخاصة بهم للبيئات الوعرة، مما يجعلها مناسبة للصناعات مثل الخدمات اللوجستية والزراعة والبناء. سواء كنت تبحث عن موازين شاحنات للبيع أو الإيجار أو التأجير، توفر شركة Bwer خيارات مرنة لتناسب احتياجاتك، بما في ذلك أجزاء موازين الشاحنات والملحقات والبرامج لتحسين الأداء. بصفتها شركة مصنعة موثوقة لموازين الشاحنات، تقدم شركة Bwer خدمات معايرة موازين الشاحنات المعتمدة، مما يضمن الامتثال لمعايير الصناعة. تشمل خدماتها فحص موازين الشاحنات والشهادات وخدمات الإصلاح، مما يدعم موثوقية أنظمة موازين الشاحنات الخاصة بك على المدى الطويل. بفضل فريق من الخبراء، تضمن شركة Bwer تركيب وصيانة موازين الشاحنات بسلاسة، مما يحافظ على سير عملياتك بسلاسة. لمزيد من المعلومات حول أسعار موازين الشاحنات، وتكاليف التركيب، أو لمعرفة المزيد عن مجموعة موازين الشاحنات ذات الجسور وغيرها من المنتجات، تفضل بزيارة موقع شركة Bwer على الإنترنت على bwerpipes.com

    Reply

  • شركة Bwer هي أحد الموردين الرئيسيين لموازين الشاحنات ذات الجسور في العراق، حيث تقدم مجموعة كاملة من الحلول لقياس حمولة المركبات بدقة. وتغطي خدماتها كل جانب من جوانب موازين الشاحنات، من تركيب وصيانة موازين الشاحنات إلى المعايرة والإصلاح. تقدم شركة Bwer موازين شاحنات تجارية وموازين شاحنات صناعية وأنظمة موازين جسور محورية، مصممة لتلبية متطلبات التطبيقات الثقيلة. تتضمن موازين الشاحنات الإلكترونية وموازين الشاحنات الرقمية من شركة Bwer تقنية متقدمة، مما يضمن قياسات دقيقة وموثوقة. تم تصميم موازين الشاحنات الثقيلة الخاصة بهم للبيئات الوعرة، مما يجعلها مناسبة للصناعات مثل الخدمات اللوجستية والزراعة والبناء. سواء كنت تبحث عن موازين شاحنات للبيع أو الإيجار أو التأجير، توفر شركة Bwer خيارات مرنة لتناسب احتياجاتك، بما في ذلك أجزاء موازين الشاحنات والملحقات والبرامج لتحسين الأداء. بصفتها شركة مصنعة موثوقة لموازين الشاحنات، تقدم شركة Bwer خدمات معايرة موازين الشاحنات المعتمدة، مما يضمن الامتثال لمعايير الصناعة. تشمل خدماتها فحص موازين الشاحنات والشهادات وخدمات الإصلاح، مما يدعم موثوقية أنظمة موازين الشاحنات الخاصة بك على المدى الطويل. بفضل فريق من الخبراء، تضمن شركة Bwer تركيب وصيانة موازين الشاحنات بسلاسة، مما يحافظ على سير عملياتك بسلاسة. لمزيد من المعلومات حول أسعار موازين الشاحنات، وتكاليف التركيب، أو لمعرفة المزيد عن مجموعة موازين الشاحنات ذات الجسور وغيرها من المنتجات، تفضل بزيارة موقع شركة Bwer على الإنترنت على bwerpipes.com

    Reply

  • Strands Hint naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.

    Reply

  • Nice blog here Also your site loads up very fast What host are you using Can I get your affiliate link to your host I wish my site loaded up as quickly as yours lol

    Reply
    • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >