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

hello there how's it going on in this video we are going to query all of our collections which are under our file store that is we are going to query all of the courses that are available under our udemy clone now if you hover over our featured page we have two sections for featured and top courses in development in this video we are going to query all the courses available under our featured collections now for this tutorial i just have two of the demo courses for now but you can do one thing that is add more courses under your firestore collection and if you want to learn how to add courses you should definitely check this video so yeah under my search screen if you see we have nothing but an empty text field having an icon button of search also a clear button which is implied over the following code so in this tutorial let's search all of the courses available under our fire store but before that some real quick tips if you are new to this channel kindly subscribe and this channel shall provide you premium quality content about flutter all about flutter because we all love flutter if you are done that we are good to go so first thing first we need to find a way so that we will be clearing all of our collections under our firestore that is cloud firestore so for that purpose we can go under our services folder all right where it is here it is so here we have a class of data controller class which extends gatex controller that is we are managing all of the state of our academic loan under get extent management so after getting all the data we can simply write a new method for querying all the data and you know what this method is going to be future as well so here i can simply add future and here i can simply write query data now the following method of query data will be simply taking a string that is the following query string so here i will simply write query string or any sort of argument that you need to provide and here i will make it asynchronous first alrighty so here under this method i will simply return the entire firebase file store collection and from the collection i will simply query if the query string available under argument is available under our collection or not so to imply that i can simply write here return firebase firestore not instance and from this instance we will simply catch up our collections and you know what the collection is nothing but featured one all right so here we can simply assert feature and from here we can simply assert the where clause now the following where clause will be simply taking an entire name that we want to search on and similarly the type of searching we need to provide so for that i can simply provide here the title and after this title we will be needing the type of query method we need to implied on so here if i simply like wherein or let's say is greater than is equal to is greater than or equal to or many of that but you know what for the current situation we will be simply requiring this this argument of is greater than or equal to unless if you simply write here is equal it will be working as well but we don't have to type here the exact sentence that we need to query on but it's not of our job so here we will simply writing is greater or equal to simple as that and here i will simply provide the query string that we have passed under our argument so here i will simply write query string alrighty easy as that and once we have simply queried all of our firestore collection we will simply get all the documents by writing get easy as that all right so we have completed our method for searching purpose now from here we can move under our search screen and here if we observe we have an icon button of search which is somewhere right under our actions of appba all right here it is so here on pressing it for now nothing is happening so we can simply do one thing that is simply remove the icon button from here and assert a gate builder for the entire icon button because the data controller class is extending a get x controller and for implementing a gatex thing we need to get the help of gate builder so here i can simply write get builder all right now the gate builder will simply take these parameters but before that it will take a type so for type i can simply write here data controller easy as that and under the following gate builder it will simply take an unit state for that i will simply provide data controller itself and after this i will simply take a builder and for the builder i will simply provide a value let's say well or any sort of thing so under the following builder we will simply return an icon button so here i can simply paste out the icon button that we have copied cool so here on pressing it we need to assert the following value of the builder so for that i can simply write well dot query data and the following query string will simply take the controller of our text field which is our search controller so here i can simply provide search controller dot text alrighty so once we have queried all of our data we can simply take the value from it by using the then clause and under the following value thing we can simply get the value and the following value will be simply referring to this entire return statement from which we are simply getting all of our data after querying the following string alrighty so yeah for this following value i need to simply assert the following value to a new variable and the variable is going to be under the type of query snapshot so here i can simply write query snapshot to be let's say snapshot data cool so here i can simply write here and the following snapshot data will be simply referring to the value itself alrighty cool so we have completed our on press method but after that we can also do one thing that is check whether we have received all of our data or not so for that we can simply move toward top and assign a new boolean variable so here i can simply write is executed all right so here under this boolean this boolean shall be working if we are simply searching our data or not let me explain to you by writing the code so yeah once we have simply assigned our value from our query data to the snapshot data i can simply set the state of the following boolean variable to true but before that let's make it default by false so yeah i can simply assert it to be false cool so here i can simply write is executed should be equal to true if we are simply received all of our data easy as that cool so we have completed our entire meter now the next thing is remaining is about the implementing the ui so for ui first of all i will simply create a new widget cool so for widget i can simply write a type of widget let's say search data cool and under the following widget we can simply return a list style but before list type we need to simply wrap our list style under a list view builder so for that i will simply use awesome flutter snippets and with the help of that i can simply write lst and b now it will automatically implied entire boilerplate code that we need to write on so here under the item count i can simply add the snapshot data dot docs and from locks i will simply count on the entire length all right and under the return statement i can simply return any of my favorite widget but now i will simply turn a list style cool now the first argument that our list i will be taking on is about a leading widget so here i can simply get a leading to be a circle avatar and under this alka avatar i will simply provide a background image to be a network image easy as that so under this network image i will simply get my snapshot data and from this data i will simply get the docs according to the following index of our entire item builder and from this i will simply catch on the data and here i will simply assert the entity name which is image itself cool now after the reading widget we will we will be also requiring the title of our list style so here i can simply provide a title to be text and just to save our time i will simply copy the following thing and paste it here just change the entity name to title also let's have some styling to it follow following text style cool cool cool here i will simply have a color to be color.white having a font weight to be font to it dot bold also some font size to be let's say 24 i guess all right and after this we will also requiring a subtitle and also i will simply cheat one more time so i will simply copy this and paste it here cool so under the subtitle i will simply assert the author of the following course cool now we can form a document once now we have completed our entire widget of search data now here's the thing which is most important that is about asserting our body of our entire k-fold so under this body i will be simply writing your body and first of all i will simply check whether our query is executed or not so here i will simply that if executed is true i will be using a ternary operator and after this question mark i will simply asserting search data which is our method for entirely style that is our listview builder which is search data and if it is not so we will simply return a container which will be an empty container all right it will also have a child to be a text but before text i will simply wrap it under center so here it will have a child to be text let's say search any courses have some styling to it now here you can see we have implemented our ternary operator that we have not searched anything that is we have not executed our query so we will be simply getting the following line which is search any courses so now let's test it out so here if you check our featured page we will simply have this featured courses which is machine learning and web development so now let's do one thing that is search our entire thing or web development so under our search i can simply write here my query which is nothing but web development but i will not write the entire sentence by simply web so now let's test it out so yeah after pressing this you can see we are getting our data here which is quite ugly okay let's make it some better good so here i will simply decrease somewhat of font size of it let's say 16 shall be enough cool it's cool and also makes like it 22 all right so we are getting our data here which is web development now we have also one button here which is about the crossing the thing that is clearing out entire thing so for that i can simply do one thing where is our button so we have our loading action button here which does nothing for now so we can simply do one thing that after pressing over edit we can simply set the state of it executed to false as well cool so after pressing this you can see that our entire courses will be removed and after searching this we will be simply getting all of our data and after getting this we will stream remove okay i'm just playing with it okay never mind so let's try another one more query about machine learning so here i can simply write machine search it once all right we are getting bowl of our data here because the web development also contains some metadata of machine learning it's okay to now for this all right let's remove this search one more time we will get both of the courses now we have successfully completed our querying functionality under udemy clone so now let's do one thing that is navigate the user to its detail screen and what i mean by detail screen is if you hover our featured screen after pressing over this you can see we are getting all of our data here which is a detailed one so let's create a new system so that after pressing over this okay let me search once also after passing over this the user shall be navigated to its detail part so let's complete it now here if you see under our widget of search data we are retaining a list to builder which will have a return type of list style so i can simply refactor it under a gesture director so for that you can simply press ctrl shift r simply wrap me under a widget so here i can simply write a gesture detector cool so here under the press of on tab i will simply navigate the user to the next screen and for the navigation i will be simply using the gate chat management itself so i can simply let her get dot 2 and under this 2 i can provide the path to my detail screen which is somewhere between our detail section which is this this entire screen now if you have no idea about how we build this entire screen you should definitely check this video first all right so let's navigate to the screen so here i can simply read detailed screen and here i need to pass on certain arguments but before that let's have some fancy transition between screens so here i can simply transition to be transition let's say down to a and after that we will also have argument to it now under a type of argument i can simply provided snapshot data and from this data i can simply get the docs and from these docs i will simply count on the index which is under our list to builder easy as that format document once so now let's test it out so here after pressing over this you can see that we are simply navigating to the details page now let's go back now if you check our featured screen under this this screen is same as particular to this so yeah let's search it one more time for web all right so we are getting our query here which is web development and after pressing over this we are simply navigated to its detailed part so in this way we are now simply navigating the user to the next screen which is detailed screen now this is a huge deal for us because we have moved at a moon type level under our udemy clone so under our search screen if we simply search on any other thing which is not available under our entire courses let's say mango all right let's search it up you may see that we are getting here nothing just an empty data so this was all about for today that we have successfully implied a querying functionality under academic loan so let's do one thing that is go under our web all right and under this you can see we are getting all of detailed data having a video as well now if you have no idea about how the video is executed you should definitely check this video for the reference of how implementing the following video under a udemy clone which plays like this so so my friends okay let's close it once okay so my friends this was all about for today now let me explain to you about what the things that we have did today so if you go under our data controller we have a future method which returns a query data of entire firebase firestore collection and under the search we have nothing but a search button which is under our scaffold app so here it will simply query entire data taking the search controllers text and then it will simply assign the value that we have got under our return statement to the new snapshot data and after that we will simply change the boolean condition of executed to true which is by default false which is here and after that we will build our entire body with the help of the boolean now if the boolean is true we will simply return the search data else it will simply return a container which will say search any courses now i hope you have loved this tutorial and if you do so please hit that like button i have to complete 1 000 subscribers before ending this year so if you all love this tutorial please share this video in your network i will be very happy about it but before ending this video let me tell you one thing that if you need to know all the updates that i will be putting on ever on this channel you should definitely connect me on my instagram where i will posting out daily behind the scenes video about how i make videos and my daily lifestyle about executing flutter content which may be beneficial to you on some real projects so this is all about for today please comment down the most important part that you love in this video well with that said i will see you in the next one with another great video while implementing the payment integration for our udemy loan so i will see you in the next one good bye

Channel: Abhishvek

Views: 21,284

Keywords: flutter search, firestore search in flutter, full text search in cloud firestore with flutter, flutter search firebase, search in cloud firestore, flutter search cloud, flutter search cloud firestore, search in firebase flutter, cloud firestore search flutter, firebase search flutter, flutter search firestore, flutter firebase search, flutter full text search, firestore search flutter, flutter search firestore example, flutter search firebase tutorial, search flutter firestore

Id: urptw_qd1CI

Length: 15min 56sec (956 seconds)

Published: Fri Nov 06 2020