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

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

Code — main.dart

• 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 scaffolds has 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