Display SnackBar at the top in Flutter apps

In this article we will discuss about how to add snackbar at the top in our flutter apps

🎥 Video Tutorial

🔭 Implementation

By default whenever we try to display the snackbar in our Flutter app, it appears at the bottom. But if there is use-case or scenario, where we were asked to display the snackbar at the top of our flutter app, near the app bar then this article is just for you!

We don’t need to add any packages for doing this. Moreover there isn’t any fixed or clear solutions for achieving the same. But yet there is a simple workaround, where we can play around with the margin values to get the job done.

→ Create a SnackBar

Let’s first create a default (which appears at the bottom) snackbar , that will be displayed upon button press event (as shown below👇).

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('SnackBar Demo'),
        backgroundColor: Colors.pink.withOpacity(0.7)…