PopUp menu with menu icons in flutter || Create popup menu and show using any widget in flutter.

hi guys in this video we are going to see how we can build a pop-up menu like this in flutter so let's get started in previous video we have built the floating app bar with when the user scrolls down it will hide itself or when his cruiser scrolls up it will show itself the video link you can see this video from the i button now in this video we are we are seeing a pop-up menu which was shown previous so let's get started so we need to when the user clicks on this circle avatar we will show the pop-up menu what i will do i will go down and create a state let's switch it or stateless widget and i will call pop up men okay now i will use a final list pop-up menu now we need some more variables for our popup menu so first we will instead of container we will use pop up menu button and then it requires a property called item builder so i will use item builder then i will pass the context and then i will return the menu list so i will what i will do i will return the menu list then it is fine now we need to show the button so the pop-up menu when user clicks on this avatar so it can be a custom icon so to render the custom icon or the icon you want we will use a property called list widget and then i will call for a icon icon icon can be null okay so what i will do is this i will initialize here this dot icon then what i will do is just icon i will called icon now it is fine [Music] now wherever you want to uh click or show the pop-up menu just go there here i will want to show insider when a user clicks on circle avatar so just i will come there and here it is where it is here it is so when i here it is a list style and here it is a trending so when a user clicks on circle avatar okay i will want to show the pop-up menu so first what i will do is i will remove this circle avatar and instead of this i will use the pop-up menu i have created and then i will call the list and then icon and instead of icon i will pass the container i will pass the um circle amateur and refresh it after this i will menu list insta come inside a menu list and pop up menu button okay pop up menu item and the first thing is child so i will use list time then [Music] and icon copper tino icon start person okay refresh it then title i will use my profile okay use const wherever possible use const then i will use the same pop-up menu item and the child instead of my profile currently i will use bag my back use const here now refresh it and when i use it clicks on it you can see that it is showing me the pop-up menu with the two buildable icons and our title let's remove it first then what i will do here now i will show a copy this code [Music] okay now pop-up menu divider and then a pop-up menu item child text settings now you can see settings is rendered and then second thing i will do is log out and before logout i will use about us now you can see that our everything is looking fine and perfect but you can see that uh we have a rough edges and not around corner so we need a round corner so how we can achieve this so we will come inside our pop-up menu [Music] and then inside the pop-up menu button what i will do is i will create a shape shape and i will provide a round rectangle border and border radius should be border radius dot circular and we will call it 16.0 and then refresh it after this you can see that it is a beautiful around edges now so inside a log out so let's make it more fancy so come inside uh come up with this and then use a divider and then inside this like this and then copy the style pop-up menu and then paste it here after this i will use log out exit not exit out log out is not available i think i can use material instead of this log out okay icon data so it is icon here okay okay okay i have done a mistake i forgot that mistake refresh it you can see that okay my bag is rendering i need to change it to log out log out refresh it now it is looking perfect so in this way you can create a pop-up menu in flutter so thanks for watching

Channel: Be Developers

Views: 11,368

Keywords: flutter tutorial, flutter popup menu, flutter popup menu button, popup menu, flutter settings button, flutter for beginners, flutter menu list, flutter tutorial for beginners, flutter floating menu, flutter appbar dropdown menu, flutter settings, flutter basics, popup menu flutter, flutter settings menu, flutter ui, flutter menu, flutter widgets, flutter popup dialog, popup menu button flutter, flutter overflow button, flutter popup menu button example, popup

Id: sLoK8mSRYMQ

Length: 8min 59sec (539 seconds)

Published: Sun Mar 27 2022