 Hello guys. So in this video, we are going to see this stylish floating action button which will provide some different options So we are basically creating a menu kind of floating action button for that We will be using one dependency. That is web circular menu. I just copy this and for your reference it will look like something that's So let's minimize it and use it in the pop spec dot emm paste it under dependencies and just save it and It will automatically install the dependencies. So let's go back to main So here I have already designed few pages like home pages there favorite pages there Cart pages there Notification pages there. So what I will do I will create a floating action button Then I will use that under each of this page So let's quickly go to live and create a new folder. Let's say My underscore web dot dot. So let's create a stateless widget and name it my web and You can just make it capital as well. Okay, so that's fine and here what we want So we want to return a stylish floating web circular menu So Let's use the children property and specify the children's. So here the children's would be the icons So let's use icon button over here so that I can mention on press as well as Use icon over here. So let's use icons dot home and You need to add const as it is static and just save it. So for the time being I just add one Here so basically in order to work with this you need to add at least two buttons But let's add one more over here. So that would be the favorite one Let's keep it to then we will extend it later on So just save it and we need to use it inside each page. So here what we need to do. We need to use floating action button and my web So just add it const like this. So once you save this you will be able to see one Stylish menu over here Okay, so let's go back and add this floating action button to All the pages so that I can jump Wherever I want Just import this Go to the save this floating page Just go here paste this Import this save this home is already done. So notification page go here paste this and Import this and save so I have included it in the all pages but in order to cross-check we need to go to home page and We need to add the events on these on press So let's quickly do what we want to navigate to a specific page So what I do I just create a separate function which I can reuse under all the icons So let's create a function over here Let's name it go to page and We can mention the page here and What we need to use in every gator? Dot so we need to just push replacement And just use the context so we need to use the context here and Here instead of route we will be using material page route and Which is expecting one? Vader, so let's use the arrow function and give it the page That's all and to just assign this we just declare another variable Context so we can take context first and then the second argument is page. Okay, that's fine So this function is complete now. You need to call it here. So what we do here? We don't need this even the body part. We can simply use the arrow function over here and Just use this go to page Context and the page so for this home page we need to use const home page And I'm missing something. Let's close it So this one is seeing one bracket. That's all Save this and let's do the same for rest of the Icons that is the items of this stylish floating action button So how many pages we have we have home page favorite page that is fab page and then we have notifications page and Last one we have that cart page Yep, so notification is not a cons. That's why we need to remove it and same way we can change the icons as well. This is favorite and This one is for notification notification so you can have notifications and For cart you can use that shopping cart icon shopping underscore cart and Save it Now you can see the different icons over. So if you want you can change the icon color as well like I Just use the color here colors dot. Let's use red here and color property colors dot blue and Let's use this blue as in and you can style it. Whatever you want here. We have the colors. So use colors dot pink and Save this So it looks little better If you change the background color, so let's remove this unnecessary board and Just go back to this web and Outside this we can use another properties of web So we can use the ring color property to change the spectrum color that we can use colors dot. Let's say blue dot we can use some shade like shade 100 save this seems better and Let me add one coma here so that I can see it properly Save this just add another properties. We can control the diameter of the ring 200 and save it Okay, then you can also control size of this web Babs size. Yeah, let's try with 20 Let's try with the rest of the properties. We have width of the ring as well 40 let's save it and see Seems little better and the middle one. We need to change at margin. Do we have margin here? Yeah Let's add const In set dot all and give it 10 save this Okay, now what we left ring color is turn diameter Diameter is fine pep size is little small. Let's give it to 50 and Okay, fine. So now it seems better Okay, one more thing we can do is we can have a open color. Let's use colors dot red dot shade 200 and save this Now you can see it seems little better So let's try to navigate to where we have added the events So we have added this even to this favorite page. Let's go to this and See no favorite yet and just go here and go for this notification. You got notifications Go here or caught You got your caught So go back to your home page and you go to your home page So that's all for this video if you have any doubt do comment in the comment section. Thank you