Flutter Autocomplete Textfield Basic and Customization

hi friends i'm mazaftab from easy approach and welcome back to another video in this video we are going to create autocomplete and we are going to see how we can use the autocomplete in flutter application so we will just put some query over here and it will pop up all the available option that matches this query not just that but it will also highlight the match keywords or the match characters in the in the available options which can only be achieved by customizing the default autocomplete that we have in flutter so we'll not just see how we can use the autocomplete in flutter but we will also customize it based on our need so let's start implementing it but before we actually start if you are new to my channel make sure you subscribe my channel because i have some great and cool videos on estate management that you can watch and clear your confusion if you have any and you can watch those videos by clicking uh the card that should be appearing at the top right of the screen anyways i just created a new flutter project it's totally a brand new project i haven't done anything fancy in this project yet uh only i have just replaced the default home page which is like the counter example that we have in the default application i have just replaced it to the home screen which is just a staff stateful widget having scaffold and an app bar so first of all as you know we give some query in the autocomplete and then it pops up all the available option based on the query only the option that matches the query so we have to we have to pre-define all those options uh somewhere like you can you can store the options on the back end i mean you can fetch the options from the back end and then you can match based on the query or you can also store all the available options uh locally in your application so what i'm i'm going to do in this example in this tutorial i'm going to store all the options in a json file in project asset directory and then i'm gonna fetch all those option and then i will try to like uh match uh or show all the options based on the given query so first of all what i'm gonna do i'm gonna create a new folder in the project and it will be the assets folder and inside it i'm gonna create a new file and it will be a json file so i'm going to say it data.json and it will have some list of a string so i have uh some uh dummy data that i have created it's just uh the names of my close ones brandon family so these are basically the you can uh imagine them as a user names and we are going to search user names from the autocomplete so so that's the first thing that you have to do and then we have to write uh the code for basically for fetching uh all these uh all these uh i mean this list of json uh in in our application so that we can see we can show them in the autocomplete but before actually uh before we actually fetch these we have to provide the reference of this file in the pub spec since we are going to use it from the assets and we have to define the assets before using so what what we have to do in this we can just uncomment this and then we can first of all provide the assets directory and inside it we have data dot json so that's the first thing that you have to do and then you can close this and also this since we just will be just working on this main door dart so first of all we will create the future for fetching the data the json data from the assets so that we can show it further for for the autocomplete options so what i'm going to do i'm going to just create a future and the name should be like fetch autocomplete data and since it's a future and we are going to perform some asynchronous things so uh just add the async after the future name and then mostly what you'll do i'm also going to have a boolean variable for the is loading because uh while we will be fetching the data from the from the assets so we have to show some sort of loader uh so that we can make the ui more uh interactive so so first of all before fetching exactly we have to set this is loading to true and once we will be like done with the fetching we can make this false and in between we will write the code for like fetching the data from the json so first of all what we have to do uh we will get the string the data in the string form initially so let's create a string variable and you can say string data and you have to use root bundle or like getting the data from the assets and then you have to use load a string and in the key you have to specify the path where your file is actually is stored so we have assets ada.json and since this load string is a future so you have to also use here a wait before actually assigning it to a string variable and as you know we have this the data in the data.json file is obviously in the json format but we are uh this future will just return us in the string of data so we have to parse the string into the json object and since this json object is just a list of json uh strings so what we can do initially we can just create a list of dynamic data since uh it will be the default type of it and then we can explicitly uh cast the data into a string so and we can say just json equals to json d code that you can use to convert the string into the json object and over here you can just simply pass the string data so this will just return us the list of dynamic data and then we have to explicitly parse or explicitly cast this dynamic data into the string so for doing it you can create first of all the list of a string and then you can say json um string data i'm not very good with the namings so now what you can do we can use json and then we have cost and over here you have to specify the top type in which you want to cast this data into and this is how you can convert this list of dynamic data into the list of a string and after casting it we can as this is a local inside this future we can have a global variable and it will be like late list of a string and the name of you can say autocomplete data and we can inside the set state we can say um autocomplete data equals to json string data so that is good and so we have done with the fetching the data which was essential uh before actually uh having the autocomplete so what i'm gonna do now inside the body i will first check if we have is loading true it means the data is being loading is being loaded from the assets so in that case we can just simply show in the center we can show a circular progress indicator to make the ui interactive and if that's not the case and we have the have we have done with the loadings obviously we would have the data so in that case we can uh we can basically make some customized uh widget for showing the autocomplete and the rest of the stuff so we can wrap this column widget into a container so that or maybe inside the padding to make it more optimized and to have padding around the content and we can have 16 pixels of the padding so first of all let's format the code a bit and then inside the column widget i'm gonna have firstly the autocomplete widget and in the autocomplete the very first thing which you have to must provide is this option builder so this option builders inside this we return the list of all the available options that basically matches uh the given uh query so let's see how it works so first of all inside this option builder we get the text editing value and it is like the value that we can get from the text editing controller from some text field we can easily get the value from it in form of a string and first of all what we can see um we only have to show the available options when we have the value not empty we have we have to have some string provided by the user so that we can return uh the option based on the query so first of all we have to make sure if the text editing value dot text is uh not empty so if it if it will be empty then we will obviously return uh the empty a list of the available options so if sorry first of all we have to see if it is empty so if it is empty then we can simply just return a constant uh list of a string you can over here just pause here the string so it will be just an empty string empty list of a string and then in the case when we have some value in the text editing value uh which is obviously not empty then in this case we have to provide all the available options that matches or that contains the provided query so for that what we can do we can return autocomplete data and inside it we have we can filter the each of the words that we have inside the autocomplete data and we can check if the word contains and before actually checking if the word contains we have to convert it into a lowercase so that we can uh just just compare the lower case we don't want to exactly match the case also so that is why it's a better to convert it into a lowercase and then you have to check if it contains uh the query which is basically the value.text and it it should also be converted into the lower case so if that's the case we have to return this uh the list so we will only return the list of the elements or the words or the usernames that matches or that contains the provided user given query text and we also make sure to convert it into lowercase to ignore the cases while matching after that we can restart the application to see what we have on the screen let's open the console also so that we can see the progress and you can see we have now the autocomplete and if i say something so it's saying the autocomplete data has not been initialized so basically okay so we haven't actually called this fetch autocomplete data and yeah so we have to call this uh once our application or this screen particular screen in which we are using the autocompletes it's uh started so over here we can just uh since we just want to call it once so we can just call this inside the editor state and that's also the reason why we could not see the loader also so let's restart the application okay so this time it should show the result yeah so you can see now we have uh we have provided a and based on this query this character it's showing all the available option that contains this a so if i like write more specific so you can see this string the sub string uh sorry basically this is string contains the options basically contains this string so we only able to see the options that contains this string so that's great we have uh done with the first phase which is uh how we actually use the autocomplete and it's uh not uh it's not actually the customization it is that we are just using the default autocomplete now we will see because you can see uh the current text field that we have in the autocomplete it's pretty boring and it's pretty simple and basic so we want to like style the text field like we do in normal text fields but if i want to show you the options like there should be some properties like uh style or decoration that we have in the text field inside the autocomplete also but you will not see any option for like styling instead what we have to do for customizing or for styling the text field we have to override this field of view builder so by overriding this you can specify or you can customize the text field appearance and also the decoration of it so let's just specify this field view builder and there are few parameters that we get there are a few things that we get inside it the first one is the context and then the second thing that we get is the text editing controller that we should associate with the text field that we will be using inside it so we get some few things inside this uh inside this callback and we have to associate all the things uh with that with the text editing with the text field that we will be using inside it so first of all the thing that we get here over here is the controller which is the text ending controller so that's the second thing and if you can hover over it you can see the third thing that we get inside it is the focus note and the focus note should also be associated with the text field that we will be using inside it uh like for customizing it so you don't have to do anything with these unless you want to like gain more control over it but you just have to pass it to the text field that you will be using inside it and the autocomplete widget will automatically do or use these stuff and then the third thing or the fourth thing actually is the is basically the void callback and it is basically for on editing complete so so we have the on editing complete callback in the text field that actually gets called when user press explicitly on this hardware ok button once you're done with the or with giving the value in the text field so on editing complete so this is just a white callback and you just have to pass it you don't have to do anything with it now inside it you can return the text field which you can obviously customize based on your need but before doing anything you first have to associate all the things with this text field that you get over here and if you don't if you won't do it then obviously the text field will not work as you want or basically the autocomplete thing so the first thing is the controller that you have to specify and then you have the focus node and then we have auto on editing complete and you just have to pass the on editing complete so we haven't done anything yet i mean the customization with the text field but still i just want to test uh because we just have uh override this field view builder and i just want to see if so far we are on the right track and this should be working so if i refresh it and make sure that we didn't get any error in the in in the console so we are not getting any error and this should behave same like it was behaving before so so if it is behaving like same like it was before then it mean you are doing great and if you have missed any of these obviously then in that case you will provide the query it won't show you the options now we have done with the text field now we have to customize it and we have to add some styling so obviously we can just do it like we do in the regular text field we can just have the decoration and you can have the input decoration and then we can have the border and i want to make it like a rounded border sort of thing so we can use outline input and we can provide some border radius like uh maybe around 8 pixels and then i want to have the border of color gray very light gray actually also use the exclamation mark here and since this is just a border we have to specify the focus border and all the other borders also you can just probably copy and paste it and just change this to focus border and then refresh it so you can see um perhaps we can make it 200 to make it a little bit more prominent or how about 300 yeah 300 looks good over here also and then we can have another border for enable border when our text field is enabled so these are all the states and we have to provide the styling for each of the estates and also if i want to add some hint then obviously i can add hint and i can say search something obviously also i can have the prefix icon and i can add the icon of searching that's great so if i refresh it you can see now the text field that we have is pretty much customized and it's not like a classic uh text view but it is optima it is customized and it is styled uh we can see the border you can see the hand we can also see the icons so this is how you customize uh the text field that we have in the autocomplete by overriding this field view builder so we have done with custom we have done with the basics of autocomplete we have done with the customizing customization of the text field that we have in the autocomplete and now we are going to see we are going to see how we can uh how we can customize each of these options like if i can show you this is just showing me the a single string how if i want to what if i want to customize this mars after of the name of my actually the me so what if i want to customize it like if i want to add some icon before it if i want to make it bold or also if i want to add the highlight feature that we are going to do very soon so obviously in that case we have to customize the view of this option okay so over here this option builder is just to specify the list of all the available options but how about if you want to if you want to customize each of the view of this option builder so what about that so for that case we have another callback which is called options view builder and this is actually to customize each of the options that's appearing uh in the in this uh drop down sort of thing well but before initializing or before defining it i have missed a small thing and i want to cover it before it which is how about if uh what happens when someone select some value i mean from the from the autocomplete how we can get the value or the selected value so for getting the selected value it's it's quite a simple uh thing which is uh we have the on selected uh callback and inside it you can get the value of the selected item or the selected string whatever the data is and then you can simply use it like if i want to just uh print it on the console then i can simply have a print statement and let's run it again okay so if i just say m double a z and if i explicitly tap on the option uh then you can see we can we have this uh string uh printed on the console and also if i just uh tap on this ok button which is the hardware button it will also work let me remove this whole thing you can see it's also working and it's giving me the value now again let's come back to the thing that we were discussing how about if we if you want to customize the view of the option so we have for this we have options of view builder and inside it we have also a few things the first thing is the context that we get and the second thing is the on selected which is basically the call back when someone will tap because now we are customizing the option uh the view of the options so obviously we have to explicitly specify the on tap on each of the each of the options so this is the on selected that we have to call when someone uh taps on any item so you will get um you will be more clear when we will use this and the third thing is the list of uh list of iteratable string options okay so we can just say it options select it okay now what we have to do we have to return uh the widget that will have like that will have the list of all the options so obviously we are going to use the list view builder for that purpose so let's first uh return list view dot separated so we can have a little divider between uh okay and then we have to specify the required stuff inside this the first one is the item builder you specify the view of each of the item and inside it we have the contacts and we have the index of the current index of the element that is being rendered on the screen and then we have the separator builder and inside it we again have the contacts and then we have the index and over here we can just simply return the divider widget that's good and then inside it we have the item count which is also required and you have to specify the value or the number of items that will be appearing in the list so it will be obviously based on the options that we are getting that we are getting in the option view builder so we can just say options and then we can just provide the length of it so that will be good to work and then we have to specify each of uh the view of each of the item so or we can just simply use the list tile for this and inside the title first of all let's get the let's get the current option you can just say options dot get element or element at and then you can just specify the index and over here you can just simply say option since we have the list of the string you can just simply say option dot to string or you can just probably say options because that will also work but since so we we don't have the explicit type over here defined that is why it's uh giving the error no okay sorry we have to specify here the tax widget instead not just a string and inside we can just say option and we have to convert it into two string okay that's great so let's test it it's not complete yet but let's test it so if i refresh it or restart it actually so if i search something so you can see it's giving some error and saying no material widget found list style which it requires a material widget ancestor okay so okay we can just wrap this list vu dot separated into a material widget because it is required and now you can see we have the list of each of the elements or each of the options and these are a little bit larger in size since we have used list style and we have customized it but uh still it's like missing something first of all let's add some elevation in the material so that we can see it like popped up on the screen so you can see now the shadow around this you can see the individual items and also let's remove the padding from the top of the some extra padding from the list you can see the extra padding is now being painted hasn't it has been removed and you can see the individual items uh in the list so it's basically same like we have like we had before when we haven't customized the option view builder so let's make it a little bit different so that we can really see the difference so what if i want to add the subtitle also so i can just have a subtitle and i can say this is subtitled obviously when you want to customize it you need to have some special data that you really want to show this is just a dummy but it will just give you the idea how you can customize uh this uh the option view that we have in the autocomplete so you can see now uh the things are pretty much organized and we have customized it we can also use the uh any other widget like we can use some image with the user we can probably use the flag country flag with the data that we will be showing or anything we can do anything you can customize anything now as i said if i select any of the item you can see nothing happening how however we have specified the on selected and should print uh the selected a string but it's not working it is because you have we have overridden the option view builder and then we also have to override the on tap on each of the item so on tapping of each of the item we don't have to do anything you just have to call this on selected inside it does this also oh yeah over here we have to specify the string that's selected so you can just say option or to string and what is saying the string the object can be assigned to type never this is basically the option view builder is basically a function of a string okay so this should be now working i refresh it and if i tap on any item you can see now it's uh giving the value so yeah so because we haven't specified here the type and that was uh causing some issues so now we can we have seen that how we can customize uh each of uh the view of uh basically the option that we that's appearing in the autocomplete now what we are going to see that we that we haven't actually yet implemented the highlight thing and we are going to add this also what i'm gonna do i'm gonna remove no let's not remove this okay so for highlighting i'm gonna use a package and i found it very attractive and very great package and we are going to use that package so the package name that we are going to use is the sub string so this is the sub string underscore highlight so you can just search on puf.dev you can easily get this and you can just copy the line and you have to paste it in your pub spec.tml file you can probably do after cappuccino icons and then you can click on pubget this will install the package and you can use it in your project that's great so what do we have to do instead of over here just doing this we have to use substring highlight basically what it does you first have to provide the text the whole text that you want to show on the screen and that can be highlighted so over here we will just uh provide the option.tostring that we were before using and the second thing is we have to specify the term so the term is basically the sub string that you want to search in the whole text and only the only the term uh only the string that we have in the term will be highlighted in the in in this whole string that you'll be showing on the screen so the point is how we are going to access uh the text that user has provided in the text field inside this option view builder since we we don't have the access of the controller inside it and we don't have the access of the text that's given by the user so far in the text field but instead we have the controller and we have the text things inside this field view builder so what i'm going to do i'm going to cache this controller and since it's in in the local callback i want to make it global so what i'm going to do i'm going to cache this in a global variable so let's create a global variable at the top late text editing controller and you can say just controller and what we can do now inside this callback you can say this dot controller since they have the identical name so we have to differentiate the class controller with this and then you can just say like this so this will cache the local controller into a global variable and then over here we can just simply say controller dot text so it will give you the text that user has given in the in the text field so let's restart the application make sure we we don't get any error okay now let's search something like moz you can see now the text is being highlighted you can also like customize this highlighting thing and there is the text style highlight and you can just probably make it more obvious or more good so i want to bold the highlighted text so we can just use this and you can see now the text is highlighted and it is bold now so this is how you can you can make uh autocomplete the autocomplete and it is purely uh we have covered the basics of it we have customized the text field we have also customized the option view builder so this is it from this video if you like the video please give a big thumbs up if you haven't subscribed the channel then subscribe the channel and share the videos with those who want to learn flutter with easy approach so thank you for watching

Channel: Easy Approach

Views: 5,435

Keywords: flutter, flutter widget, flutter tutorial, autocomplete, textfield flutter, text, autocomplete textfield, autocomplete in flutter, flutter autocomplete textfield, autocomplete flutter, flutter search json, flutter search suggestions, flutter search textfield, flutter show suggestions, flutter textfield, typehead flutter, flutter custom textfield, flutter input, easy approach, flutter search bar, flutter search list, flutter search listview, flutter search api, flutter packages

Id: gDryje6oPrk

Length: 37min 6sec (2226 seconds)

Published: Wed Jun 30 2021