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
Property | Description |
|---|
action | An 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. |
|---|
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.
Dart
Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.green,
foregroundColor: Colors.white
),
body: //To be code
);
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.
Dart
class snackBarDemo extends StatelessWidget {
const snackBarDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green, foregroundColor: Colors.white),
onPressed: () {
const snackdemo = SnackBar(
content: Text('Hii this is GFG\'s SnackBar'),
backgroundColor: Colors.green,
elevation: 10,
behavior: SnackBarBehavior.floating,
margin: EdgeInsets.all(5),
);
ScaffoldMessenger.of(context).showSnackBar(snackdemo);
},
child: const Text(
'Click Here',
),
),
);
}
}
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.
Dart
Scaffold.of(context).showSnackBar(snackdemo);
Step 4: Call your Class
Finally, Inside the body of the scaffold call the stateless class you created for your snackbar.
Dart
Scaffold(
appBar: AppBar(
title: Text(title),
backgroundColor: Colors.green,
),
body: snackBarDemo(),
);
}
}
Complete Source Code
main.dart:
Dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
static const header = 'GeeksforGeeks';
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: header,
home: MyHomePage(title: header),
debugShowCheckedModeBanner: false,
);
}
}
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,
foregroundColor: Colors.white,
),
body: const snackBarDemo(),
);
}
}
// ignore: camel_case_types
class snackBarDemo extends StatelessWidget {
const snackBarDemo({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.green, foregroundColor: Colors.white),
onPressed: () {
const snackdemo = SnackBar(
content: Text('Hii this is GFG\'s SnackBar'),
backgroundColor: Colors.green,
elevation: 10,
behavior: SnackBarBehavior.floating,
margin: EdgeInsets.all(5),
);
ScaffoldMessenger.of(context).showSnackBar(snackdemo);
},
child: const Text(
'Click Here',
),
),
);
}
}
Output:
Similar Reads
Flutter Tutorial This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Google’s mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When
7 min read
Top 50 Flutter Interview Questions and Answers for 2025 Flutter is an open-source, cross-platform application development framework. It was developed by Google in 2017. It is used to build applications for Android, iOS, Linux, Mac, Windows, and the web. Flutter uses the Dart programming language. It provides a simple, powerful, efficient, and easy-to-und
15+ min read
What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and
5 min read
Flutter | An introduction to the open source SDK by Google Flutter is Google’s Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets – the blocks with which the flutter apps are built. They are structural elements that ship with a bunch
5 min read
Flutter - Architecture Application Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of
3 min read
Flutter - Changing App Icon Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be chan
3 min read
Flutter - AppBar Widget AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give
7 min read
Scaffold class in Flutter with Examples The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object ↳ Diagnosticable ↳ Diagnosticable Tree ↳ Widget ↳ StateFul Widget ↳ ScaffoldThe constructor of the
8 min read
Container class in Flutter Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas
8 min read
Flutter - Stateful vs Stateless Widgets The state of an app can very simply be defined as anything that exists in the memory of the app while the app is running. This includes all the widgets that maintain the UI of the app including the buttons, text fonts, icons, animations, etc. So now that we know what are these states let's dive dire
6 min read