Flutter Tutorial - Flutter DropdownButton with Firestore

hey what's up coders welcome back to my channel today we will see how to implement drop-down feature in your flat or application and the items that are available in the drop-down are not static in fact they are retrieved from the Firestone while the implementation is pretty simple and straightforward but as a developer you need to know how to handle data from the fire store and display it and they drop down well there are a couple of options that you could actually add in your drop-down which could be like a multi choice select drop-down or personalized drop down now what I mean by personalized drop down is say for example if you have different user profiles you would like to display different drop-down menu items for each profile so these kind of tasks could be performed using drop down but for that we need to understand the basics of drop down and how to retrieve data from the back end maybe in my upcoming videos I can cover those functionalities but today we will see the basic part alright so moving on to the demo section this is a very simple form which has three fields and a - drop down now the reason that I chose to drop down is to show you that variation of one drop down where the data is retrieved from the static and the other one where the data is retrieved from the firestore so if you look at the choose account type this is where the data is available in a list and that choose currency type this is the one where the data is retrieved from the fire stop so let me show you the back and center alright so moving on with the implementation first thing you need to setup your project on the firebase console I've covered this topics on all my file store crud operation videos so I'll leave a link in the description please do watch those videos to understand how to set up the project if you have not done it before so all you have to do is create the project then you would get a JSON file make sure that you add your JSON file in the app directory as I have done here which is the Google servers JSON and then add the dependencies which is your class path here and then in the App level Gradle file make sure that you add this plugin which is the Google service and make sure that you perform the migration in case if you get the error and also add the dependency which is the firebase code and in your pub spec that's the only plug-in that I add which is the cloud Firestone and this is the version that I'm using so I'll leave a link in the description with all these details so this is a very mandatory basic setup that you need to do in order to communicate with the file store and get the details from the backend so once you are done with it then you have to come to the database section and then make sure that you choose the cloud Firestone and not the real-time database so and then make sure that you enable the test more Creator database then the first thing you have to do is create a collection and then add details that you would like to display it in your drop-down once you have done all this that's when you are good to go with your implementation of your drop-down in your flood of application so let's move on to the flutter side of it to see how we can retrieve these details and our application all right I think I forgot to mention one thing in the demo when I'm selecting the drop-down values it's just done it's just not that I'm displaying it I can also select and display the one that I'm selecting here so for example if I choose Canadian dollar you can see that I get a snack bar with the drop-down item that have selected similarly if I choose a British Pound I get the same value so here you are retrieving the data from the file store and at the same time you can also select and depending on your use case you can use that data to chief few more details or just displayed here as a text and similar way with a static one I'm just using a print statement to display it so I'm gonna use deposit so you can see here I get the deposit value and then if I use savings you can see savings so it's totally up to you what you would like to do with the selected data if you just like to pass it on back to the file store for a particular profile you could do it so this was something that I missed out during the demo section so there you go so let's move on with the implementation all right so first let's understand the structure of this UI and then it would be easy for us to build on it so here it's a simple ab bar first and then I have a form and inside the form I have a ListView because you can see all the items are just one below the other and then a button so it's a ListView with the first text form field the second one third and then two drop downs and then submit so today in this video I will not focus on the form fields my focus will be on the drop-down maybe I can have a separate video for the form fields and we can discuss more about validation a couple of other features about a form yeah so this is how the structure is gonna be so first let me design one and show you how it looks then I can replicate the same for the other first thing you need the package so make sure you have the cloud files so package updated here and then you have the main app which is a stateless widget and thus calls to my home page and in my home page it is a stateful widget and then an app bar comes with the leading title and actions so if you've watched my videos I follow this particular pattern on almost every single video so if you if you don't know how to do it just watch any of my videos you would find this a bar structure and after the app bar the body section so here comes the phone so the first thing what we are going to do is we're going to create the form inside the form I'm gonna give the parameter I'm going to use the attribute called key for this I'm going to give a value called funky value and then I'm going to say Auto validate truth now here comes the chest ListView inside our ListView we're gonna add the array of children widgets so before that I'm just gonna give some padding then inside the children widget I'm gonna add my first text form field when you define a text form field you need a few parameters to be added into it so I'm gonna use an icon and a text that's what the pattern that I'm gonna follow so if you look here I have an icon and a Texas oil so for that first thing I'm gonna use input decoration that is decoration inside this I'm gonna add an icon then next is the this is what is required for a single text foam-filled now let's quickly add the global key you so let's have so let's look at the first form field on the emulator there you go so you can see that the icon and the name is the label text and the hint text is enter your name so when you click on it you get that enter your name so that's is the one added in your hint text so this way I'm going to create the other to form face you so I've added all the three fields and so let's have a look at the emulator there you go you can see all the three fields updated now if you look at the UI the next one is the drop-down so first let's add the static list so first so first I'll create the drop-down which uses the data from the list and then I'll show you how to create the drop-down that retrieves the data from the Firestone I'm just gonna add few spacing here I'm gonna add a row picture because I want the icon and the drop-down next to each other so before that let's create our static data for the account type so we have created our static data now let's add the icon and the drop down to display this so if you want to create a simple drop down this is how you do it so first thing I'm going to give a main axis alignment I can quickly so now let's create the drop-down so so to create the drop-down first thing you need is a drop-down and set the drop-down the first thing is the items because that's the mandatory property that you have to use now since I'm using a static type and I've already defined the data I'm just gonna use the account type now if you look as to what the account type is it's nothing but my list you have to say map there were value then we have to add it in a drop-down menu item so this is where it would display those account type values so the first thing is drop-down menu item inside the drop-down menu item you need to display your details so I'm gonna use a text inside the text first thing is your value the value that you get from your account type and then here you can add icons inside your drop down if in case you want to display our icon next to a drop down you could do it but I'm going to keep it simple with just a text value and then just give a color property to it and then I'm gonna add another property called value so we have added this let's format it and we are missing a to list so let's quickly add that also this is just to display a drop-down now what if I have to select a drop-down and display the selected value then that's entirely different so you have to use unchanged property so let's say unchanged and say select selected account type whatever depending on your use case and then I'm gonna say said state and I'm what we had a variable here now the name could be anything so I'm going to say a variable now what I'm gonna do is I'm gonna say on set set selected type is equals to selected account type I'm going to use the value I'm going to set the value to the Selective type this way you get the selected value displayed when you select a particular item from your drop-down we have few more properties this is completely optional like the hint text which is to display so if you see here I have choose account type choose currency type so this text can be updated using this property which is called in so the another property is as expanded fonts this is how you create a drop-down get your static values update it and then add on changed saying if I change the drop down value this has to get updated and update the selected value and then hint so let's see how it looks on the emulator alright so I build this and you can see the drop down live reflecting on the emulator so when I click on this you can see the data from the list displayed here so this is how you display a static data in your drop-down item make sure that you have your drop-down button and a drop-down menu item next we have to create the drop-down menu and the data that is retrieved are from is from the Firestone let's see how to do it so so the first thing is we need to add a sized box just to give that extra the size box is done now you have to use the stringbuilder now you must have seen and my fire stove crud operations videos have used a string builder so use a stream builder and inside your stream builder the first thing okay you need to add quite a snapshot all right so first thing is you need the stream and a builder these are the two properties that you need in a stream and up so the stream is nothing but your snapshot instanced so in our case it would be Firestone dot instance dot collection and the name of the collection so in my case it is currency in a moment I'll show you the details of the collection and then I'm gonna say snapshot well this is the part that I have to enter in my stream so you can see that I've used the same name so first we have the snapshot next is the builder so in the Builder we pass two parameters the first one is the context and the next one is the snapshot inside this the first thing that we have to consider always is to check if the data is empty or not so for that we are going to say snapshot dot has data if it does not have data you could display a dialog you could display a snack bar so as of now I'm just using a text saying it's loading so the other conditional P else so in the else is where you get your items so in my case what I've done is first I've created an list because we will follow a similar procedure like the one we did for the static so let's get their list and then we will add it in the drop down menu in the drop down menu items and then use drop-down button to display them so first thing create a list I'm gonna define it empty next I'm gonna create a for loop so that it could look through all my documents or it could look through all the currency values so I'm gonna say I less than the detail that it has to look through is snapshot data dot documents dot length so I'm gonna look through this now when I look through this um I have to add all these details and unlist this is one approach of doing it definitely you can find different approaches of doing it so I'm going to add all the documents that are not getting from the firestore to this list inside this I'm going to use drop down menu item and then I'm going to sleep child text inside the text I'm going to say snap I think I missed one thing I have to get the instance of my snapshot so for that I have to use document snapshot and then I can say we cannot use it again so I'm just going to give it a snap and this is what gets the first document the details and that is what you have to pass it in your doc drop down menu item so here and then we are going to use the document ID and then I'm just going to give some styling and some color and then you have to display that value this is very important so the value that will get displayed this is what is your drop-down menu item now we have to define the drop-down button that is on change what has to be displayed and how to display the selected value all right so let's add those details so if you look at the UI I have a I con and then I have a drop-down so as of now what we have done is we have just retrieved these details by connecting to the firestore now let's define this icon and this drop down button so for that this part was retrieving the details and now here I'm going to say return and then add the row and dozens I'm using a row because the icon and the drop-down is next to each other so first I'll display the icon all right so we have to find the icon now let's define the drop down button drop down button the first thing is the items now in our static drop down an REO the drop down button had thee list name but here the item would be your currency items this currency item is nothing but the list name that I had defined here which was the empty list and then we started adding the document details from the firestore so this one has all our item details so that's what is gonna get inside the drop down button that's it now this is something that I've had it on change that is when I click or when it gets changed what it has to do so unchanged I'm gonna pick that value and I'm going to give currency value I'm going to display it on a snack bar so first let's define a snack bar so I've retrieved the same value and I'm adding it in my snack bar now we have to display the snack bar so for that we use then I'm going to use the set state we gotta define another variable selected like we did for the static one also and here I'm going to assign the changed value this value holds distillate currency value and then I'm gonna add the same properties that I added for the static one which is is expanded or dense and then I'm gonna add a hint text retrieved from the fire store so the first thing I have used a stream builder I mean I've got the instance of the collection which is the currency now if you look at the name of the currency it is this one and then I have checked if the data is empty or not if not then I'm creating an empty list and then add looping through all those documents and adding those document values inside this empty list so that way first I'm getting the details now once I have the details I have to display it in my drop-down button so for that I'm creating a drop-down button adding those currency item here and then I'm saying unchanged that is whenever I click on the drop-down and when I select one of the item I have to display it or I have to work on that particular data or pass the data to some to the next page or something so in order to retrieve the data I'm using a snack bar here and then updating the drop-down with the selected value so that's what I'm doing here so this is how you add it so let's quickly build this and I'll show you how it looks so I have pinned this and you can see the currency type also appearing here so I'm gonna select one say I'm gonna select US dollars and there you go you can see the US dollars reflecting in me it's not bad now I'm gonna add up another new currency inside my fire store and let's see if it gets displayed in our drop-down I'm gonna quickly add a new document so I'm gonna say I'm gonna had a Hong Kong dollar empty and I've saved this and let's have a look at the job done and there you go so you can see the a new document and reflecting here alright so this is how you retrieve data from fire store and display it and your job done and also have shown you another variation of how to define or how to create a drop-down with static data also if you like this video if you do like please give it a like and do subscribe and if you find this informatics to share it thank you

Channel: whatsupcoders

Views: 49,350

Keywords: FlutterTutorial, Flutterdropdown, DropdownButton, FlutterFirestore, Firestore, Firebase, Listview, Overlap, Stack

Id: pAn3-cqJ9MM

Length: 23min 4sec (1384 seconds)

Published: Wed May 01 2019