Floating Action Button and Snack Bar in Flutter

This is the tenth lesson of the Flutter series. Today we are going to learn on adding floating action button and snack bar in Flutter UI.

Floating Action Button

Here we have used icon as add icon and when we long click on ‘Add one more item’ tooltip will be appeared. You can use debugPrint to ensure that the floating action button is working.

Snack Bar

Let us define a function to show the snack bar first. Then we can define snack bar using the constructor. We can define the content as text. Now we can use a special statement as follows.

Scaffold.of(context).showSnackBar(snackBar);

Now this method requires the build context of the scaffold.

Your output is as follows.

We are done with floating action button and snack bar in Flutter. Hope you got some understanding on this. See you in another article. Happy learning!!!

Hirudini Udugama