Flutter - Snackbar - GeeksforGeeks

15 May, 2022
Snackbar is a widget provided by flutter to display a dismissible pop-up message on your application. It is used to show users if certain actions take place in our applications. For example, if the user login process fails due to some reason, so to inform the user to try again we can use snackbar. It pops up on the screen, and it can also perform operations like undoing the action which has taken place. Snackbar displays the informative message for a very short period of time and when the time is completed it disappears on its own. The recommended onscreen time for a snackbar is 5-10s. It is provided in the material package of the flutter libraries. You need to import “package:flutter/material.dart” to use a snackbar.
SnackBar({Key key, 
@required Widget content, 
Color backgroundColor, 
double elevation, 
EdgeInsetsGeometry margin, 
EdgeInsetsGeometry padding, 
double width, 
ShapeBorder shape, 
SnackBarBehavior behavior, 
SnackBarAction action, 
Duration duration: _snackBarDisplayDuration, 
Animation<double> animation, 
VoidCallback onVisible})
action: Action to perform based on snackbar.animation: Entry and the exit animation of snackbar.backgroundcolor: Snackbar background color behavior: Behavior and location of snackbar.content: Content of snackbar.duration: The amount of time snackbar should be displayed.elevation: Elevates the snackbar by increasing shadow.margin: Space around snackbar.onVisible: Called the first time that the snackbar is visible within a scaffold.padding: space around content inside snackbar.shape: Shape of snackbar.width: Width of snackbar.
action: Action to perform based on snackbar.
animation: Entry and the exit animation of snackbar.
backgroundcolor: Snackbar background color 
behavior: Behavior and location of snackbar.
content: Content of snackbar.
duration: The amount of time snackbar should be displayed.
elevation: Elevates the snackbar by increasing shadow.
margin: Space around snackbar.
onVisible: Called the first time that the snackbar is visible within a scaffold.
padding: space around content inside snackbar.
shape: Shape of snackbar.
width: Width of snackbar.
1. Create a Scaffold Widget: A Snackbar is displayed inside a scaffold widget that is used to create the entire visible screen of your mobile application. It provides the appbar, title, and other properties of the body that all together makes up the widget tree.
 Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),

    );
2. Create a Snackbar class: Create a stateless widget class that will represent your snackbar and the actions it is performing. Inside this class create a button it may be elevated, raised or flat, and assign a look to it, For Example: color, text, onhover effect etc. Create a final property and return Snackbar to it, that will hold all the actions that are going to be performed when the button is clicked. 
class snackBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
          child: Text('Click Here!'),
          color: Colors.green,
          onPressed: () {
            final snackdemo = SnackBar(
              content: Text('Hii this is GFG\'s SnackBar'),
              backgroundColor: Colors.green,
              elevation: 10,
              behavior: SnackBarBehavior.floating,
              margin: EdgeInsets.all(5),
            ),
          }),
    );
  }
}
3. Display the Snackbar: Use the Scaffold Messenger class to display the information contained by your snackbar. It uses a context provided by the BuilContext argument. Here, snackdemo is the final property that holds the snackbar.
  Scaffold.of(context).showSnackBar(snackdemo);
4. Call your Class: Finally, Inside the body of the scaffold call the stateless class you created for your snackbar.
Scaffold(
      appBar: AppBar(
        title: Text(title),
        backgroundColor: Colors.green,
      ),
      body: snackBarDemo(),
    );
  }
}
File: main.dart
Dart
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget {  static const header = 'GeeksforGeeks';   @override  Widget build(BuildContext context) {    return const MaterialApp(      title: header,      home: MyHomePage(title: header),    );  }} class MyHomePage extends StatelessWidget {  const MyHomePage({Key? key, required this.title}) : super(key: key);   final String title;   @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(        title: Text(title),        backgroundColor: Colors.green,      ),      body: snackBarDemo(),    );  }} class snackBarDemo extends StatelessWidget {  @override  Widget build(BuildContext context) {    return Center(      child: RaisedButton(          child: Text('Click Here!'),          color: Colors.green,          onPressed: () {            final snackdemo = SnackBar(              content: Text('Hii this is GFG\'s SnackBar'),              backgroundColor: Colors.green,              elevation: 10,              behavior: SnackBarBehavior.floating,              margin: EdgeInsets.all(5),            );            Scaffold.of(context).showSnackBar(snackdemo);          }),    );  }}
Output:
rharshitaaa21
Flutter UI-components
Flutter-widgets
Android
Dart
Flutter
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Resource Raw Folder in Android Studio
Flutter - Custom Bottom Navigation Bar
How to Read Data from SQLite Database in Android?
Retrofit with Kotlin Coroutine in Android
How to Post Data to API using Retrofit in Android?
Flutter - DropDownButton Widget
Listview.builder in Flutter
Flutter - Asset Image
Splash Screen in Flutter
Flutter - Custom Bottom Navigation Bar