In earlier tutorials  on Flutter we have got a basic idea of what’s flutter and how to start coding in flutter.In this part of the tutorial we will know how to code a Snack bar in flutter.

If you are new to flutter please visit my earlier tutorials on flutter to understand this tutorial much easily, Let’s get ahead.

 

Introduction:

A snack bar is a widget which is used to show/display a piece of message. To get it much easier in android we use Toast and in iOS we have alerts, to serve the same purpose these snack bars are introduced as a part of material design.

As you may have observed a toast earlier in android it doesn’t have any action, its just used to display a message.But this snack bar it also contains a action button.

 

Let’s Start Coding

 

Create a dart file as you create java file previously in android.

 

import the flutter package

 

then start with void main()  (as usual) declaration

 

then create a class

 

Here we have to return MaterialApp so as to add features to our app. This MaterialApp contains widgets we mostly use in our apps.

 

Now add a title and structure which is created using Scaffold, it contains appBar, bottomsheets, menu drawers and so on..

 

 

Now here comes the our snack bar implementation.

Create a class for snack bar which will help us to display a snack bar also make a action on it.

 

 

 

Now we need to add a button to display a Snackbar

 

 

add a title to button

 

And add a Snack-bar on button click

 

 

As we discussed earlier we need to perform a action on Snack-bar, we will hide it

 

 

And finally most important step a crucial one too… don’t forget to Show Snack bar

 

Snack Bar:

 

Full Code:

 

 

 

Output:

 

Show Buttons
Hide Buttons
Read previous post:
Android Kotlin tutorial on while loop || While Loop

Close