Search Online Json Flutter | With Description | Flutter Search Implementation | Json Fetch Parse

hello everyone today we will be looking at the simple search implementation on flutter a real-time search implementation and it's a little description page for it now here is the simple boilerplate code for the flutter now I have done nothing like just created the my home page and it return body as in homepage I am importing the necessary library for this homepage and create a function home UI we will be fetching the online Json data so here's the Json data link given in the description let me quickly put aside a link and comment it for later use it's simply written the scaffold and like I have already created this app so I am pasting it the code will be given at the description I will only be explaining the API fetching part and the search implementation part the body written the column and its children accept the list of the widgets so I have created a widget like under expanded I have created a simple text field so in the onsen's property we are able to pass a function and just provide it the unchanged value that's why I have used the text field it has created a simple search text field and I am again creating another widget expanded under child I am giving the padding and under the padding I am giving 20 pairing to all of it now it take the cell parameter and I am creating a list View which written the card now under his child property under its child property I am creating a list style which support the title and subtitle the default value of the expanded Flex is one is to one and I am changing it to one is to 7 now the UI look pretty good so I have written the card under the list view I am changing it to gesture detector like to detect the tab and under the state detector I will just paste this we can card things oh sorry sorry like just the detector support that child perimeter now I can give the ontap property and simply print apt whenever I tap on the list style the message tab will be printed on the console I can use this on tap property on just a detector letter to navigate to the description page for the API fetching let's create a data function as in async you have to import one dependency HTTP just put it on the dependency just TTP latest version and Inter flutter object now import the http.dot as HTTP to use it I am creating a variable response eat all it until there is a response from the URL like it hold the response of the URL or it give the status of the response so variable response is equal to avoid HTTP get uri.parse and URL now the response hold it status so I can write if response dot status code is equal to is equal to 200 it means that if there is an valid response and if it is a valid response then we know that this URL give the Json data so we will decode Json decode and the body of the response under the variable Json data let me create a variable where Json data okay in a nutshell there is a response from the URL and if response dot status code is equal to true that means if response is true then the body of the response or the Json response will be decoded and it will be stored under the Json data variable else we'll see a error message in the console I am creating a list of map key value pair the key is string and the value is dynamic and just set it to an empty list here I am creating an initi State function it is the function which runs before the app start inside this function I will call the get data function so this get data function will be called whenever the app start and under this git data function I am simply printing Json data and you are seeing in the console that it print all the Json data as you can see it was just to check that our async function get data is working or not now let's store all the result in the list of the map which we have created earlier so we are using a for Loop which go till the Json data length and we are adding it to the all user like the all user is a list of map of string and dynamic as a key value pair so simple for Loop and we are adding all the name to the name all the ID to the ID all the s to the edge key is the name ID is and value is the Json data value now we are printing this all user also in the site title and subtitle let's change to the all user index name and all user index is let quick reload the application okay because the all user isn't like defined at the first time so we are just creating a set state okay still error ah we have also undefined item count like it doesn't know how many list Styles should I create so I am saying item count is equal to all user dot length now it is working search feature will not still work for search implementation let's create a new list of map string Dynamic and give name as a new user to hold the temporary list so in the text field on since property just print value and let's see what happened the onions property value will be printed now you can see in my console that it is printing the unchanged value so we can use it to implement the search result now we'll create a function update list and pass this alternate value let's create a function update list with tech a value name it as a Val actually this is string so you take a string value as a parameter now we are checking if this parameter is empty then the new user list is equal to the all user means original user if it is not empty then we will search the value using a simple query the new user will be all user all user where this element name with this element name converted to twist string and again converted to lower case contains the value converted to string converted to lower it was a simple query to implement the search result here we are converting the entire value to string to lowercase which is compared with the list twist into lowercase so it is very easy but as we can see that the search result isn't actually implemented so here put all this code inside the steady state function is still not working okay like we have to give the new user all over it also in the item count now let's see as you can see it is working fine but there is a problem at the first glance the app is not showing this full list as you can see I am not reloading it and it's not showing the full list it's because the new user value isn't updated at once like you have to do it once yourself to understand it so as you can see when I type it is showing the list but at the first glance the list is not showing as the new user value is empty to solve it you can simply put a steady state function and inside it just new user is equal to or user the search implementation is working fine okay now you can see at the first glance all the result are showing for the description page creator description Dot and I have created a simple widget which takes a parameter name and age and of course context which in turn return our Center widget and under installed property we are simply returning a text of this name and Edge value to implement this just go to the just the detector on tap property and simple write the navigation Dot push and in the route material page route which call the function description and pass the new user name and new user age so here I am calling the description widget and in the name and S parameter I am simply passing the new user name and new user is [Music] in the S perimeter I can simply copy paste it now everything should be working fine dot to estring let's see how it works okay semicolon let's see how it works okay now everything is working properly fine we are heading over the destination page also description page so thanks for

Channel: Flutter Tips

Views: 2,067

Keywords: flutter, flutter search, flutter search bar, flutter tutorial, flutter json, flutter search listview, flutter list search, flutter search list, flutter search api, flutter search json, flutter json listview, flutter json data, flutter listview, flutter search ui, flutter app list search, flutter search field, flutter json serialization, search in flutter, flutter widgets, flutter search in list, flutter tutorial for beginners, learn flutter, google flutter

Id: kaKbHEYI_Js

Length: 12min 57sec (777 seconds)

Published: Sat Nov 19 2022