Flutter Tutorial - Dynamic Settings Menu & AppBar Dropdown Menu 2/2 (Popup Menu Button)

we want to create a dynamic settings menu that appears if you click within the app bar on the pop-up menu button in this video specifically we will focus on creating a settings menu based on model objects if you are new here subscribe to my channel and make sure to watch this video till the end let's get started from scratch so we want to create here a settings menu and here we want to create then in this case three different items and each item has an in our case an icon and a text therefore let's get started by creating here first of all one specific menu item here i have created a new file menu item and here inside we want to create a new model class and within this model class we have then the data a text and also an icon and these both things the icon and the text are then later displayed within our menu item and secondly we also need to create then here a constructor after this i create a new file menu items and here inside we create then our menu items and therefore we simply define here all of our menu items which you see here inside settings share and sign out and we want to get started here with settings therefore i create here a new field item settings and here inside we create then a new menu item and this is exactly this model object which we have created before and here inside we define then the data of our items so first of all the text and secondly also here this icon which should be displayed next to our text and with this we have exactly defined the data for one menu item and we also want to do the same thing for the share item and also for the sign out item and therefore we create your other fields and like you can see we put here then the text share inside and sign out and we also put here then different icons for each of them inside and now we also want to display all of these menu items which we have here defined and to do this we want to create here a list of menu items so that we can later access here many items at once and we simply put here then our items inside and in my case i put here only two items inside because here we have two items and then later we have here this divider and then we want to create our second list of items and in our case we have here only one item inside and therefore i also create here a second list and here i put then this sign out item inside alright this was about the setup and now we can display all of our menu items inside of our ui and we want to get started by displaying here the first two items which are here inside of our items first list therefore let's go to our main file and here inside i have created already here this app bar which you see here at the top and here within this app bar you have this property actions and inside of it we can then create a pop-up menu button and this pop-up menu button is then of the type menu item and this is a model class which we have created before and this holds in the data of our text and our icon and with this pop-up menu button we have basically created here this button at the end and now we also want to basically display then all of our menu items in case we click on this button and therefore you have here this property item builder and here inside you need to put then a list of your menu items inside and in our case we have already created this list and we want to access it here our menu items items first and this is exactly this list which we have created before and now we want to map these menu items to our ui and therefore we simply map them and here inside we create then a method to build each of our items let's now create this build item method and here we get every time the menu item which is our model class and based on it we want to create a pop-up menu item and here inside you can define over the child property the widget which should be displayed inside of your item so in our case we display here a text widget and we also access over our item the text and this is basically then this text and later we also want to access here our icon and now after your hot restart you see here this pop-up button and if you click on it then you also see here our first two entries and like you can see we have here for each of our items here a text displayed and this is exactly what we have to find here inside of this child property in case you want to display here other widgets you can also change it so for example i put here a row widget inside to display multiple widgets next to each other and then we want to display here the text and next to it we want to display then our icon and our icon we want to access here over our menu item and this menu item holds then all the data which we now display here in our ui and now after we hot restart our application you also see here this icon next to our text inside and this is exactly what we have defined here with this icon next we also want to add some functionality if we click on our menu items so in our case we want to navigate then to a new page which is in this case the settings page because we have clicked here on our settings icon to add your custom functionality if you click on one of these items you need to go to your pop-up menu item which displays here one single item and here inside you need to pass in the type of your items so in our case we put here our model object inside which is representing our item and secondly you need to pass in here inside of the value the item itself and it is always important that this model item is unique and this is needed because the value is always representing here one of our items one of our pop-up menu items and next if we click on one of our menu items then we want to execute some functionality therefore we want to continue to implement here the functionality if we click on our item and to do this you simply go here to your pop-up menu button and here inside you have then this unselected property and here inside we get then every time the item on which we have clicked and this is of type menu item and this is basically the value which we have put inside before so if we click on our popup menu item then this item which we put here inside of our value is going here inside and now based on this value we can decide what should happen and therefore we create this unselected method and here we get then every time this model object on which we have clicked and here inside we can basically switch over this model object and then we simply determine if it is for example this model object item settings which means it is here this first item and if this is the case then you can execute here some functionality so for example you navigate to a new page and in our case this is a settings page and this is another page i have created already and inside of this page we basically display an app bar with the text settings and now after your hot restart you can try it out so you can click your own settings and you see we are going to the settings page and this is exactly what we have defined here before and the same thing you can also do here for the share button for example so if you click on it then we also want to go maybe to another page and therefore you also go to your unselected method and here you add then another case for your item share and this item share is basically what we have created initially so we have every time defined here each of our items the text and the icon itself and if we click here on this share item then we want to also execute some functionality so we navigate here to a new page and in our case it is the share page and this is another page i have created with an add bar and with a text chair make sure to hot restart your app and if you click then here on the share button you see we are going to the share page next we also want to create a divider between our items and then we also want to create here the second list of our items so in our case only one item to also add the divider we need to go here to our pop-up menu item and here we go to our item builder which displays here all of our menu items and after our items first list we want to display then our divider and therefore i created this pop-up menu divider and after our divider we also want to display here our second list of items and therefore we access our item second which then displays here one of these items which is in this case here sign out and this displays then here later this item and now we can look at the result so make sure to hot restart your application and then you should see that we have here all of our menu items inside and we also have here this divider in between and lastly we also have included here this item and this is exactly what we have included with this item second list and if you also want to implement the functionality of this button then you need to simply go here to this unselected method again and here inside you add then the case if you clicked here on the sign out button and therefore we access our menu item of the sign out and if we have clicked on this item then we want to navigate for example here to another page to this login page let's also try it out so make sure to hot restart your application and then you can click on sign out and then you see that we are going here to this login page and this is another page i have defined before and by the way if you want to get here the whole source code of this application then you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more efficient developer hello everyone thank you so much for watching this video please make sure to give it a thumbs up and subscribe to my channel here to get the latest news about flutter and see you soon bye you

Channel: HeyFlutter․com

Views: 29,829

Keywords: android, flutter, flutter appbar dropdown menu, flutter basics, flutter floating menu, flutter for beginners, flutter menu, flutter menu list, flutter popup dialog, flutter popup menu, flutter popup menu button, flutter settings, flutter settings button, flutter settings menu, flutter tutorial, flutter tutorial for beginners, ios, mobile, popup menu

Id: JggTBrvVrk8

Length: 10min 19sec (619 seconds)

Published: Sun May 02 2021