DEV Community

Tirth Patel
Tirth Patel

Posted on • Originally published at Medium on

Snackbar, Snackbar Everywhere

Photo by Sam 🐷 on Unsplash

On Instagram when you bookmark a photo, it shows a snackbar on top of it. Today, we’re going to build a similar experience in Flutter without using any external dependencies & with minimal code!

So, let’s get started. 🍕🍫

👀 Demo

Demo

Create a fresh new flutter project:

flutter create snackbar_snackbar_everywhere
Enter fullscreen mode Exit fullscreen mode

After that, remove everything from main.dart & paste the following content:

  • In this code, we start off with the MaterialApp & the main Scaffold.
  • The main Scaffold’s body contains a ListView.
  • Each ListTile consists of a Container whose child is another Scaffold.
  • Each of these child scaffold’s have a unique GlobalKey so that a SnackBar can be shown using that key whenever ListTile is tapped 🐍.
  • You can play around with the code on this dartpad ** 🎯**.

That’s it for this one. Thank you for reading this 💙

You can find the complete source code in the above gist or dartpad.

If you find this byte-sized post useful, press👏 button as many times as you can and share this post with others. You can leave your feedback/suggestions in the comments 💬 below.

For any other issues feel free to reach out to me via Twitter: https://twitter.com/piedcipher


Top comments (1)

Collapse
 
joshua_collins_6e5771497c profile image
Joshua Collins

With everyone talking about snacks popping up everywhere, one thing I’ve started keeping on hand is cheap protein bars. They’re handy when you want something quick that isn’t just empty calories. I’ve tried a few from Strong Muscle Supplements (strongmusclesupplements.co.uk/product-category/protein-bars/) and they’ve been decent for the price - easy to throw in a bag, decent macros and way better than grabbing whatever sugary snack is nearby. Might be worth a look for anyone trying to keep their snacking a bit more on the healthy side without spending loads.