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


Discussion (0)