Flutter Advanced : Build Beautiful Material Search App or Integrate it with Any App

I was up guys welcome to another flutter advanced tutorial and in this video we will talk about the most awaited feature which you people asked me to integrate in any flutter application which is this search bar okay and many of you I have seen that was struggling with the this search functionality if you want to implement that in your application and I don't know whether you know or know it or not that top flutter has some kind of implementation for achieving this material search bar so that's what we will do in this video so keep watching if you have no idea how to implement a better search bar so as you can see here I have a normal screen where we have just scaffold and app bar and an action which is saying such ok with it is having a search icon and on press of it I won't implement some something which which is kind of which can give me a search bar and then I'll type something I can get some data out of it and those are the things which we can do ok so um what we can do here we will go here and we will create a new class let me just increase the font size a little bit maybe that can help okay so font size could be 22 yeah this is looking good and I'm going to presentation mode just so that you can see the screen as of now so what I will do I will create a class let's say data search ok and I will extend this class with our search delegate which comes with flutter okay and I can just say it accepts a string as the generic type and now if it will give me an error it will say that you should be creating for missing overrides okay so what I will do I just press on it and it will create some overrides for me okay now um it is saying that this is the build action okay so what is this build action let me just write here so this purpose of build action is when I will have that search bar what kind of actions I wanna perform okay so I can just write actions for app bar okay then we have a build leading okay so what you want to have in the leading part of that app bar okay so we can say leading icon on the left of the app bar okay and then we have build results okay once so before going to this part let's go to this build suggestions so what you want to show when someone searches for that particular in that particular screen so you want to show something so so when someone searches for anything searches for something okay and when he selects something out of that search suggestion then show some result based on the selection okay so that's what we are going to do so um as you can see first of all we have to build some actions okay so what we will do and it takes a list of widget okay so what we can say we will return a list okay that's that's clear and now in the actions part what you want to show so let's say we want to show an icon button probably okay and what it can say it can say I can start clear if we want to clear anything which are which is registered within the search bar let me just make it like this and it should take clear yeah and on the press of it we don't want to do anything right now but we will do that later and this is the only action we want so we are passing this action to the list now it is saying build a leading so whenever we will have that search bar then now we would like to have some back with some kind of animation so what we can say we can say um we want to have another icon button okay where the icons should be an animated icon this time and yeah this looks good and now it will take a few parameters as well so let me just do this and then it takes few parameters what are they it takes an icon and then a progress okay and on pressed on pressed we don't want to do anything and on for the icon part we can say we have animated icons library here from where we can get this menu arrow okay or it should be menu arrow and to one second what's what's happening why suggestions are not coming I don't know let me just yeah no it's fine so we have this menu error and the on the progress we want to give some kind of animation to it so once you will extend this search delegate you will get another property okay so you get some properties let me just show you so if you will press control o on your Android studio and tell EJ then you will get this screen which is the overrides or what what you can do just right click on it and go to there's a generate option then override methods and this same screen will appear and here you can see we have this property transition animation another property is query and then we have some other other methods which we can use one is show results close and show suggestions okay so I'm here in the progress we will pass their transition animation which is a property which we get okay and it should work now we are done with this build leading now we want something which is build seditions okay we want to show something in the suggestions part so what we can do for that so let me just go to the normal view now okay and I have a list here which contains some it is information of India so let me just try to go to that list if I can go so what's what's happening I don't know one second yes so this is the list which I will just copy here and I'll paste it here with this data search so I'm little bit 'space here let me just go back to the presentation mode and then you can see we have some cities here which is just a list of string okay and what I will do I'll make another list of string here which I can say that's a recent cities okay whenever you perform if you want to have a good searching user interface then you would like to show some history to the user as well okay so that's what I will do so I'll just pick any four to five elements from here let's say these four okay and you don't have to follow all of this stuff it's it's totally your choice if you want to do it okay so what what I am doing I am just hard coding it that these are some recent cities which he has visited and there is a lot of option which are he can still visit okay and now what I want to do when that person is asking for some suggestions okay when he is gonna write something in the search bar I want to return something here so let's say so as I told you that you get some properties out of it so one was the transition animation another property you get which let me just show you again is this query okay this query is on that property which is the text which user enters in that particular text field of the search bar okay and we want that query okay so what we want to do we want to have another suggestion list let's say suggestion okay what's a spelling suggestion list okay so how we can get this list so if let's say the query is empty so that means if the user hasn't entered anything then what we want to show we want to show our recent cities otherwise if we had entered something then we want to show the options from our final cities so this is our cities okay now we have the suggestion list now what we can do we can implement a list view and we can show this data in the list view okay so what we can say we want to show a list view dot builder then it will take this item builder where we will pass the context and index okay and then it will ask what we want implement so we can say a list tile which we want and then in the list tile we can have something called let me just close this a leading icon in the leading icon I want to show an icon which can be icons dot city's location city this will look good and then in the our title part what I can show here I will pass the suggestion list here and sorry so first of all I will wrap it with a text widget then I will pass a suggestion list here and then I will use its index and that's it so this is how I will get that particular the string of that particular index and then what we can do apart from that we need to also give the item count so we will ask for suggestion list dot length okay and now we can go back to our normal mode and now let's try to perform our search and see what we get okay we haven't implemented this build results yet but we will do that okay so this is what we have now as you can see we have this Search app app bar and here we have this search button and on the press of it we want to do something so that we can see this show option so one idea was when you want to show us search bar the one idea is that you will implement your own text field on the top of it then you will undo some decoration with it then so you can implement it by yourself but flutter actually gives you a very good option of using this such delegate and you also get this method which is show search now okay it will take two things one is the context and second one is the delegate okay so in the context I will pass the context which I have and in the delegate portion I can pass my data search which I just created okay and yes that's it I guess yes so I will perform the hot reload now and now if I will press on this search icon as you can see we have this search bar I haven't implemented the text field anywhere as you can see I have just this list view which shows my recent and the suggestion list of the cities so because I haven't entered anything here so that's why we are getting this recent list so if you see here recent cities have this New Delhi for the barrage podcast Abad and this is the my recent list with the arm and icon on the left and text on the right now let's say if I want to click on this cross nothing is happening this cross is actually our this build action which is which takes a list of actions and I have given only one action which is this icon button which is saying just clear right now it is not doing anything then we have this back arrow which is this a build leading method actually gives us this way of having this icon button or any widget which we where we have created this animated icon so is this doing this animation let's press on it and right now it is not doing anything because on the press of it we are not actually doing anything so what we can do here so basically um there are two things which we can do so on the press of fate if we if I show you the overrides again then we have something called close here okay and then we have short session and so results so I just want to close it so I'll call this closed method I'll pass the context and in the result I don't want to pass any results so I will just pass null here and we should be good to go then for this actions part on the press of this cross icon what I want to do I want to say that query should be query a query should be empty okay when I press this cross it will look good I guess okay so now if I will press this button then you can see there was some kind of animation and if how you can see that easily is when we implement let's say a drawer okay so what we can say here let's have a drawer so that we can have that hamburger I icon on the this part and now if I will press this search then you can see there was some kind of animation which actually converts these icons okay so it's looking good and you don't have to do much now if I will write something here once again if I will write something here then you can see I got the whole list here now if I press on this cross it is again it made this icon if I search it again I press this cross button then you can say it cleaned it and it is just showing me recent cities and one more thing which you should see that I haven't used set state anywhere which is which is why because um this such delegate is doing everything for me in the background so I don't have to worry about anything when I am using this particular portion okay so it's looking good but now let's search something so let's say I want to search Agra so um it is not actually doing anything it's just showing me the whole list which I actually don't want okay so we want to actually perform something so what we can do here we can um we have this suggestion list and we actually want to do something with this now because we only want to show something which is actually happening there okay what I'm saying is this you will understand so basically whenever you press search for something we want to show those items only which actually matches that particular search string okay so how we can do that so here in the suggestion list what we can do we have this cities now for the reasons it is it makes sense because query is empty but for the city is what we can say we only want to show where so we will apply a clause here that city is dot where okay where we can say our world we have to perform an operation here so we can say let's say this is our string so this P dot starts with this query okay and then we can just say this and dot two lists and it looks good so what's what I am doing here is rather than returning the cities I am checking whether if this P is starts with this query then it will give me a better idea so let's search now Agra and as soon as I pressed a you can you got all the Agra or anything which starts with a and if I'll just pressing it then you can see I get this Agra and this looks now much better let's let's write something else let's look into our cities what we have so let's try Jaipur and as some as soon as as soon as I press J I have this j-pod Jalal poor in Jabalpur then it's working fine so now a one more thing which we can do is highlighting our text so we can even increase even increase this user experience experience by how we can do that let's just copy this part and rather than using the normal text let's use something called maybe a rich text okay so um I don't know whether you are aware of it or not so basically rich text takes a text spin and then you can make some part of a text bold or italic or give some different colors to portion of the text so that's what we are going to do him so this text is basically if you will see it takes um it takes a text spin okay so we will give it a text spin okay now this text spin takes a text which is a string so here we will just give the first that's a first element so how we can show that so in the text portion what we will do we will ask our suggestions list okay dot I okay dot substring okay and we will bold not I it should be index okay and we will bold only the portion which user have entered okay so we'll start from zero and go to our query dot length and what we want we want to show this text to be bold okay so if you are not understanding we will just understand so let's make the text style as let's give it a color start Lac and and what we can do we can give it a font weight and then we can say font weight dot bold okay so what we did now nothing is appearing here don't worry about that so what we are doing we are actually taking the first letters which you will type and we want them to be to look bold okay and then we have another property here which I will just use here so after this texts pain we have not after this inside this text span only we should have a children okay this children again takes a text spin so we will use another text spin here and in the text text text portion what we will do we want to show other part of the string which is sub suggestion list index dot substring and the query dot length so it starts from query dot length and we want to show it normal like we don't want to imply anything like bold or anything so we will give it a text style again and now it should be normal so colors we will make it a little bit gray and that's good so now you can see we have these colors in the gray shui which which are the recent searches now if I will search it's an N here so you can see n is bold and that's that's actually increase the usability of this such functionality and you can see that this will give a better user experience to user now if I search New Delhi then you can see the text which I am entering is actually becoming bold okay and this looks so much better now okay now this this is done and now what I want to do when someone clicks on it let's say I am typing Jaipur okay once again let's say I am typing Jaipur and once I click on it nothing is happening so in the list styles font type method I want to do something okay what I can do here I can ask for show results okay that's another method which we got so let's just go here and you can see we have this show results okay which takes a context so um what I can just say here I can um let's say yeah that's fine so we can just say show results okay and we will pass the context here that's fine now in the results part we are not doing anything so what we can say we can return maybe a card a good card maybe okay we can say let's say color we can give some colors to it let's say give it a red color maybe okay then we can have some kind of shape so let's give it a stadium border maybe anything you want and in the child let's in the center let's give it another text which actually just reflects the query okay I don't know you can implement it in many is right now it does not make any sense but just to show you what it do it's something like this and when I click on it you can see J okay I just pressed yeah okay not a problem okay so watch what's happening here let's just remove this part and let's wrap it with container probably let's give it a height and width so height let's say hundred weight let's say hundred and let's let's not try it so I file press search I press on New Delhi you can see I have this let's write something because it won't show anything otherwise New Delhi if I press on it you can see New Delhi now here and then we can also make it in the center so it's totally your choice if you want to show it and this looks good if you want to do some operations here you can do it okay and it's you don't have to show the query here you can actually take what worry you have you can pass the data from here which you want to show to this particular build result so this is the use case basically which I wanted to show you if I just press this go back then I have this then I have this search bar I can search here and it looks good okay I have this implementation it looks bold and everything it looks totally good so this is how you can implement search bar what I will do I'll try to give you a better implementation of this using our pokemon app so maybe in the next video we will be doing some data fetching and using this search bar to search the pokemons and then we will go to the next video about how to have some more features in the pokemon sap so if you want that please let me know in the comments and if you enjoyed this video then do like this video and subscribe to the channel to not the subscriber because I am bringing this so so much awesome content for flutter here and please press the bell icon if you want to get the future updates and the source code will be available on github I I post the link in the shun and join the flutter let's letter group on Facebook if you want to get more answers to your questions and that's it I guess and go to github gave a start to my repositories and that's what I need okay so if you enjoyed then like the video for sure bye bye take care

Channel: Codepur

Views: 156,779

Keywords: flutter, flutter sdk, flutter tutorial, flutter tutorials, dart, google i/o 2018, flutter search, flutter search bar example, flutter search bar, material search bar android, material search view, material search, flutter material search, flutter search list, flutter search input, ios search bar, mtechviral, flutter widgets, flutter io

Id: FPcl1tu0gDs

Length: 24min 46sec (1486 seconds)

Published: Sat Sep 15 2018

Reddit Comments

[u/bramwarsx]

Very useful, thank you!