How-To add Search Functionality in Flutterflow

hello my name is Anya and today we are going to add search functionality to our flutter flow applications so right now I have an application that I've connected to Firebase so I have a data type called fruit and that fruit has a name as a string I also went ahead and added some fruits directly into the database so we can test with that now here I have a blank page and I'm just going to go ahead and drag a column into that page in which we will add our different elements so I want a container on the top that I'm going to stretch to maximum width and that will just hold our text field input for searching and actually querying the list view which I'm going to have under now within the list view I want to have a card and then a text field on that card and I'm going to add some padding so that we can see some differentiation between all of the different cards that we are going to dynamically populate with the fruits in the database so to do that we need to go to our list view backend query and we need to add a query collection where we are just going to get all of the fruits in the database so this will dynamically add all of these children for each of the fruits but right now instead of showing hello world we want to show the name of the fruit so this is automatically referencing the fruit document that we called from the back end query and we just want to show its name now we can go ahead and preview this and we can see the fruits come up just how we want now let's do okay now let's do something with the container I'm going to go ahead and add in a column here and then within that column let's add text that will say search for example let's add a text field the inputs and then let's also add a button to actually call the search now I'm not really making this as aesthetically pleasing as possible but it should work so let's set up some logic I'm going to add an action to this button here and it's going to be under backend slash database simple search on the device the search type is going to be firestore collection and we are going to look at the fruits in the database and the searchable fields that it's looking for when you put in an input is just going to be its name now the search term is going to be this text Fields value so under widget State we are going to be able to extract that value and we're not going to give it a Max results now if we go on the list view we can actually make this point to those simple search results but the way we are going to do that is not by altering this list view it's by actually creating a whole nother list for you because as it is we still want this to show all of the fruits when there is no value in this text field and if we were to map this to the text Fields simple search results that wouldn't be possible so instead we need to duplicate this whole list View and add that in now I'm going to call this list view search and keeping proper naming conventions just make sure that you don't get things mixed up and we are not going to have a back-end query but we are instead going to generate children from the variable I'm going to call this search results and its value is just going to be this simple search results with no further changes and you can see in the red box over here that that's what it's referring to if we confirm we can see that this widget will now generate its children dynamically and we can see that all of this is made but now we need to go ahead and map this text back to the simple search results items name now the last thing we need to do is we can't have two of these on the page we need to conditionally show either so the way we are going to do that is using conditional visibility over here foreign whether the search is active or not using a custom state which is sort of like a variable that just lives on this page we are going to call it search active and it's going to be a Boolean a yes or no value and initially it's just going to be no now we can add in our conditional visibility and we can say that under page State one search is active this element is not visible which we do by applying the opposite statement so when the search is not active this element is visible and for the other one our condition is going to be when the search is active but we haven't really ever changed the value of this Boolean so we need to do that here in the same action chain where we are starting this simple search we need to also go here and update our page state and we are going to make this search active true now we can preview this here if we were to search for orange oh I don't know we can see that orange comes up and we can change that to watermelon and that is what comes up the only thing that we would do now is add another button which would clear our search so we can name this search and we will add another button whoops that will be clear oh I am not copy pasting into the correct element and we can call this Latin clear again not making this pretty let's just take this container and make it a little bit bigger now we can have that we can use the same sort of conditional visibility for these ones clear should only be visible when the search is active and search can be visible when the search isn't active again you can change these depending on your desired functionality maybe you can make it search is only visible when this has some sort of value in it whatever but I just want to leave one last thing and since we copy pasted it that is what remains but all we really need to do is update the widget state to say that when we click clear our search active is going to be false and we are going to go ahead and clear all text fields oh I did not check that box clear text fields and then we can select that we want to clear text field one now I can preview this here we can see that the search button is visible but the clear button is not we can search pair click it and that disappears but the clear button is shown and pair is what we see and when we click clear everything resets so I hope this was helpful and thank you for watching

Channel: Aanya Shah

Views: 9,436

Keywords:

Id: Ja_SE4aG2EE

Length: 9min 51sec (591 seconds)

Published: Wed Jul 26 2023