 Hello guys, so this video is basically on-demand video for our previous videos Like we have done Firebase cloud operations So I got one comment from the viewer that They want to see how to add a search bar and how to open the detail of particular entry So for that we are going to continue with this project. So I have already uploaded the video for the same As I have deleted all my firebase project. So I created the same project whatever we have done so far. Let's go to the firebase Database first and check out. We have some entries over here Let's go ahead and in order to show you that it is here. We can cross check it. The comma is there five Then puja is there one then aric is there two Then rio is there md is there. Let's quickly add a new entry so that we can see everything is working fine So let's use this id string paste and we have already till the roll number five. Let's add roll number six and your name let's say imani max 96 So we can just go to the project And reload it so that we can see everything is updated Okay, so you got imani over here So first of all we need to just create a new page for opening the detail part. So let's create a details dot dot five And just create a stateless widget that is details And here we need one student information. Let's quickly create a variable final student student So this we need to import. Let's quickly import the student model So here we need material let me import it And we will add this in constructor as a required argument And here we need to return a scaffold and just add the app bar And in this app bar we can add some title And we can simply say student detail So let's add const here make it center title And now we need one body part Let's add single child scroll view And we just add a child. Let's take a center Let's add one more child as column And let's add children's and here we can simply use a text that is student name And let's save this and try to use it first of all Go to home page and just find your card or your style basically And we will add just on Tap here And here we will just do navigation Navi Gator dot push. So basically we will push it Context and route And just use material page route and simply pass The builder with context and here we need to return this Details And we need to pass the student. So we already have students And just use this like Save this So let's try to go to komer And we would come up Come back money Okay, so it is working now. So let's go to this details page and quickly design it more Let's add the styles first work and Increase the font size Textiles font size. So let's give it 22 add const And we'll add just const size box as well With some height or spacing Save this Okay, and we will just make this text bold as well. So font weight font weight dot bold Save this So we just do some interpolation Let's do like this and say Name and do like this Okay, the same way we need a few more things. Let me just copy this Paste it this is for Marks and marks. Yeah, that's also there Roll number and we can just decrease the spacing to five That would be enough save this We can also add some decoration like Let's quickly add here one card. We just use one Pacing over here as well And in this card, we can use some chart Let's use a column Children we can just display one icon over here and Then we can display that The text field for the playing that Marks so I just to use here Let's use some icon. Let's say some files underscore Present And we use some size. Let's say 100 And for text we will be using like student We just need to add some condition here Student dot marks are let's say less than 33. Then we can simply say Fail Otherwise student Mark less than 65 Then pass Otherwise it would be distinct So what We are facing here. Let me add comma first of all and then So let's add const here first of all And we will do some decoration part Now what we are facing here Here we just use this And save this So it is showing fail here So what we can do we can just increase the Text size as well Well, let's add style Text style Point size, let's say 22 and Point weight Point weight dot bold Save this and we can add one more coloring scheme over here like color so if student Dot marks is less than 33 then it should be colors dot red Otherwise it should be colors dot green I think that's enough And same way we can add some decoration to this card as well like Let's use this same Property over here For this card And add comma save this And in this we will just decrease this to Shade 200 Save this Or we can just make it 200 Save this We can add one more condition here And let's say utilize this Yellow color If the marks are less than 65 Then we can use that Colors dot yellow dot shade 100 Think that's fine Let's go back and try to see all these conditions Yep This Okay, we do add little padding over here. So that should look nice Just wrap it with the padding of That's it then Save this go back here Seems like the vector Yep So same way we can just add this I think that's all for this if you want you can add more decoration part So it is closed. Let's remove this save this And now it should look hiding better This one fine This one fine Someone is fair then it should look like this So that's all for this detail section. Let's quickly go to the home page And start adding That search bar So let's simply go to the app bar first of all And here We need to add action So under action we can use icon button And in on press we can write some code Let's decide it later and let's give it one icon that is icon stop such So since it is constant head cost So that's fine. Now what I want when I tap on this search It should display a search Field over here so that I can type something and look for the respective entries So first of all we just create one variable over here So let's create bool is such Clicked Is equal to false Okay, and since we need to maintain the state. So let's quickly go here and convert it into stateful And what to our negative showing we'll just add a constant modifier So we just go here go here That's fine. So here we will decide from this Whether someone has clicked on this or not if it is clicked then we will show that text field for searching So let's go here And instead of displaying this we will just look here If the search bar is clicked Then simply show a card Which would have some child that would be text field and Save this So let's try to see this So on the click of this we are not doing anything. So what we need to do we need to just change the value of this So let's quickly sit state It's equal to its corresponding. So we'll use this Because whenever I will just again click on this Just want to hide it as well Okay, and one more thing if It is clicked Now I will go for the icon as well And I will just look for If this is clicked that means I should not display this icon That means I should display icons dot close Okay, let's remove this constant as we added some condition So I just add a constant for the time being since I have not added anything. So let's go here and check So we got this close now So now we can do what we can just quickly decorate this Let's add decoration input decoration and We can use some hint text, let's say Search Save this Let's go here and see it looks like this. So we can add little padding as well. Let me wrap this text here with padding And we will just add not all we just use symmetric And I think five Enough for horizontal Save this That's all Okay, fine That's close such Close Okay, fine. So one more thing here before doing that whenever someone type Into this text field you can either add a Controller to this Or you can just set the state whatever way you want you can use So what I do is I just use On Change property here You want you can use controller as well So once on changes executed it will give you the value available in that field Whatever input is done by the user. So what error it is saying it is saying invalid constant to let me remove this const Here And just add it here wherever required And here we can just say set state and we can keep this value somewhere So I will just create one variable here string Let's say search text So initially I will just keep it empty And whenever something is typed I will just update the value into that Okay So now we are getting that value entered by the user And let's go back to the list view Here So here we need to check if this is Empty Then we can display this this way that we'll do Otherwise Otherwise we need to display On the Required data So what I do is I can just take all this List view builder And we just need to add the condition over here actually So here Whenever we are displaying the card So what I do just in order to remove the complexity I just take out this card And we just extract it into something like get card Okay So this I'm gonna get my card Fine. So what I need to do here first of all I'll Cut this thing And convert it into novel method so that we can better understand everything So here we need to return actually We need to add Some condition here Okay, so we just if student dot text is empty then we can simply display If it is not empty that means something has to be searched In that scenario we need to add some condition over here So what we can do here? So first of all, let me Just go back here and put semicolon And put semicolon And here we just need to look for Am I missing something? So just add the semicolon over here. Okay, so if something is to be searched Means you that have entered something to be searched Then we need to look for that value. So let's add a condition here if The search text dot So we just ignore the cases that say Starts with okay, what we can do we can just convert it into lowercase dot Starts with Student index Dot name So we can just go with the name. So we are facing some problem here We are not getting name because the student is dynamic So let me quickly go here and mention that this student's student This is students is basically a list of student Okay, so that we can Easily get Suggestions Let's compare for the name So if It is matching With enter text we can simply return this Okay Otherwise we can simply return a empty sized box So that nothing should be displayed. So let's add one const here Okay, so this one is for text If something is entered this one is whatever we were getting by default So you can just remove this and you can convert it into arrow as well arrow function Let's do it back because we are not adding any Logic over here. So here we just convert it into normal Function so that we can add the logic and understand everything. So let's try to check if it works So let's search for go here and type for k No, so it is basically Doing some problem here because we are typing in lowercase So what we can do we can just cut this and Copy this and just add it with this Here So in this scenario, so everything is being converted to lowercase Whether this name or whatever user is So let me just Try this So if this student Let me go ahead this name convert to lowercase starts with search text And it should display it Yeah, so Okay, so let's try with something else. Let's say e So now here is the problem if I will go with uppercase then it will not work in that scenario you need to just convert this as well To lowercase save this So let's go with the k. It's working. Let's try with the e. It's working. Let's try the uppercase e again It is working Okay, so that was the issue and basically it is case sensitive So so that's all for this video if you have doubt Let me know in the comment section. I will just clear this and This is how we can do this So you can also clear that search text on the top of this so that every record should be displayed So that's all for this video. So what problems we are facing. We can just quickly solve these as well So let's add a const here. I think we were missing so save this so here Const save this just tap on this So add constate So we just converted that stateless widget to stateful And we just added a const. That's why it is giving warning So that's all for this video if you have any doubt, do comment in the comment section. Thank you Thank you