Flutter Tutorial - Toast Message | A Different SnackBar

display toast messages to the user at the bottom top or center location of the screen if you are new here subscribe to my channel and make sure to watch this video till the end let's use this package flutter toast to display toast messages within our flutter app therefore i have created here an elevated button which you see here on the right side show toast and if we click on this button we call here this message show toast inside of it we can then use this package to display a toast and here you can then define a message and also the size of how big this message should be displayed let's try it out so here we have then a toast message displayed and the cool thing is that this message is displayed globally so even if you close your app you see still this message so when should you use toast messages normally toast messages are used by the operating system for displaying messages within your own flutter app you could use them for displaying app white messages such as if i now click here on this button you see successful update to a specific version and this is an app white message on the other hand we also have snack bars and they are always displayed if it is related to a user interaction which means if the user clicked for example to delete an item within your list then a snack bar is displayed about that the item was removed from the list and you can also undo then the change and also put it again back to the list so all in all display snack bars if it is related to a user activity within a specific screen and display toast messages if it is for app-wide messages that can be displayed on any screen you can also change the location of this toast message so you can display it for example at the top location then it is displayed here you also have your center and center left and center right so you have your many options and by default we have then bottom which is then here displayed at the bottom the user cannot interact with a toast message so you cannot click on it you cannot swipe it away however what we can do is we can also call here flutter toast cancel and now if i click on show toast and then on cancel it will immediately disappear if you like you can also specify the background color and also the text color of your toast so here i have now a red background color which we have here defined let's also build our custom toast message and therefore we create here basically a new widget and we give it then a green color and here inside we supply then here a text and an icon which are displayed next to each other if you like you can also put it here inside of a box decoration you can supply some padding so that we have some space around and here within this box decoration you can also make it rounded next we want to display this widget-based toast message and therefore you need to take you this time another approach so you need to create first of all an instance of your flutter toast package and secondly you need to initialize here then this toast and therefore you need to have a build context so in case you want to display here widgets as a toast message then you need to have a build context otherwise it is not working and now i have created here two methods show bottom toast and also show top toast and here inside we can then basically call our instance which we have created here at the top and inside of this child widget we simply put then our toast inside that we have created before let's try it out so here we display then our custom toast message which we have created with this widget and you can also display it here at the top location exactly what we have learned before so you can also display it here at the top location this time if a toast message is displayed and you go outside of this app then it is not global so this widget-based toast message is not global and finally if you like you can also precise here the position of your toast message so you have your disposition toast builder and here with this position widget you can then specify where it should be displayed so in this case 150 pixels away from the top so let's try it out so here 150 pixels from the top of the screen it is then displayed you can also change it so for example 250 and then it is displayed more at the bottom if you now click here multiple buttons then the message is cute so i don't need to do here anything anymore and you see it is still continuing displaying the toast messages in case you want to remove the cute toast messages then you can simply call here this method and now let's try it again out so i click here on multiple buttons and then i click here on remove and then you see that we are not displaying any toast messages anymore and by the way if you want to get here this whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer if you like this video make sure to subscribe to my youtube channel you

Channel: HeyFlutter․com

Views: 23,988

Keywords: android, dart, flutter, flutter show toast, flutter snackbar, flutter toast, flutter toast not working, flutter toast vs snackbar, flutter tutorial, flutter tutorial for beginners, how to, how to create toast in flutter, how to show custom toast dialog in flutter, ios, mobile app, pop up message, pop up messages in app, snackbar, toast android, toast flutter, toast ios, toast without context

Id: o2tq4RMcAJw

Length: 5min 17sec (317 seconds)

Published: Wed Jul 07 2021