Flutter ListView Search With TextField

here we'll take a look how to show a list of  items in a list view and at the same time you'd   be able to search them just like this okay all  right so let's go ahead and see how to do that   okay well this basic code shows this ui now  right over here inside this class over here   we'll declare a list of maps now these  are the maps that we want to show over   here and just now you saw it okay now here  we have a list and inside the list we have   map okay now we do have string and dynamic  because the keys are all string the values   could be dynamic like here they are all integer  but here they are all strings and here they're   integer again so that's why the values are dynamic  now i'll go ahead and show this list over here   to be able to do that first inside this  i'll create a section which is called body right over here we want to show this list  inside a list view builder so that's why   i'll have lists to be builder over here  now as you see this is my list view builder   and inside this i'm continuing users length  and then i'm passing function inside this   item builder and we are showing everything in a  card so we are taking all the user's id as a key   like from here and then then we are using list  tile to show the user's id and the name and h okay   now let's go ahead and save it and this is what  we see now it doesn't look good so that's why we   are going to wrap this around a padding widget and  here we'll apply padding as 10. now let's save it   now it looks a little better now we need to create  a text field at the top for this reason we need   to have this list view builder inside a column  so that we can insert a text field inside the   column as well now our listviewbuilder inside this  column over here now let's go ahead and save it   and we do see an error so for this reason we  are going to wrap this around another widget   which is called expanded widget now let's  go ahead and save it and the error is gone   okay so this is the time right over  here we are going to insert a text field   okay so here i have this text field right at  the top and at the bottom we have a size box   now let's save it okay after saving it we see  our search box over here of course we can't   directly search this list over here so we have to  go ahead and create a new temporary list and in   that list would be saving the search result and  show over here so you have to keep the original   list now for this reason we'll come at the top and  right below this will declare init state function   so here we have this init state function and we  are overriding and at the same time we created   a new list this list contains map just like the  earlier one and here we declared it as a found   users because as we search we want to insert the  found or search result inside this list but at the   beginning whatever we have at the top the original  list we'll save it to this one and then we'll play   with this and we'll show the search result inside  this as we want to type in the text field we want   to show the dynamic result now that's why over  here over here we have this unchanged function   and we will apply a function to it  but we don't have this function yet   so we'll go ahead and create this function right  over here now this is the function that should get   called every time we type in something as you type  in the valued button and give it to or pass it to   this function and this function over here it will  try to check the value the entered value whether   it's empty or not empty so we use our original  list if there is a value we try to match the value   against our username from the list the  list we had at the beginning so we'll   take value from there and we'll put it  in a new variable which is called results   now since this takes a function we need  to remove the const value from here   now as you get the newest result we need to tell  our ui that our result is available to tell the   ui definitely we are going to use a set state  function to trigger rebuild of the ui and as we do   that we take the result and set it in this found  users once again i said this found users is a   temporary list which takes the new result whatever  result is there it could be empty result or   it could be non-empty results now let's go ahead  and save it and let's try to search over here but   nothing changes the reason is because this is  holding the newest result but in our ui code   over here this is the old list that we need to  change we're going to replace it with found users and over here and over here here and here all the available  places we replace them now let's go ahead and   save it now let's try to search for it so as  you see we search above and we say to there   we search candy we say it there we search and we  say to there so we search b and we see a lot of   the names with b okay so that's how you do that  now the basic idea is you have to have two lists   so first you have to have one list for keeping the  original value and you have to have second list   for keeping the altered value or the found value  or the new values on in your ui section definitely   you have to use the second one and that's how you  create a search list by the way if you really want   to know how to work this search list for api  call check out my tutorial for e-commerce app

Channel: dbestech

Views: 54,761

Keywords: flutter listview, flutter listview builder, flutter listview search

Id: pUV5v240po0

Length: 5min 45sec (345 seconds)

Published: Thu Aug 11 2022