Flutter - Snackbar

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 that has taken place. Snackbar displays the informative message for a very short 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.

Note: You need to import "package:flutter/material.dart" to use a snackbar.

Constructor for SnackBar

SnackBar SnackBar({
 Key? key,
 required Widget content,
 Color? backgroundColor,
 double? elevation,
 EdgeInsetsGeometry? margin,
 EdgeInsetsGeometry? padding,
 double? width,
 ShapeBorder? shape,
 HitTestBehavior? hitTestBehavior,
 SnackBarBehavior? behavior,
 SnackBarAction? action,
 double? actionOverflowThreshold,
 bool? showCloseIcon,
 Color? closeIconColor,
 Duration duration = _snackBarDisplayDuration,
 Animation<double>? animation,
 void Function()? onVisible,
 DismissDirection? dismissDirection,
 Clip clipBehavior = Clip.hardEdge,
})

Properties of SnackBar

Steps to Create a Snackbar

Step 1: Create a Scaffold Widget

A Snackbar is displayed inside a scaffold widget that is used to create the entire screen of your mobile application. It provides the appbar, title, and other properties of the body that all together makes up the widget tree.

Step 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 ElevatedButton or TextButton 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. 

Step 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.

Step 4: Call your Class

Finally, Inside the body of the scaffold call the stateless class you created for your snackbar.

Complete Source Code

main.dart:

Output: