Snackbar, Snackbar Everywhere

#dart #snackbar #flutter #instagram

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

Create a fresh new flutter project:

flutter create snackbar_snackbar_everywhere

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

	import 'package:flutter/material.dart';

	void main() => runApp(
	MaterialApp(
	home: Scaffold(
	body: ListView.builder(
	itemBuilder: (_, index) {
	final key = GlobalKey<ScaffoldState>();
	return ListTile(
	onTap: () {
	key.currentState.showSnackBar(
	SnackBar(
	content: Text('$index bookmarked'),
	),
	);
	},
	title: Container(
	margin: const EdgeInsets.all(16),
	height: 200,
	child: Scaffold(
	key: key,
	backgroundColor: Colors.black12,
	body: Center(
	child: Text(
	index.toString(),
	style: const TextStyle(
	fontSize: 60,
	),
	),
	),
	),
	),
	);
	},
	),
	),
	),
	);

view raw main.dart hosted with ❤ by GitHub

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