SnackBar Widget in Flutter
Whenever you are going to code for building anything in Flutter, it will be inside a widget. each element on the screen of the Flutter application is a widget. The screen’s perspective entirely relies on the choice and grouping of the widgets used to build the application. Also, the structure of the code of an application is a tree of widgets.
In this blog, we will understand the static and custom SnackBar widget and its functionality in the flutter. We will see in this implementation of a simple demo program on the SnackBar Widget.
Table Contents:
SnackBar:
In Flutter the SnackBar is a widget that lightweight pop up a quick message in your app that briefly signifies the user when something happened. Using a SnackBar you pop up a message for a few seconds at the bottom of your app.
By default, the snack bar displays at the bottom of the screen, and when the specified time is completed, it will be disappeared from the screen and we can make a custom snack bar also and It contains some actions that allow the user to add or remove any action and images. SnackBar requires a Scaffold, with a Scaffold instance and your SnackBar will instantly pop up. it’s easy to get a reference of your scaffold at any point in your widget tree by using the scaffold. of function.
Demo Module :
How to implement code in dart file :
You need to implement it in your code respectively:
First, In this dart file, I have created two buttons, the first button is for showing the default SnackBar and the second one is for the custom SnackBar.I am going to introduce first the Default SnackBar.
There are two steps for displaying a SnackBar. First, you have to create a SnackBar which can be done by calling the following constructor. it is very simple to use. here is the code.final snackBar = SnackBar(content: Text(‘Yay! A DefaultSnackBar!’));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
But some of our requirements are not met, by default SnackBar .so May custom SnackBar is doing it. For custom SnackBar, I have to use a Flushbar dependency. it is a very congruent dependency to design your custom SnackBar upon your choice.
First, add the dependency of the SnackBar in pubspec.yaml
another_flushbar: ^1.10.24And then have to create a method for showing the custom SnackBar.
void showFloatingFlushbar( {@required BuildContext? context,
@required String? message,
@required bool? isError}){
Flushbar? flush;
bool? _wasButtonClicked;
flush = Flushbar<bool>(
title: "Hey User",
message: message,
backgroundColor: isError! ? Colors.red : Colors.blueAccent,
duration: Duration(seconds: 3),
margin: EdgeInsets.all(20),
icon: Icon(
Icons.info_outline,
color: Colors.white,),
mainButton: FlatButton(
onPressed: () {
flush!.dismiss(true); // result = true
},
child: Text(
"ADD",
style: TextStyle(color: Colors.amber),
),
),) // <bool> is the type of the result passed to dismiss() and collected by show().then((result){})
..show(context!).then((result) {
});
}When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:another_flushbar/flushbar.dart';
import 'package:flutter/material.dart';
class SnackBarView extends StatefulWidget {
const SnackBarView({Key? key}) : super(key: key);
@override
_SnackBarViewState createState() => _SnackBarViewState();
}
class _SnackBarViewState extends State<SnackBarView> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildSnackBarButton()
],
),
);
}
Widget _buildSnackBarButton() {
return Column(
children: [
Center(
child: InkWell(
onTap: (){
final snackBar = SnackBar(content: Text('Yay! A Default SnackBar!'));
ScaffoldMessenger.of(context).showSnackBar(snackBar);
},
child: Container(
height: 40,
width: 180,
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.all(Radius.circular(15))
),
child: Center(
child: Text("SnackBar",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),),
),
),
),
),
SizedBox(height: 10,),
Center(
child: InkWell(
onTap: (){
showFloatingFlushbar(context: context,
message: 'Custom Snackbar!',
isError: false);
// showSnackBar(
// context: context,
// message: 'Custom Snackbar!',
// isError: false);
},
child: Container(
height: 40,
width: 180,
decoration: BoxDecoration(
color: Colors.pinkAccent,
borderRadius: BorderRadius.all(Radius.circular(15))
),
child: Center(
child: Text("Custom SnackBar",
style: TextStyle(
color: Colors.white,
fontSize: 16,
),),
),
),
),
),
],
);
}
}
void showFloatingFlushbar( {@required BuildContext? context,
@required String? message,
@required bool? isError}){
Flushbar? flush;
bool? _wasButtonClicked;
flush = Flushbar<bool>(
title: "Hey User",
message: message,
backgroundColor: isError! ? Colors.red : Colors.blueAccent,
duration: Duration(seconds: 3),
margin: EdgeInsets.all(20),
icon: Icon(
Icons.info_outline,
color: Colors.white,),
mainButton: FlatButton(
onPressed: () {
flush!.dismiss(true); // result = true
},
child: Text(
"ADD",
style: TextStyle(color: Colors.amber),
),
),) // <bool> is the type of the result passed to dismiss() and collected by show().then((result){})
..show(context!).then((result) {
});
}
void showSnackBar(
{@required BuildContext? context,
@required String? message,
@required bool? isError}) {
final snackBar = SnackBar(
content: Text(
message!,
style: TextStyle(fontSize: 14.0, fontWeight: FontWeight.normal),
),
duration: Duration(seconds: 3),
backgroundColor: isError! ? Colors.red : Colors.green,
width: 340.0,
padding: const EdgeInsets.symmetric(
horizontal: 8.0,
),
behavior: SnackBarBehavior.floating,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
action: SnackBarAction(
label: 'Undo',
textColor: Colors.white,
onPressed: () {},
),
);
ScaffoldMessenger.of(context!).showSnackBar(snackBar);
}Conclusion:
In this article, I have explained the basic overview of the SnackBar Widget in a flutter, you can modify this code according to your choice. This was a small introduction to SnackBar Widget On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Explore, SnackBar Widget in your flutter projects.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the Flutter SnackBar Demo:
GitHub – flutter-devs/flutter_snackbar_demo
Permalink Failed to load the latest commit information. A new Flutter project. This project is a starting point for a…github.com
Feel free to connect with us
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
