2.11 - Floating Action Button - Flutter tutorial for beginners

assalamualaikum and welcome back to the coding with tea today we are going to learn how to create floating action button in the flutter and we are inside the section 2 and we are about to create the 11th video of this section which is the second last video as in my previous video i told you that we are going to create a bonus video of this section because this section is about the stateless widget and the section is about to an end so at the end we are going to create a very useful video by using that video we are going to create our custom widgets so please don't forget to watch that so let's get started with today's tutorial open android studio and we are inside the project we created in our section one if you are new please watch the videos link is in the description and also you can get it from the right top corner so in the previous tutorial head towards the home inside this home page we created some [Music] drawer using a list view with the user accounts drawer header and then in our eighth video of the section 2 we created list view dot builder and a simple list view so for this tutorial let me just remove everything ok in here you can see we have a simple function a stateless widget and this widget is returning a scaffold in the first video of the scaffold i talk about that we can create floating action button navigation drawer bottom navigation bottom sheet and bunch of other options in the scaffold so scaffold is a very useful widget so inside the scaffold for to create a floating action button we just have to create floating action and you can see we have three options one is floating action button then we have a floating action button location and then we have a animator so go for floating action button and the widget name is also floating action button you can see we have an error because we need to pass on press function because it is a button so on press function is must control space to get all the options of any widget so we are going to press give the on pressed and we are going to give null function because an empty function and you can see the error is gone next for the button we have to add something in it it could be icon it could be text so because it's a floating action button so in hit we have a child property so as a child we can add only one widget so that widget is icons dot add floating action button is basically not for all the actions or all type of actions it should be used only for the key or the highlighted actions for example to add something in the car to add contact or to find location to on location or to as you can see on the map we have direction and location floating action buttons so only we use floating action button for the key action so in the floating action button we added a child so let me just run the application first okay our application is running this is the old screen let's run save it and you can see that uh screen has been vanished we don't have any body we don't have any app bar we have a simple one floating action button with a default background color and we added a single icon a plus sign then we have a background property to change its background color let's add a background color save it you can see a background color has been added we again have a foreground color foreground color is basically going to implement on the any widget used inside the floating action button as a child so in here i used icon so this foreground should affect our icon so let's add colors dot for example it's yellow save it and you can see a yellow color is there and next as every every button contains some shadow at its elevation so by default you can see we have a small elevation and we can also increase or decrease elevation save it you can see elevation is right there or maybe we put zero to remove the elevation you can see that elevation has been removed after the elevation we can also add shape or to change the shape of the button because it is a scaffold so most of the time it's in the circular form so for example we don't want a circular shape we need a beaver rectangle border if you don't know about these shapes i suggest you to watch the video of the buttons i created in this playlist so i'll drop the link in the description and also you can get it from the right top corner from the playlist for now let's add a build rectangle border now inside this border you can see we have two options the one is border radius for the border radius we have border radius dot circular and inside let's say we want to make it circular like this 20 only save it and you can see the shape has been changed if i going to comment share it you can see that it's completely a rectangle border so this is the beaver rectangle then we have another property which is side we can add border to it border side it is again a widget and it has three properties color of the border width of the border and style of the border so let's say color of the border will be blue width will be 2.0 and style will be it's a border style dot solid save it and you can see that a border with a blue color has been added a solid border has been added so this is how you add any shape to the floating action button so let's just comment it to make it look bit better command this shape again we are back with this let's comment the elevation because we want a default animation floating action button has two sizes the one you can see on the screen and then we have a mini floating action button so to decrease its size you just have to pass mini as true it's a boolean save it and you can see that we have a small function we can attach this to small screen sizes or if you know that our application is going to be used in small screens by making this mini as true is a good option now after creating this you might think that it is a floating action button then how we can change the location of the floating action button so it's a good question floating action button location is right here above the floating action button you can see we have a floating action button location property it's not inside this widget it's above widget inside the scaffold and in here we have a property called floating action button location dot you can see bunch of options we can place it anywhere it's not mini so we are not going to touch this its center dog center float star top so for example we want to push it to center center float means it's floating in the center you can see at the center let me just comment this mini so we can see it clearly also you can see over here the center top or start top you can see it's right on the top so let me add an app bar so we can understand the talk functionality clearly you can see that now it's currently attached to our app bar so let's make it at the start top start talk means to the left side and you can see that it has been shifted to the left side so we can attach it to the top so to attach it to the bottom we have to make it to dock center docked save this one you can see it's in the center uh same goes for the right and the left start and the end so let me just add bottom navigation bar as you guys don't know currently about the bottom navigation bar we did not cover it in the in our section too so let me just quickly create it okay as you can see on the screen i have just added a bottom navigation bar so basically this navigation bar let me just change it to center float so we can see the bottom navigation bar clearly you can see that we have a bottom navigation bar so in the bottom app bar i have a child basically it's a row and it's containing our four widgets so you can see them as well with the main exercise main axis alignment and then we have a children's icon column text icon column text so these are the four elements i just created you can create it by yourself because we cover each and everything in here okay in here to make it uh properly docked or to make a notch design we have to add something so let me just make it center dock first center docked you can see it's currently attached to bottom app bar and now to make it a notch design inside the bottom app bar it's remember it's not bottom navigation bar it's a bottom app bar inside we have notch margin for example let's five and then we have to change the shape of our bottom f bar so you can see it's a not shape by default it's a notch shape we need to change it to circular notch shape and it's a widget pass here save the code this is how we place our floating action button to all the areas of the screen we can we learn how to design the floating action button we learn how to pass it or to create a notch design using floating action button and a bottom up bar so this is how you can create your own design you can shift this notch dock to the right side to the start dock start off save it so now you can see that it is docked to the left side of the screen so this is how you docked and you just have to shift your elements of the road to the right side and your floating action button to the left side so it depends upon your own creativity we can add background color colors dot save it and you can see that it's looking up pretty nice here so this is basically how you design your applications using a color scheme using noise design this is it for this tutorial i hope you learned something new and if you learned something new please like the video and if you are new to this channel please don't forget to subscribe because more amazing and interesting videos are coming so again thank you for watching take care allah

Channel: Coding With T

Views: 25,501

Keywords: floating action button, floating action button flutter, fab flutter, flutter floating button, flutter floating action button, flutter fab, floating action button flutter animation, floating, floating action button flutter position, flutter floating action button location, flutter notch, flutter fab notch, notch design flutter, floating action button notch, bottom app bar flutter shape, floatingactionbutton.extended flutter, floating action button shape flutter, coding with tea

Id: kVMRzZjcLgM

Length: 10min 20sec (620 seconds)

Published: Mon May 16 2022