Flutter Search In Cloud Firestore |Full Text Search|Flutter Search in Cloud Firestore|Flutter Search

[Music] hello and welcome back in the last tutorial we have implemented a page view for our entire application so that we can navigate from the entire application app and we have implemented three different screens that is your home page itself our search screen as well as a map in today's tutorial let's learn how to implement a squaring functionality that is searching in flutter firestore so let's continue so think about it how will you implement a search functionality the basic way of implementing search functionality is trimming a word that we are searching into a list that is we have to split a equal word into a list of indexes that will be an array in our file store so without any further theory let's implement it the first thing we have to implement is adding data now if we check our firestore database so if i go into a browser and check this we need a particular field where the field will contain index of the word that we are entering that is the word to be queried should have a index in the form of array so let's convert it to implement a search functionality so to do that we can simply change here that is add word here first so we can start adding words in our list so to do that you can simply change the controller to add controller and rename this add controller cool so we can also change square controller dot clear so now here we have to find a way so that anywhere that we will be entering into our adword here column that is text field it should get some equal indexes that is a list of indexes which will be array in our flutter firestore that is in our firestore database so to do that we can simply come above the here and we can declare a new material so let's name it upload data now it will take a string of name and this metal will be asynchronous so and in the following method we have to first take a list that will be empty list of words so we can declare here a list which will be in the form of string and here we can split the list by just taking the name and we can type your name dot split now we have to enter a pattern here so the pattern will be just a blank space and similarly we can create an empty string and this will be just empty string let's name it index list and it will be empty now here we have to plant and nested for loop so that we can go from word to word to split it along our list to do that we can simply write it for int i is equal to zero i less than split list dot length and similarly we can increase the increment counter for i and again one for loop that will be nested in it so i can write here end j is equal to zero j will be always less than split list in the index of i dot length its length and of increment counter of i and similarly it will increase thoroughly to the for loop by typing j plus plus and in this next test loop we can create an index list which is empty as you can see here and here we can add a split list that we have created inside this for loop by split list under the i and it will take a substring and the stuff till i will have a start index and a index so the start index will be i and the end will be j itself and similarly we want our query in a lower case way so we can type lowercase you have a semicolon here after our for loop works that it splits the entire word in the form of this list which will have a pattern of the empty space that is a blank space so we can simply initialize a database here so we can get object instance by here by typing final database is equal to firestore not instance now we can simply write a database dot collection let's make a new collection of a path so let's give this collection a name of products and similarly we will be adding here a data in the form of key value pairs and the first key will be product itself which will be the name that we have provided in the argument of the upload data meter which is this string and also we will have a search index key which will take the index list itself now it was all for the method so let's create a button here so that on press it will submit our data to the firestore so i can come down here below this text field so now let's try uploading our data in a form of split way so i can type here words so let's type your eggs and upload the data now let's see if it are it is on list or not so just reload the browser once now here you can see a new collection is created under enoch products and here you can see two fields that have product another search index and you can observe that our search index will we have a particular pattern that is having a blank space in between the words so we can query on the particular product name with the help of the search index so now let's create a stream builder for the search index so that we can upload so that we can get all the data from it so after these things let's upload some more data to it now if we see our database we will see a number of documents created here having a product and a search index so now now let's query it so i can just remove so instead of having a container we can just remove our container from here and we can give it a body of a column itself it will have a children give it a semicolon here and i cannot break it here okay so it will have children say a children of expanded now yeah we can provide a child of a column and it will have a children against ones so let's say a children of a container let's say you have a child of text field having some controller i have a controller text editing controller here so i can write here text editing controller and similarly some decoration of input decoration okay so we have our textvideo so let's create a widget for retrieving all the data from the fire store itself after this container i can create a more expanded here and it will have a child and we have a child of stream builder and we can take a child of a stream that is a stream builder now this stream builder is going to take a stream now we can provide a stream by taking an empty string for our search value so i can go up here and declare a string here so i will name it a string let's change the string okay so i can provide you if the search string is null or search string dot trim its stream value is empty now we will get an error here because we are retrieving documents from the files to itself and the file store retrieve all the document in a form of document so we have to provide a query snapshot here as a type of stream builder so i can write a query snapshot so now if the search ring is null or else it has a blank space in between we can throw an internal operator in it so we can say that if it is so i will take the firestore dot instance from our collection of products let's cross check the our collection once ok its products and from products we will get the documents and if we don't have documents i will just retry my instance of the products and here i will search by typing the where parameter and here inside the field i can provide here if it contain a search index key which is this the search index array so i can come down here and provide an optional value of file store which says array contains now the array contains the value of the string we can get its snapshots and now after constructing the stream we can give a trailing semicolon here that is comma here and here we will declare a builder for a stream builder so i can write here builder now this builder will take a context as well as a snapshot so now we can check if the snapshot has error or not just by using if statement so i can write if snapshot dot has error i can simply simply return a text to the user we got an error and we will display the error by using the and notation dollar notation by snapshot dot error good now after this we can use the form of switch statement to retrieve the condition of the document so i can declare a switch statement here which will look after our snapshot so i can write snapshot dot connection state so we can declare some cases for a connection state itself so i can write here a case one if the connection state is in waiting form if we are waiting for it so we can return a size box which will have a child of center in the center widget it will have a child of lottie dot acid let's retrieve our animations so let's look we should which one should be you so under the animations i can provide a loading tool dot json loading to json your semicolon here now the next case let's close it here similar from here so the next case can be connection state dot none if the value is none we can return a text oops no data present and after this case we will retrieve the case of connection state not done if our operation is done so we can return a text again saying we are done now you won't get this condition in any how but still we have to retrieve it for our statement so we can also provide a default statement here which will return now this will return a new list view now this these two will have children now instead of widget it will have children in the form of snapshots so i can write a snapshot dot data dot documents now we have to match these documents with the document snapshots that we will obtain from the files to itself so i can write a document for a document snapshot let's give it a document and from here we will say it will return a new list style in the form of two lists so we can close it from here formal document once and in the list style we will have a title of the text in the form of document of product itself so i can write under product press ctrl n s now you can see we are getting all the documents here so if i just trying searching here but before searching we have to change the state of the text editing from here so i can just go up in our text field and i can write here on change it will take a value and set the state of this value to a string which will be empty which is the search string so i can simply write a search string is equal to value in the form of lowercase press ctrl s format document once now let's try it out so if i type so if we type here detergent we will be getting detergent and in the case of eggs i will write eggs i will be getting eggs and let's try it out for milk we'll be getting milk for this example we have only limited options here but if i tried entering other sentence that we don't have we will be getting no value so if i write here y we have no value but if i write here x will be getting eggs and similarly for cheese we'll be getting cheese now this was the basic squaring concept that we are using in our further lectures to implement search facility in an advanced way but these are all the basics that you should be having in mind to implement the querying only you have to implement the array of the search index having a trimmed value of all the letters with a blank space for a better query search and in this way you can implement a search query just by typing the name of here detergent here and thus you will be getting the value now i will see you in the next lecture where we will be saving our seating location of a particular store and also making some video better along with our search from friday so i will see you in the next one goodbye

Channel: Abhishvek

Views: 9,441

Keywords: flutter search tutorial, Search in Flutter, flutter firebase search query, flutter search in firestore, flutter search bar, flutter search, firestore search in flutter, full text search flutter firebase, full text search in cloud firestore with flutter, flutter search listview, flutter search firebase, search in cloud firestore, flutter search cloud, flutter search cloud firestore, search in firestore, search in firebase flutter, cloud firestore search flutter, search flutter

Id: 3geFMggQj74

Length: 13min 46sec (826 seconds)

Published: Mon Jul 27 2020