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
Floating SnackBar in Flutter The floating_snackbar in Flutter is used to display a temporary message to users, often as feedback after an action.We know how to show the snack bar in a flutter, but everybody wants the application must look more interactive and user-friendly, that's why we can use animations or new designs in the
3 min read
Flutter - Tabs Tabs are the part of the UI that navigates the user through different routes(ie, pages) when clicked upon. The use of tabs in applications is standard practice. Flutter provides a simple way to create tab layouts using the material library. In this article, we will be exploring the same in detail.To
2 min read
Flutter - Slidable Slidable in an application can be used to perform a wide range of tasks with just a simple swipe to either right or left on the tile. It not only makes the UI very user-friendly but also saves a lot of time in doing trivial tasks which if done in other ways can be hectic and redundant to design. In
4 min read
Flutter - Stack Widget The Stack widget in Flutter is a powerful tool that allows for the layering of multiple widgets on top of each other. While layouts like Row and Column arrange widgets horizontally and vertically, respectively, Stack provides a solution when you need to overlay widgets. For instance, if you want to
6 min read
Flutter - Tab Bar In this article, we see the Tab bar in Flutter. Tab Bar is mostly used in applications. So we will see how we can create the tab bar in flutter just because nowadays companies demand the flutter app the most. Tab Bar generally handle with the controller and in Flutter, there are many controllers lik
4 min read