Flutter Custom Error Message — Flash Message

Published in

ITNEXT

5 min readMay 16, 2022

I will show you how to create a custom flash message, or on Flutter, it is called a snack bar. Pretty handy to show error, success or any warning message to the user.

Video

Project Setup

If you like to follow along with me, download the starting project (complete project). The assets directory contains all of our assets & the lib directory contains the main.dart and flash_message_screen.dart.

Start Coding

FlashMessageScreen is nothing, just a simple screen with a center button.

We already have a SnackBar widget on Flutter to show such errors or warning messages. To display it using ScaffoldMessenger. Inside the SnackBar, the content is a simple text.

If you click on the show message button. At the bottom, it shows a snack bar. I know its looks pretty simple but don’t worry, we will make it great.

First, let’s change the behavior to SnackBarBehavior.floating. Wrap the Text widget with a Container, then set the height to 90 and the color to a red color. Add padding of 16 to the container. To make the corner rounded, apply a 20-border radius.

Click on the button for the preview, but it’s not what we expected!

To fix that need to set the SnackBar background color transparent and the elevation to 0.

Everything is gone. Now no shadow or white border.

Now wrap the Text widget with a Column, add another text, set the fontSize to 18, and color to white. Same for the next one, font color is white & the font size is 12 last but not the least there will be maxed 2 lines of text. Also, set overflow to TextOverflow.ellipsis. Set the crossAxisAlignment to CrossAxisAlignment.start.

We need free space on the left side to place bubbles and close icons. Wrap the Column with a Row, define a SizedBox and set the width to 48. also, wrap the column with an Expanded widget.

Now we have a good amount of free space on the left side.

To place the bubbles, wrap the whole Container with a Stack widget. The bubble is a simple SVG image, but Flutter does not support SVG by default. I already added the flutter_svg package to the starting project. Now copy the image path, then add it after the Container widget.

Set the height to 48 & width to 40, and set the color to more deep red. We want our bubbles to the bottom left side for that, wrap it with Positioned widget and set the bottom to 0. Let’s make it rounded by setting the border-radius at the bottom left to 20.

Perfect, we are almost there!

Last but not least, add another SVG image called failed.SVG and set the height to 40. We want it in the top left corner. To make it happen, wrap the image with Positioned widget and, set the top to -20 & left 0. Also set stack clipBehavior to Clip.none.

To place a close icon on this top bubble, wrap it with a Stack widget. Inside, the children add an SVG image called close.SVG and set the height to 16. The close icon on the top right corner to make it center sets the stack alignment to Alignment.center. Still, it’s not center, now wrap the close SVG image with the Position widget, then set top is equal to 10.

We are almost done.

We are done with our custom flash message on Flutter. You need to use this flash message in many places on any app. To make it reusable, let’s extract snack bar content. I’m going to call it CustomSnackBarContent. Create a required parameter for error text, then pass the error.