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.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and call our main MyApp class here.
|
1 |
void main() => runApp(MyApp()); |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('SnackBar in Flutter'), ), body: SnackBarWidget(), ), ); } } |
4. Create another class named as SnackBarWidget extends with StatelessWidget. In this class we would make the SnackBar .
|
1 2 3 4 |
class SnackBarWidget extends StatelessWidget { } |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
showSnackBar(BuildContext context){ final snackBar = SnackBar( content: Text('Yay! A SnackBar Example!'), action: SnackBarAction( label: 'Undo', onPressed: () { // Put Your Code Here which you want to execute on Undo button Click. }, ), ); Scaffold.of(context).showSnackBar(snackBar); } |
6. Create a Raised Button widget in Widget build area in SnackBarWidget class. We would call the showSnackBar() function on Button click event.
|
1 2 3 4 5 6 7 8 |
Widget build(BuildContext context) { return Center( child: RaisedButton( onPressed: () {showSnackBar(context);}, child: Text('Click Here To Show SnackBar'), ), ); } |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('SnackBar in Flutter'), ), body: SnackBarWidget(), ), ); } } class SnackBarWidget extends StatelessWidget { showSnackBar(BuildContext context){ final snackBar = SnackBar( content: Text('Yay! A SnackBar Example!'), action: SnackBarAction( label: 'Undo', onPressed: () { // Put Your Code Here which you want to execute on Undo button Click. }, ), ); Scaffold.of(context).showSnackBar(snackBar); } @override Widget build(BuildContext context) { return Center( child: RaisedButton( onPressed: () {showSnackBar(context);}, child: Text('Click Here To Show SnackBar'), ), ); } } |
Screenshots in Android device:
Screenshots in iOS device:
