📱 Popup Menu • Flutter Tutorial

yo what's up welcome back to another quick flutter tutorial in this one I'm going to show you a nice little cool package which is this pop-up menu and it's super simple to implement into your apps so let me show you by jumping into the code [Music] so just to keep everyone on the same page in my main function I'm running my app and we've just got a blank scaffold here so you should just have a white blank app like this now the first thing to do is let's go to our pubspec.yaml and I want you to import this pop over package let's use the latest version as of today and make sure to save it now I'm going to create a new file here called button dot dot and I'm just going to call it my button the first thing we need is a gesture detector so that we can tap on this button so for now let's execute nothing let's give an icon for this one so maybe the more it's going to be the three dots so more vertical so this is our little button so let's come back to our main.dot file and in our scaffold in the center let's see what this button looks like sweet so there it is and so if I click on this button right now I'm executing nothing so this is the main bit of code you need to know so if I tap on this button let's show the pop over so you can see it says Auto Import and so make sure you import that one which is the package that we brought in at the beginning and then for the bodybuilder that's a funny name we're going to display the menu so even for this I'm going to create it in another file just to keep everything clean so let's call this menu items and this one's just going to be a basic column so maybe let's have three menu options and let's just put in some basic containers with a little height and maybe we can just switch up the colors a little bit cool so this menu items is what we can build here when we show the popover and we can also give the menu a width and a height so let's just do that real quick and let's see what this looks like cool so if you save this you can see we can click on this three dots and the menu is popping up now one thing is this little triangle here is wide so I'm sure there's going to be a background color you can change up so just according to what colors you have you can adjust that one now the other thing is you can change the direction of the pop-up so by default it looks like it's going down but you can specify it to be up and that's it that's how easy it is to implement this little pop-up menu so I'll have the package linked below and play around with it if you have any questions just comment below and I'll come around and help so thanks for watching and I'll catch you guys in the next one peace [Music] thank you

Channel: Mitch Koko

Views: 25,418

Keywords: flutter, mobile app development, mobile app, flutter ui, dart programming, ios, android, authentication

Id: FYFqUMHxu3Q

Length: 3min 7sec (187 seconds)

Published: Wed Sep 27 2023