Flash Error Messages In Flutter
Flutter is a UI tool compartment for making quick, gorgeous, natively compiled applications for mobile, web, and desktop with one programing language and single codebase. It is free and open-source. It was at first evolved by Google and is presently overseen by an ECMA standard.
Flutter applications utilize the Dart programming language for making an application. The dart programming shares a few same highlights as other programming dialects, like Kotlin and Swift, and can be trans-ordered into JavaScript code.
In this article, we will explore the Flash Error Messages In Flutter. We will see how to implement a demo program. Learn how to create a different style of the flash error message, it is called a snack bar, and how it shows error, success, or any warning message to the user in your flutter applications.
Table Of Contents::
Introduction:
The below demo output shows how to create flash messages in flutter and shows how flash messages will work like a snack bar used in your flutter applications. We will show a user when clicking on the button and then, show a flash message with your styles, text, and design. It will be shown on your device.
Demo Module ::
Code Implement:
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main. dart file. Inside, we will create a MyHomePage() class. In this class, we will add a Column widget. In this widget, we will add crossAxisAlignment, mainAxisAlignment was the center. Inside, we will add an image and ElevatedButton().
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('assets/logo.png',height: 300,width: 350,),
Center(
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
content: Text(
'This Username is not found! Please try again later')));
},
child: const Text('Show Flash Error Message')),
),
],
),
Inside ElevatedButton, we will add style and onPressed function. In this function, we will create a simple SnackBar() method. In this method, we will add content that is equal to the text ‘This Username is not found! Please try again later. Also, we will add the child method. In this method, we will add the text ‘Show Flash Error Message’.
When we run the application, we ought to get the screen’s output like the underneath screen video.
Now, this time all are the same but only changes on SnackBar(). Inside the SnackBar(), we will add behavior is equal to the SnackBarBehavior.floating and content is equal to the Container widget. In this widget, we will add padding, height, and decoration box with the color blue and border-radius circular(15). In the child, we will add the text ‘This Username is not found! Please try again later.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar( SnackBar(
behavior: SnackBarBehavior.floating,
content: Container(
padding: const EdgeInsets.all(8),
height: 70,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: const Center(
child: Text(
'This Username is not found! Please try again later'),
),
),
));
},
child: const Text('Show Flash Error Message')),
When we run the application, we ought to get the screen’s output like the underneath screen video.
Last but not least, now this time we will other changes to SnackBar() on the ElevatedButton(). Inside, we will add a background color that was transparent, behavior is equal to the SnackBarBehavior.floating, elevation is 0 and content is equal to the Stack() widget. Inside the widget, we will add alignment in was center, clipBehavior was none. We will also add a Row widget. In this widget, we will add a Column. In this Column, we will add two text widgets.
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.cyan,
),
onPressed: () {
ScaffoldMessenger.of(context).showSnackBar(SnackBar(
backgroundColor: Colors.transparent,
behavior: SnackBarBehavior.floating,
elevation: 0,
content: Stack(
alignment: Alignment.center,
clipBehavior: Clip.none,
children: [
Container(
padding: const EdgeInsets.all(8),
height: 70,
decoration: const BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(15)),
),
child: Row(
children: [
const SizedBox(
width: 48,
),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
'Oops Error!',
style: TextStyle(
fontSize: 18, color: Colors.white),
),
Text(
'This Username is not found! Please try again later',
style: TextStyle(
fontSize: 14, color: Colors.white),
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
Positioned(
bottom: 25,
left: 20,
child: ClipRRect(
child: Stack(
children: [
Icon(
Icons.circle,
color: Colors.red.shade200,
size: 17,
)
],
),
)),
Positioned(
top: -20,
left: 5,
child: Stack(
alignment: Alignment.center,
children: [
Container(
height: 30,
width: 30,
decoration: const BoxDecoration(
color: Colors.red,
borderRadius:
BorderRadius.all(Radius.circular(15)),
),
),
const Positioned(
top: 5,
child: Icon(
Icons.clear_outlined,
color: Colors.white,
size: 20,
))
],
)),
],
),
));
},
child: const Text('Show Flash Error Message')),
Then, we will add a Positioned widget. In this widget, we will add the bottom is 25, and the left is 20. In this child, we will add ClipRRect, and inside we will add a circle icon. Also, we will create one more Positioned widget. In this widget, we will add a clear icon.
When we run the application, we ought to get the screen’s output like the underneath screen video.
Conclusion:
In the article, I have explained the Flash Error Messages basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Flash Error Messages 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 Flash Error Messages in your flutter projects. We will show you what the Introduction is?. Make a demo program for working Flash Error Messages in your flutter applications. So please try it.
❤ ❤ 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.
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.
