Flutter 2.5 Tutorial - How To Use New Material Banner Widget | Scaffold Messenger

how to add a persistent material banner to the top of your scaffold in flutter the banner can also include one or even multiple actions for the user let's start with an elevated button and if we click on this button here on the right side then we want to call the message show banner and inside of this method you can then call on your scaffold messenger the method show material banner and inside of this method you put then a material banner widget next to the background color of the material banner you can also supply here the main content which is normally a text widget and you can also set here that style for this text widget by supplying the content text style and lastly you also need to add here mandatory some actions therefore we want to create here a simple text button and with this if we click on this button then we display here a material banner and like you notice on the left side we display then the content and on the right side we have this dismiss button which we have defined over this actions property if we now click on this dismiss button then nothing is happening and therefore we go inside of this on press center and here you can also call on your scaffold messenger the height current material banner method make sure to click on hot restart and with this if we click on this dismiss button we hide our material banner alternatively you can also add here multiple actions therefore i define here another text button with the text set timer and secondly you could also include here some padding which is some spacing around our main widgets and with this we have here to action buttons and if you have at least two action buttons then they are displayed here under our content next you can also integrate here a leading icon therefore you have here the leading property where i set some icon inside and with this we have here this icon on the left side of our content and you could also set here the space between your icon and your content and therefore you have here the leading padding where i set right now a space of 24 pixels and with this we have here 24 pixels in space between importantly we can only display here one material banner at a time which means if i try to also show here another banner by clicking on the show banner button then this is not displayed first of all the previous banner needs to be dismissed before the other banner can then show up if you want to show your important banner directly then you also need to add here to the scaffold simply this remove current material banner method and with this our existing banner will be deleted if we click here on the show banner button method and the important banner will then show immediately and by the way if you want to get here this whole source code of this example 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 [Music]

Channel: HeyFlutter․com

Views: 7,661

Keywords: android, ios, flutter material banner, banner ads, banner ad, flutter widgets, flutter tutorial, banner widget, banners in flutter, flutter banners, banner widget flutter, flutter info banner, flutter display banner, fluter show banner, flutter tutorial for beginners, widget, flutter widget, banner, flutter badge, flutter badges, banner ads flutter

Id: WXmvbsEhMWk

Length: 3min 13sec (193 seconds)

Published: Thu Sep 09 2021