Flutter Tutorial - SnackBar - Deep Dive

snack bars are great for displaying information to the user so you can show error messages and other messages to the user and this is what we want to build in this tutorial we start here with this application where we have four different snack bars and we want to start with the action snack bar therefore i have created here a button and every time if we click on it then we execute here this method and inside of this method we want to create the snack bar which comes from the flutter sdk and we also want to call here scaffold of context and with this one we access here this scaffold and basically we can then tell the scaffold that it should show a snack bar and here we put our snack bar which we want to create inside our snack bar has a property called content and there you can put a text inside so for example put some message inside and you can also give it a different text style if you now click on this button action then you see that we have a basic snack bar with some message inside next to this message you can also display an action and therefore you call here this action property and then you create a snack by action you can then call here this label of this action and what should happen if you press on this action and now if we click on this action snack bar you see that we also have here this action and every time if we click on it we get here this printed into our console because we have put it here inside by default this code can lead to problems so let's go where this implementation is and here we have a button and it is really important to put a builder around your button and between this scaffold and your button because if we don't have this builder here inside then we get an exception so if i try here again to click on this button you see that we get here big exception inside and this is because of the context so we need to put here in our scaffold of the right context inside and this cannot be this context of our build method because the scaffold is here inside and therefore we create here between a builder and then we use here this context and put it to our method and then everything should work fine again let's also create a second kind of snack bar our floating snack bar and therefore i go to this method show floating snack bar here inside we create again a snack bar widget and we also call here again scaffold of context and make always sure you take here the right context and then you call here show snack bar and we put our snack bar here inside then we create our content and here we can create again a message a style and we can also align our text to the center and what we also want to do is here to set a background color so you can change it also to a different background color and you can also put your higher font size inside so the message is bigger you can also set here the duration how long this snack bar should show up so you can define it here for example for 3 seconds you can also give it a different shape and then our snack bar is more rounded like you can see and this doesn't look cool if you have it directly at the bottom so we can also set here this behavior to floating and if we do this then you see that our snack bar is here floating and we have you more space to our bottom and to the left and right and if you want to increase the space you can also call here martian and then you can set the vertical space on top and bottom and also the horizontal space on left and right and this looks then like this so we have here more space to the bottom our snake bar also has here some elevation around and if you don't like it you can also set here the elevation to zero and then you don't have here the shadow anymore around your snack bar one problem for the snack bar is if you click here on this button and then you click here there is no reaction on the second one and it will take some time and then it will show up and what you can do is that you can put here every time this height current snack bar inside this will then hide the current snack bar which is displayed and show immediately the right snack bar and if you do this you see if i click here on action and then i click here then we show immediately the new snack bar and we don't need to wait until it is showing up next to the height current snack bar you have also this remove current snack bar and i will simply put it to this button right now and here you see that the animation is like this and if we have here hide karen snack bar then we have a different animation so he's always going back first of all and this looks not that cool so i prefer the second option to always put here this remove current snack bar so you have always a great animation and it's going always inside let's also create a different style for our snack bar so we create again a snack bar for this button here and then we also show our snack bar and this time we put here instead of a text object we put here our row widget inside and here you can basically define for example an icon in the beginning of your row and after it you want to display some text and you also give it some text style and this looks then like this and you see that we get here an arrow and what you can do is you can also wrap this inside of an expanded so it will simply take a new line if the text is longer and now the snack bar doesn't look so great so we can style it up a bit and therefore you can use this basic properties which we have used before already and if we do this you see that this snack bar looks much better let's also create an arrow snack bar so i create here in this method a new snack bar and we also show our snack bar here again and inside i put again a row inside and this time we show you an icon of error outline so we have here this error icon and then we can put some space between and we show then some text like before and we wrap it here again with an expanded so in case it is longer then we can wrap it to the next line and we also give it here some background color so we give it here a red background color for our error message and then it looks like this and basically you can also set again the duration and the behavior fixed and with this one it is here every time at the bottom displayed hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye

Channel: HeyFlutter․com

Views: 11,181

Keywords: snackbar, pop up message, pop up message in my app, pop up messages in app, build an app, display a message, flutter widgets, flutter apps, widget of the week, flutter, gds: yes;, build apps with flutter, get started with flutter, widgets, coding, coding an app, snackbar in flutter, flutter basics, flutter tutorial, flutter snackbar animation, flutter snackbar without scaffold, flutter snackbar, flutter flushbar, code, tutorial

Id: UkudAgCEhBI

Length: 6min 47sec (407 seconds)

Published: Sat Nov 28 2020