Flutter Custom Error Message - Flash Message

hello today i'll show you how to create a custom flash message or on flutter it called a snack bar pretty handy to show errors success or any warning message to the user if you like to follow along with me download the starting project the access directory contain all of our assets and the leave directory contains the main.dirt and flash message screen.dirt flash message screen is nothing just a simple screen with the center button we already have a snack bar wizard on flutter to show such error or warning messages to display it using scaffold messenger inside the snake but the content is a simple text if you click on the show message button at the bottom it shows a snack bar i know it looks pretty simple but don't worry we'll make it great first let's change the behavior floating is perfect again click on the button as you can see already looks much better wrap the text wizard with the container then set the height to 90 and the color to a red color click on the button for preview but it's not what you expected to fix that need to set the snag bar background color to transparent still it looks a bit weird because of the shadow set the elevation to zero everything is gone now no shadow or white border add a padding of 16 to the container to make the container rounded apply 20 border radius as you can see slowly we are getting in shape now wrap the text widget with a column add another text set the font size to 18 and color to white same for the next one font color is white and the font size is 12. least but not the least there will be max two lines of text also set the overflow to text overflow dot ellipses set the alignment to start we need free space on the left side to place bubbles and close icon wrap the column with a row define a size box and set the width to 48 also wrap the column with the expanded wizard now we have a good amount of free space on the left side to place the bubbles wrap the whole container with a stack wizard the bubble is a simple as busy image but clutter does not support sbz by default i already added the flutter as busy package to the starting project now copy the image path then add it after the container wizard let's see how it looks set the height to 48 and width to 40 and set the color to more deep red we want our bubble to the bottom left side for that wrap it with the position wizard and set the bottom to zero as you can see the bottom left corner is not rounded anymore let's make it rounded by setting the border radius at the bottom left to 20 perfect we're almost there last but not least add another sbz call failed.sbz and set the height to 40. we want it to the top left corner to make it happen wrap the image with a positioned wizard and set the top to minus 20 and left 0. now we have a problem to fix that set stack clip behavior to none to place close icon on this top bubble wrap it with a stack wizard inside the children add an sbz image called close.sbz and set the height to 16. the close icon on the top right corner to make it center set the stack alignment to center still it's not center now wrap the close icon with the position wizard then set top is equal to 10 yeah now it's perfect let's add a proper hero text something like email is already used it would be better if we had more space between those two lines add a spacer and we have it now we are almost done let's remove those underlines by adding const we're 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 gonna call it custom snack bar content create a required parameter for error text then pass the error i hope you love this video you can check our premium shop ui kit link in the description [Music] [Applause] [Music] [Music] oh [Music] you

Channel: The Flutter Way

Views: 65,685

Keywords: flutter, Android App, iOS app, mobile app, UI speed code, flutter app design, flutter responsive ui

Id: UWXC0DHIIfQ

Length: 5min 27sec (327 seconds)

Published: Tue May 10 2022