Flutter Tutorial for Beginners #18 - Snackbar in Flutter

hi everyone and welcome to codingjust.com guys in this splitter tutorial i will show you how you can implement a snake bar in your flutter application so basically a snake bar is a short type of message which we can display to the user to [Music] inform the user about some process or some failure in our application so let's start our tutorial open up your android studio and create a new flatter project here i will create a stateless widget status widget and i will name it my app and i will remove this container and i will return material app inside this material app i will add a home so home will be a scaffold and inside this scaffold we will add an airport and f4 and the apple will have a title and we will use a text widget okay and this will be snake r and we will add a body here and the body will be snake bar page okay and i will create another status widget of this snake bar page okay so stateless widget okay sd stateless okay i need to do it outside of this widget so it's deadlifts widget and i will name it snake bar page hit enter and here we will return center so we will add a button here and the one the button will be in the center of screen so here the child will be material button material button and i will add a text this button text and the text will be snake bar okay i will add a color to this button and the color will be colors dot blue and we will also change the text color so text color and we will use the colors glass color dot white okay and now we will add on press here so when we press this button so we will show a snap or run this on press button and i will pass a method here our function here of show snake bar and i will pass the context as a parameter and now we need to create this function over here so type void and let me zoom it forward and show snake bar okay and here we will pass build context as a parameter here and inside this function we will show the snake bar to the user so uh we need to create a variable so final final snake bar is equal to uh we will use the snake for widget here snake bar okay and as you can see here we have a content here so the content will be a message so it will be a string message like this hi i am snake you can pass any message you want to show to the user uh here okay so i will just close this and i need to add okay so we need to uh add a text widget here we we cannot add directly a string so i will just simply cut it from here and i will use a text widget here and inside this oh sorry inside this text video i will pass this message okay so now below here we need to use the scaffold um scaffold messenger so scaffold messenger dot off and we will pass this context here okay if i press ctrl and click on this so this contact is uh coming from here this is the parameter okay and after this we will show this neighbor so just simply type show snake bar and we will pass our snake bar variable here okay so we can uh also pass this one uh here in this uh show snagger method but this is a good way to store this neck bar in a variable okay so now i will run this application okay guys as you can see here uh we have a button here uh when we click on this so if you notice here here we have a snake bar and it says hi i'm a snake bar okay so you can pass any message you want to show to the user in this content but you will have to use the text widget okay so if i show you it to again uh if you click on this button so a snake bar appears in the bottom of our screen okay so that's it for this video guys and if you like this video please share this video with your friends and also make sure you are subscribed to my channel and the notification option is on so you won't miss the upcoming videos

Channel: CodingZest

Views: 3,046

Keywords: SoftCoding, Android Tutorials, flutter app development for beginners, flutter tutorial for beginners android studio, flutter crash course for beginners 2021, flutter for beginners 2022, flutter tutorial for beginners, flutter for beginners, flutter tutorial, snackbar in flutter, how to display snackbar in flutter, create snackbar flutter, snackbar tutorial flutter, how to use snackbar in flutter, snackbar flutter example, snackbar flutter style, flutter widgets tutorial

Id: JQOvFYuSqxQ

Length: 6min 16sec (376 seconds)

Published: Sun Mar 13 2022