Flutter Tutorial - AutoComplete TextField & AutoComplete Search TextField With JSON Data

we want to build an autocomplete text field in flutter that shows suggestions to users as they type and therefore we will look at two different approaches first of all we want to load our suggestions from the internet from a server and secondly we want to load our suggestions based on local data at the end we will also create a form to validate our autocomplete text fields if you are new here subscribe to my channel and make sure to watch this video till the end let's get started by creating suggestions that are coupled with a text field and which we want to load from the internet to create this autocomplete suggestions text field we make use of this package flutter type ahead and with this package you can then show under your text field suggestions as the user type therefore let's get started with an our build method and here we create a type ahead field which comes from this package and here inside you need to put then the type of this field inside and we want to load some user data and therefore we simply create a class user data and in our case we want to load only the name of the user after that we have created our user class we also need to put here this question mark inside because we make your use of null safety and therefore it is always important to have you your type and after the question mark inside and now we need to follow three simple steps first of all we need to load all of our suggestions from the internet secondly we want to display here our suggestions in our dialogue and lastly we also can click on a suggestion and then we can do something based on it therefore let's start with the first step we want to load our suggestions and therefore you have here this suggestions callback and within this callback we get then a string which is then the query which we have typed within our text field inside and secondly we need to return here a list of the type which we have put here inside before and now we simply want to create this callback therefore i create here a new class and inside of it we want to create a new method therefore we create a class user api and here inside we put then this get user suggestions method inside and here we get then the value of our text field and we also need to return then this list of users and now we want to load some data from the internet therefore i simply go here to this json placeholder and here you have basically some user data within a list which we want to load and we are only interested here right now in the name however if you like you can also load here all of this other sample data all right let's go back to our method get user suggestions and here we define first of all the url to the json data which i have showed you before and secondly we want to make use of the http package and here inside we put then the url inside which we want to load and then we get here the response back which is our json data and we want to decode this json data and out of this we get then a list of users which are then this json data which we also need to convert to our user object and by the way if you want to make use of this http package then you need to go to your pubspec jammer file and here you need to include this http package under your dependencies and secondly you also need to include here this flutter type ahead package and this is then used for this autocomplete text field which we also make use of let's go again back to our get user suggestions method and here we also want to map our json data to our user objects and therefore i simply map you over our json data and i convert then this json data to user objects by taking here this from json method which is defined within our user class and this json object which we get here is then representing one of the user objects which you see here inside of this json data and we want to have access to the key name and therefore we also define here the name key and then we get here the name within our user name field and that's already almost everything what we need to do here the last step is to also make sure that we are filtering the user data because we don't want to get all the user data we want to filter them also and we want to filter our user data based on the text field value which we have typed in before and therefore we simply make here first of all our username to lowercase and also our query which is our text field value also to lowercase and now that we have lowercase letters we can compare both of these fields and we check that our name our username contains our search query and only if this is the case that the search query is contained then we want to return here our user in our user list and lastly we want to execute this code only if our request was successful and if it has returned here a status code of 200 and otherwise it was not successful and we want to throw here an exception and with this we can go back to our page and we have fulfilled the first case that we have loaded all of our suggestions which we also want to show right now in our ui therefore let's go over to our second step that we also want to show here all of our suggestions in our items list and therefore you need to implement here an item builder where you get then separately all the suggestions and we want to build then this individual suggestions and therefore i want to convert our suggestions first of all to a not nullable type and then we can make use of this and display it in a list tile and in our case we want to display here title and inside of it we want to display then the username which we have loaded before from our server and lastly we also need to implement this on suggestion selected and here we get then every time the user back on which we have clicked later so if we select here one user then he is always going inside of this callback and this is already everything which we need here so i can click here inside and you see that he is loading all of our suggestions and we can already click here on one and then nothing is happening right now and therefore we simply go here to our own suggestion selected and here we can then add our functionality what should happen if we click on one of these items and in our case we want to go first of all really simple so we simply get here the user which we have selected and we want to print it then within a snack bar therefore i created a snack bar and i simply put then the username which we have selected inside of this snack bar and now we can try it again out so i click here on one item and you see that it is also then going inside of the snack bar right now if you type here any data which is not found on your server then you see here this text field which says no items found and you also can customize this and therefore you can implement here this no items found builder and inside you can put a widget what should be displayed if nothing was found and in our case we want to display here that no users were found and this looks then like this so we have here our text inside and if you want to have it smaller then you also can restrict the size of it to restrict the size of it you simply wrap your container around and you put then the height inside how large it should be and now you see that it has here a height of 100 pixels instead next we also want to change here the style of our text field a bit so that it looks more like a search text field to achieve this you have here a property which is called text field configuration and this works pretty similar to the text field decoration which you already know and here inside you can for example put a decoration in input decoration inside and here i set then first of all a border i also make here this icon search inside and i also put here hint text inside and now we have here a new decoration for our search text field next we want to display some suggestions which are based on local data and we also want to create a form with multiple autocomplete text fields where we also can click later on a submit button and then it is validating our autocomplete text fields before we do this we will also look here at more properties of the type ahead field so first of all you can also set here a bounce duration inside and with this we can take out the pressure for our server because right now every time if you type something then he was sending a new request to the server so if you changed here one letter then he was every time putting a new request to the server and this is not really healthy instead we want to put here this the bonds duration inside and this means after every 500 milliseconds he will send then a request to the server so if the user types you a lot then only after he have finished typing then he will send after 500 milliseconds a request to the server so let's try it out so i type here a lot and you see he is not searching yet only if i finish the typing for 500 milliseconds then he is sending the request to the server and in general this is always a good practice to have so that we have less requests which are going to the server next we want to look more at an android specific feature so if you hide your keyboard then also the suggestions are not displayed anymore however if you want to keep showing your suggestions then you have here this property which you need to set to folds and now if we hide our keyboard you will see that the suggestions will stay open now let's go over to show some suggestions based on local data and this is also pretty easily done like you notice our local data has here next to the username also an image which we also want to display within our list tile first of all we want to create a new user class where we also want to put an image url inside and this is then the image url which is displayed next to our username and secondly we want to create some local data therefore i create a new class user data and here inside we want to fake our data right now however you also can put real data inside so i will fake it and i will take you another package which i also will include which is here this faker package so make sure that you put it also under your dependencies inside and now with this faker package we can fake some user data like the username and also the image and here i simply generate then a list of 50 users and then we create here 50 times a new user object and here we make the use of this faker to get first of all a fake personal name and this will be then generated and secondly we want to integrate here an image and this is then a random image from unsplash.com and with this we have generated right now a list of users which we want to display them as our suggestions in our list and to display them as suggestions we create a new method get suggestions and this gets then here the query which is in our text field value and we need to return here a list of users and like you can see this method is pretty similar to the method which we have already created before because here we also returned a list of users and we also have here this input query which is our text field value and now back here in our user data class we want to show based on this query our suggestions and therefore i simply make you a copy of this users list and i also filter them and therefore i take you the same logic as before so here we also make sure that our username contains then this query which we have typed here in our text field and now we can go back to our type ahead field and here we simply go to the suggestions callback which is then loading our suggestions and we want to replace right now our suggestions by our local data and therefore we put here the get suggestions method inside which we have created before which is then loading here all the suggestions out of our fake data and secondly we also can go to our item builder and like you remember our user class also has here this image url field and now we can also display this image within our item builder and therefore i go here to this list file and here within the leading property we want to show then this image and i also put here then this user image inside which is then a random image which we have generated before and now we can try it out so i click here on this field and you see we have also these images in front and what we also can do is we can set a container around and we set them the size of our image so that they look all the same and therefore we simply reopen our text field and you will see that these images are now correct displayed if we now click on any user then we also want to go to a detail page where the user is then displayed for example his image and his user data and also all the other data which you like to display here inside to navigate to this new page if we click here on this item this is pretty simple we need to go to our on suggestion selected callback and then we simply replace here our snack bar and here we want to navigate then to a new page which is our user detail page and into this user detail page we pass in this user object which we have selected before as our suggestion and now inside of this user detail page we can make use of this user object to display here our data so for example i display here the username within our app bar and i also display here the user image within our body property so let's also try this out so i click here on one user item and you see we go to the user detail page and you see that we display then the username the user image and i also displayed here again the username and here inside you can then display all the data of your object so in my case i only have two fields therefore i also can display not so much information 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 [Music] you

Channel: HeyFlutter․com

Views: 47,254

Keywords: autocomplete flutter, flutter, flutter android, flutter autocomplete textfield, flutter ios, flutter search, flutter search json, flutter search suggestions, flutter search textfield, flutter show suggestions, flutter sugestions, flutter textfield, flutter tutorial, suggestion box, typeahead, typehead flutter

Id: ybV1aIyKFE0

Length: 14min 11sec (851 seconds)

Published: Sun Mar 21 2021