Flutter Tutorial - Search TextField For Local & Network - Search Bar & Search Delegate

the search functionality can be useful for almost any app and we will build here a search app bar where we can search for cities and later if we click on one of these cities we see then the weather which comes from a real api before we start the implementation of our search bar with an external api we want to build also a local variant of our search bar and here we basically search for cities which we have stored locally on our device and then you can search locally and in this case research here for cities this video is sponsored by invoice ninja invoice ninja is one of the largest open source platforms for invoicing if you search for something to manage your invoices with flutter and handle also your online payments this service might be something for you and to get started with this invoice ninja plugin you find the link in the description box of this video we want to get started here within our build method within the scaffold you have here this appbar property where we will set an app bar and here you can set a title and then we have here our title for our app bar and we also want to add here a background color and lastly we also add here some actions where we want to add our search button so we have here at the end a search button and if we click on it then this on press handler will be executed let's get started with the real implementation of our search so i create here a new class city search and we extend it from the search delegate and this is from the flutter sdk which allows us to implement some search behavior and here inside you put then the object of what should be searched in this case we have some cities which are strings we want to implement a local search before we implement the network search therefore i simply hard code here some cities which we can later search and we also show some suggestions in our app and this will be later displayed here at the beginning of our search if we have not typed anything then these suggestions are shown now that we have extended here from the search delegate we also need to implement here four methods for the first method we implement the actions of our search bar and in this case i will put here this clear icon inside and then later our search bar has here this clear icon which we now put here inside and with this one we can later clear our search again the next method is the leading method of our search bar and here we basically set an arrow back button inside and this will be then displayed here at the beginning of our search bar with which we can later cancel our search and go to the previous page and lastly we have here these two methods build results and build suggestions and the suggestions are always what we implement if we have here something typed inside and then we show you some suggestions based on it and this goes in here inside and then if we later click on one of these suggestions then we come up to a new screen where we actually build the result and this goes in here inside of this method we can already implement the result page which simply shows you an icon and then also the thing which we have typed here at the top and therefore we simply create a column to display the icon and the text under each other and we start with the icon which is this icon here on the left side and then we have some space and under it we want to show a text and like i have said before we want to put here this search bar text also here inside and how we can access it within our message here is by calling the query which is an object from this search delegate and this query basically holds the value of our search bar text and then we also give it some style to make it bigger and in the font size of bold and now we are pretty far with our search already and we also need to implement right now the suggestions initially we have here all the recent cities or our history of cities inside which i have start within this variable and this is what we want to show right now inside of our suggestions therefore we go here to our method build suggestions and we create here the suggestions out of our recent cities which we want to show initially and then we create a new method where we build our suggestions and put also our cities inside and within this method we simply get then all the suggestions in this case our cities and then we want to build them within a list view builder and here inside we go then over all of our suggestions and create each individual item with our current index we get then the right suggestion which we want to display and then we simply display here list tile and like you can see our suggestion always have here this icon and also the text next to it and that's what we want to build here in this list tile therefore i simply create here this leading icon of the city and also the text where we put our suggestion inside and now that we have implemented a part of our city search we can then go here to our button which is this button here at the end and if we click on it then we want to call the method show search which also comes from the flutter sdk and here inside you need to set the contacts and then you set here the delegate which is our city search and this city search has then the whole functionality of our search bar which will be then displayed if we call here this show search method so if i now click on this button then this method will be called and you see here the search bar with all the suggestions because here inside of this build suggestions we put right now in the recent cities which we have here inside of our recent cities list and this is what we have then created here with this method right now if you type here something in our search bar we always show the recent cities because here we need to change the suggestions depending on our query what we have put here inside of our search bar and therefore we simply check here if our query is empty which means that we have here no content in our search bar then we show here all the recent cities however if we have here at least one character inside then we want to show the cities and therefore we have here all the cities which we have stored here now locally which are available in our system and now he will display here all the cities which we have here in our system and if i have here nothing inside then he will show here the recent cities however what we need to do right now is to match here this query with what we have here in our system so that he shows you the right results and therefore we filter our cities with the where method and here inside we basically put the city to a lower case and we also put the query to a lower case so basically if we type here paris and upper letter keys then we also want to show here this result paris and therefore we put here the city which is the city here to lower case and also our curry to lower case so that we can later compare them and then we simply check here if the city in lower case starts with our curry so we check here if paris starts with this and then we show the city as a result and now if a hot reload you see it already works so if i type your paris then it is working and i also can type here berlin for example and then he will simply show here the berlin as a city now we want to implement this button here at the end so that the search result is cleared and therefore we simply go to our build actions method where we have here this clear icon and then we simply put the query to an empty query and that's all what we need to do here so if i click on clear then our search bar will be also cleared and in the case that our query here is empty and we click on this button i also want to close here the search and therefore i simply check here if our query is empty and if that's the case you have here method which is called close which you only can call within your search delegate and this will then close the search again and here you need to set the context and then you can also set here the result inside of the search and i put it here to now however later this will be returned here within our show search method and here basically we can get the results back and if you put your value inside then it will simply go here inside of this results variable all right now let's try this behavior out so every time if we click here on the first time then it simply clears the search and it goes here inside however if it is empty then we also close the search and if we click here on this back button in our search bar then we also want to actually close the search so we basically do here the same thing therefore i simply put here this close method also inside and i also pass you null as a value for our result and if i click now on this back button here then you see we also closes the search and the next important thing to implement is that if we click on one of these suggestions then we want to go to the result page which is simply here this method where we display our result and therefore we go here to our suggestions which will be displayed here within our list tile where we have here this icon and next to it the text and if we tap on one of these suggestions we call here the on tap handler and this will then simply put here the suggestion inside of the query and this basically means if i type here for example this then our suggestion our berlin goes inside of the query and we simply updated our query to the text of berlin and after we want to call the method show results which you can only call here within your search delegate class and with this method you basically show then here this widget instead of this build suggestions widget and the suggestions are always shown initially and if you want to switch to the result you simply put here the show results method inside and now we can try it out so if i click here on berlin then he will switch to the results and he will simply show here the result page if we are now here within our result page and we click then here on clear then we simply clear here the query which means that our search bar gets here no text anymore however we also need to go back to our suggestions and therefore you need to call here the method show suggestions which you only can have within the search delegate class and now if we are here in the result page and click again on the clear then you see we are going here back to the suggestions right now if we click here on one of these items we simply show every time the results however you can also do here other things instead of showing here the results you can also close the search and put here the suggestion inside which means the object on which you have clicked for example here berlin will be simply put here inside and you closes the search and therefore you simply go here up to our app bar and here you simply get then the results back which we want to print right now this means if i click here now on berlin then our search will be closed and we return here the result and print it within our console and here inside you can then do whatever you like with the result and for example show it here within the body property if you tap on one of these suggestions you can also do another thing so you can also navigate to a new page and therefore i simply call here this navigator.push and then we simply put here a new page inside for example our result page and then you put here the suggestion inside which means that the result on which we have clicked for example this berlin object goes in here inside and this is also another possibility and like you can see you have here three different variants the first one is that you call show results and then he will simply show here this widget within our result method the second option is that you close the search and put you the suggestion inside and later you will then get here the result of the search and you can do then whatever you like with it and lastly you simply navigate here to a new page and then you put you the suggestion inside and then you can also display it within a new page and lastly we want to put here also this highlighting of our search insight for all the letters we already typed and how we can do this is by going to our build suggestions and now we want to make sure that our query which we have typed here is simply highlighted within our suggestions and therefore we simply take here the suggestion and then we substring it from zero until the query dot length which means that we put here in this case the first three characters here within the curry text and these are the things which we want to highlight and then we also want to get the remaining text so we simply start here this time from the query.length which means that we get here the letters lin instead in this case and this is in the remaining text which we have not typed inside of our search bar and now it is simply easy we want to put this query text as bold letters and the remaining text as normal letters and therefore we go here down to our list style to our title and we commend it right now out and then we create a new title and this time we create a rich text and with the rich text widget it is possible to display different text styles within the same text so we have here some bold text and another text is gray and therefore we start here with the bold text which you put inside of the text property and here you simply put then the query text inside which we have right now typed within our search bar and we also put here textile inside for this query text where we make this text in bold and this looks then like this so always the letters which we type inside of our query are also displayed in both letters and now we also need to display here the remaining text of our search and therefore i put here the children inside and we create another text span where we again put the remaining text inside because before we used here the query text and this time we use here the second variable our remaining text and we also give it here some text style and in this case we put it to a gray color and then it will look like this and now everything works here fine so if i change here also the text within our search bar the highlighting is also different now that we have implemented the local search we also want to add a network weather search and therefore you can put here also again cities inside and if you click on one of these then you see here the weather of this city and the data of this we get from the internet by the way if you want to get here the whole source code of this application you can get it with the first link in the description and with the second link you can get access to my flutter courses where i teach you how you can become a better and more advanced developer now we want to load our suggestions from the internet and therefore i simply remove the current part which we did here we make then use of a future builder and it returns see a list of strings which we load from the api and therefore i have simply created here a weather api where we basically return here a list of strings and these are basically the cities which we have loaded from the internet and i don't want to go into detail about loading the cities from the internet however you find the source code with the first link in the description inside of this method we simply put also the query inside so this is basically the text which we have typed here and based on the search text which we put here inside the cities will be then selected and now we need to simply build all the cities which we get from the internet so first of all we check here if it is waiting and in the case of waiting we show here a circular progress indicator in the middle otherwise we simply show you the suggestions what we have created already in the local search and inside of it we simply put the snapshot data which then contains the list of strings of our cities which we got as suggestions and now if we type here something you see we get here already some suggestions and it is also showing the loading indicator now we want to make this background also black therefore i go to the suggestions and wrap our future builder inside of a container where i set the color of black and then down here at our suggestions we also want to exchange the colors for this text here because right now it is black and we put here simply white inside and we also exchange here this gray color to another color in the beginning we get here an error if we have no search query here inside and therefore we add here to our future builder a special case so in case that the query is empty we don't want to make a search we simply want to show a text which says no suggestions and therefore i simply create here this method build new suggestions and here we put basically a text inside which says no suggestions and we center it and now every time if we have here nothing inside in our query then we show this text and now if i type here a little bit sometimes you see he's loading and we also get an error and this can be caused because he didn't find anything successfully from the api and therefore i go here to the successful case and here is check if we have an error or if the data is empty which we got then we simply want to show also that we have here no suggestions otherwise we have here the successful case and then we show all the suggestions which we got from the internet here you see now that we have no suggestions displayed and we have not an error anymore and now if i type your different things then it is always putting here the right things inside like you can see right now we don't get here any errors anymore and he's also searching everything correctly if we now here click on one of these suggestions we still have this old screen here however what we want to do is we want to change it here so that the data of the api is showing in this case the weather state and also how many degrees we have right now therefore we go to the method build results which is now here displayed on the right side and we simply exchange it here and put here the api request inside to get the results from the internet like before what we also did in the suggestions we return here a future builder and this time we get here a different object back so we get here one weather stayed back therefore i have created here an object where we basically have the city inside the city is then displayed here at the top then we also have the degrees inside some description and also this icon which is here displayed then and then we simply call our api which i have already created and here inside we put then the query inside which we are currently searching and this method again will then get the weather data from an api and i don't want to go into it if you want to check it out then simply check the source code of this project out and now comes the easy part to simply display this data which we got from the api and therefore i simply switch here over our connection state and then we show here again this loading indicator in the middle if we are waiting or otherwise we simply determine if we have here an arrow and if we have an error then we simply display here a text which says something went wrong or otherwise if we don't have any error then we simply return here a successful case which we want to build right now within this result success method we create simply a list view and here we put then all the data inside so first of all we display here text then an icon again a text and then again a text of our degrees and therefore we have here this weather object where we can access all of this data easily we start here with the weather text and therefore i simply have here this weather.city and we display the city first of all after it we want to put here the icon inside and this shows then the current weather state and also below it we have then this weather description which we also got from the api and below it we also want to display the degrees and therefore we create here this new method degrees we have here a text style for it and then we simply return here text widget and this will look like this then and i will also make it centered and therefore i adhere this special case inside and now our text is also centered if you now compare the design to this design which we want to accomplish we are pretty close the last thing which we want to add is this gradient in the background and this is pretty simple we simply wrap our list view our whole data inside of a container and then we add here decoration and inside of it you have this gradient property where we set a linear gradient and then you set here the colors so this is a blue color and a purple color and then you also say that it should start here at this position and it should end at this position and this is what we define here with alignment and now we have here accomplished our beautiful design for our weather app and as a hint invoice ninja has built an app with flutter for managing invoices and this flutter app is open source and you can check it out this app and also the source code on github 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 [Applause] [Music] you

Channel: HeyFlutter․com

Views: 30,839

Keywords: flutter, flutter tutorial, flutter tutorials, flutter search, flutter search bar example, flutter search bar, material search bar android, material search view, material search, flutter material search, ios search bar, flutter search input, flutter search list, flutter widgets, flutter search support, flutter search api, app search api, searchdelegate, add search flutter, search functionality app, gds: yes;, flutter apis, flutter api call

Id: RaACAwvZ61E

Length: 22min 58sec (1378 seconds)

Published: Sat Jan 02 2021