Creating a SnackBar
Create a Scaffold
A Snackbar is presented inside a scaffold widget, which is used to design your mobile app's full visible screen. It is responsible for the appbar, title, and other body attributes that make up the widget tree.
Scaffold(
appBar: AppBar(
title: Text(' Flutter SnackBar Example'),
),
body: SnackBarPage(),
);
Display a SnackBar
Display a SnackBar after the Scaffold is in place. Create a SnackBar first, then use ScaffoldMessenger to show it.
final snackBar = SnackBar(content: Text(' HELLO!! THIS IS A SNACKBAR'));
// Here, we use the scaffold widget to show a snack bar.
Scaffold.of(context).showSnackBar(SnackBar);
Provide an optional action
When the SnackBar appears, you might wish to provide the user a choice. For example, if a user deletes a message by accident, they may retrieve it via an optional action in the SnackBar.
Here's an example of how to give the SnackBar widget a new action:
final snackBar = SnackBar(
content: Text('HELLO!! THIS IS A SNACKBAR'),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// code to undo the change.
},
),
);
Let's now look at the complete code for the preceding phases. Replace the following code in the main.dart file. This code includes a button, which when clicked by the user, displays the snack bar message. It also has options for undoing and redoing the modifications.
import 'package:flutter/material.dart';
void main() {
runApp(SampleApp());
}
class SampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: new ThemeData(
primaryColor: const Color(0xFF43a047),
accentColor: const Color(0xFFffcc00),
primaryColorBrightness: Brightness.light,
),
home: Scaffold(
appBar: AppBar(
title: Text('Flutter SnackBar Example'),
),
body: SnackBarPage(),
),
);
}
}
class SnackBarPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: RaisedButton(
child: Text(
'Click to See SnackBar',
style: TextStyle(fontSize: 30.0),
),
textColor: Colors.white70,
color: Colors.deepOrangeAccent,
padding: EdgeInsets.all(10.0),
splashColor: Colors.brown.shade400,
onPressed: () {
final snackBar = SnackBar(
content: Text('HELLO!! THIS IS A SNACKBAR.'),
duration: Duration(seconds: 5),
action: SnackBarAction(
label: 'Undo',
onPressed: () {
// Some code to undo the change.
},
),
);
Scaffold.of(context).showSnackBar(snackBar);
},
),
);
}
}
Output
When we execute this program, the UI of the screen will appear as seen in the image below.

When we click the "Click to See SnackBar" button, the message appears at the bottom of the screen. After the stated time has passed, this message will be automatically erased. Look at the image below:

Frequently Asked Questions
How do you create a SnackBar class in Flutter?
In flutter, we can create a snackbar by invoking its function Object() { [native code] }. The only attribute that is necessary to construct a snackbar is content. We usually utilize a Text widget for content since we need to show the viewer something. If we wish, we may utilize other widgets instead.
How do I get rid of SnackBar Flutter?
You may hide the current SnackBar before it expires by using ScaffoldMessenger.of(ctx). hideCurrentSnackBar();
What is the difference between toast and snackbar?
Snackbars include a single line of text that is directly connected to the action taken. There may be a text action, but there are no icons. Toasts are mostly used for system messages (android only). They appear at the bottom of the screen as well, but they cannot be swiped off.
Conclusion
In this article, we have extensively discussed the Flutter Snackbar. We learned what a snackbar is, its properties and how to create a SnackBar in Flutter.
We hope that this blog has helped you enhance your knowledge of the flutter framework and if you would like to learn more about flutter, check out our articles at Flutter.
Refer to our Guided Path on Coding Ninjas Studio to upskill yourself in Data Structures and Algorithms, Competitive Programming, JavaScript, System Design, and many more! If you want to test your competency in coding, you may check out the mock test series and participate in the contests hosted on Coding Ninjas Studio! But if you have just started your learning process and are looking for questions asked by tech giants like Amazon, Microsoft, Uber, etc., you must look at the problems, interview experiences, and interview bundle for placement preparations.
Nevertheless, you may consider our paid courses to give your career an edge over others!
Do upvote our blogs if you find them helpful and engaging!
Happy Learning!