Google's Flutter Tutorial - Dynamic Forms & Accessing Data from Dynamic Forms. - Flutter

hello and welcome back to another flutter tutorial in this video we will see how to create dynamic forms in platter so creating dynamic forms in flutter would be easy but the problem that we are going to solve here is how to access data from these dynamic forms easily and in a flexible structured manner so let's start so as usual i'll be starting with an empty template so you can see i have only made a dart file with a material lab and a container as home which has the white background that's what you see on the right side all right now let's start by creating a new file where i'm going to create a new form which will be a dynamic form so i'm going to name it dynamic form screen which will be a stateful widget let's start by creating a basic ui so a scaffold with an arbor so i'm gonna give a title let's say dynamic form and actions i'm gonna create a variable counter so this counter variable will determine how many dynamic rows will be there in the form that we are going to create all right so let's add actions in the upper with two buttons one will increment the counter and the other one will reset the counter so icons don't add and in the on pressed we are going to increment the counter variable and don't forget call set state and we will add another button that will reset the counter back to zero now let's set the dynamic form screen as home so you can see on the right side we have two buttons now let's create the body of our ui so body which is a container i'm gonna set a padding of 20 and child which is a column and column will have children and i'm going to add a list view as a child so let's view dot builder and that's going to return a row so i'm going to set it as an empty container for now and item count will be the count variable string trap to true and we need to wrap the listview inside an expanded or a flexible widget so i'm going to wrap it inside a flexible widget now let's create the row that's going to return a row widget with children i'm going to add a text widget with id so we'll be passing that and a spacing of 30 and also we'll add a text form field which is going to take the rest of the space in the row so we need to wrap it inside an expanded widget all right now let's pass in the index which is the list view index and set it in the text widget so let's replace the container with the row method okay refresh and you can see it's generating new rows on every add click here we have created a simple dynamic form with just a text widget and a text form field but you can have it as complex as you want but for this example i'm just keeping it simple okay but the real problem here is how to access data from these forms right so one way would be to create a list of text editing controllers it may work for this kind of simple forms but what if we have more input fields like this and if we have more let's say heathrow has radio buttons or check boxes or some other controls so in that case we cannot create uh a lot of controllers and all right so that won't be a a proper way to do it so what would be the easiest way which is flexible enough to do it so let's say let me rename this to key so that's going to make sense in a moment and i'm going to create a list of maps which is a string and dynamic and naming it values i'm going to inch slice it to an empty array and let's go to the row and in the text form field unchanged event i'm gonna call a new method on update which is going to accept the key and the value key is the index here so in a real world example this key might be coming from your database or your object array or something like that let's create a new map here map of string dynamic json is equal to and the keys i am going to set it as id and pass in the key and the second parameter the second key i'm going to set it as value and add it to the values array all right now let's see the values in the ui so this is just for display purpose so i initialized an empty string and let me display the string in the ui with the help of a text widget so let's refresh the ui i forgot to assign the value so result is equal to values dot tostring so you can see the the generator json there let me pretty print the json so var encoder is equal to json encoder with indent i'm gonna give four space now return encoder dot convert and pass into json object so that's going to pretty print the json okay passing the values so okay so you can see now you can see it properly if you look at the result you can see that for each character that we type in the text form field it's adding a new record to the json array right and it's having the duplicate keys so you can see that id0 with the queue and id 0 with the q q right so we don't want that let's fix it so what we are going to do is so whenever user types in the text form field we are going to get the key which is the index here and we will search that index in the json array and if it is present we will find it then remove it and add it back with the updated value so in this example i am removing and adding it back but you can try out by updating the updating the proper json row the proper record so that would be a little more efficient you can try that as an exercise so let's uh do this i'm gonna declare a integer found key which is set to minus one now let's look through the values json array and i'm gonna check if the map contains the key id so that's our key so if it contains then i'm gonna check if the id is our key then assign the found key with the key and then we break out of the loop so that means we found the key and if it is not equal to minus 1 that means we found the key that needs to be removed so i'm going to call values dot remove here let me rename element to map and return map of id equal equals found key so that's going to remove the corresponding key from the corresponding json from the values array okay now let's restart the app and see if that's working all right so it's adding new keys to the new rows to the values array and when we update it's removing and adding so that's why you are seeing it at the end of the list so it's removing and adding at the end of the list you can update the rows as well so you can try that so it's updating properly here the key is our listview index but in a real world it can be the key that's coming from the server or you can generate a unique key and also the value can be any complex object here i'm just sending a string but if you can set it let's say you can do it like this you can have any number of keys any number of complex uh any any kind of complex object in there which is a proper json so if you try this you can see that a new value key is being added and that's how the whole object looks like so we can send these values to the server so you can you can form a proper json like this so it's updating properly so you can have any any complex form and you can have text boxes you can have radio buttons and you can you can get those values and then you can create new member keys in the json object and you can add that so it's it's very flexible and easy to do and you will get a property zone you don't have to again look through it and format it so this is one of the way to do it uh if you find any new way please let me know in the comments so these kind of problems you might be encountering in your day-to-day flutter projects so that's why i chose to do this the link to the source code and the written article is provided in the description below also please switch to the proper branch to get the source code for this demo so that's all in this video if you find my video useful please don't forget to like subscribe and share thanks for watching and see you in the next video until then bye

Channel: Mobile Programmer

Views: 18,093

Keywords:

Id: HMqye4R-4c4

Length: 11min 53sec (713 seconds)

Published: Sun Apr 04 2021