Show Create Material Style SnackBar in Flutter Android iOS Example Tutorial

SnackBar is like a Toast message for mobile applications but lighter than other notifying messages. SnackBar is a light weight message with Message Text and a Undo or Hide button shows at the bottom of screen. SnackBar is mainly used to notify the app user with some text executed on a particular task. SnackBar shows at the bottom of screen but we have to be sure that it cannot overlap the other widgets like Floating Action Button. So in this tutorial we would Show and Create Material Style SnackBar in Flutter Android iOS Example Tutorial.

Contents in this project Create Material Style SnackBar in Flutter Android iOS Example Tutorial:

1. Import material.dart package in your app’s main.dart file.

2. Create void main runApp() method and call our main MyApp class here.

3. Create our main Root class named as MyApp extends with StatelessWidget. In this class we would call another class named as SnackBarWidget(). We would create our SnackBar in next class.

4. Create another class named as SnackBarWidget extends with StatelessWidget. In this class we would make the SnackBar .

5. Create a function named as showSnackBar() with application context. In this function we would make a SnackBar using Final variable and call it using Scaffold.of(context).showSnackBar(snackBar) method.

6. Create a Raised Button widget in Widget build area in SnackBarWidget class. We would call the showSnackBar() function on Button click event.

7. Complete source code for main.dart file:

Screenshots in Android device:

Screenshots in iOS device:

Create Material Style SnackBar in Flutter Android iOS Example Tutorial

Leave a Reply

Your email address will not be published.