 Hello guys. So in the last video, we have seen how to fetch data from rest API endpoint and display into list view. So in this video, we are going to open a particular item from the list view and show the details of that particular entry. So let's get started. So first of all, we need to go inside list style and add a on tap property where we need to pass a function. This function gonna navigate us to next details page. So whatever we will create, we have not created yet. Let's quickly create a new page details underscore page dot dot. And we can simply make it stateless since we are not maintaining any state. So let's give it a page details page. And from here, instead of passing this constructor, we can return a scaffold and you can add the body part where we can have some text in the center. So later on, we will just modify this text. And since everything is let's mention details page is const. So we can add a const here. Since capital is also const, so edit const. So this detail page is fine. Let's go back to homepage. And so for navigation, we're going to use navigator dot push. So we want to come back. If you want to add a back button on the top of the title bar, then you can use this push so that we can come back. So here second argument is the route. The route we have material page route. Which is again taking a builder. So we're gonna take one function with the context where we can mention the page you want to return. So here simply use const and details page. That's all. Let's save it and check this on tap is working. So if I open it, we are getting back this. So here we missed one thing. Let me quickly add that app bar so that we can see the back button as well. So app bar is equal to app bar. And we can add the title as well. So let's quickly add the title text and details. So. Done. So what's the problem here? So let's quickly try to remove this const and put it here and put it here. So a bar is not a const. So that's why. So now you can go back to the same list by pressing back button. Now what we left with we need to pass some data whenever we just open this. So in order to do so, we need the detail. So what we need basically we need user pets. We had users pets. Is it? Yep. User pets dot data and then index. So we're going to pass this. You can simply go to this model and we can cross check what we need. Simply go here, scroll down. So we need this data. What we can do? We can simply pass it. So that would be let's create a new property here in this detail page so that we can accept it. So we don't need this to lead this. Let's quickly add a final datum. That is user. Bad. And this we can simply assign using this constructor where we can mention required this dot user pet. This page is done. Go back to this and here go to this arrow and simply do what just specify this named argument user pets and done. So since we are passing this data and we cannot have calls here for the final field. Let's go back to this. And if you open this, you can see everything works fine. But we have not used any detail over here. So let me specify here username. So from where would you get this user pet dot username. So what we can do since it is a dynamic data, we can remove this cost and we can interpolate it. So we say this is dollar this username and it's yep. So let's enclose it in double quotes so that I can use single code as well. So here it should say whose detail this particular user detail. And if you want to align it to the center, use another property enter title and true. Save it. And this portion is done. Now we can design here on the body part. So here body part we have to display multiple entries. So for that I will use a column widget. And in the column we can add children. And in the children we need first of all the image. So let's use circular. Let's use that this circle avatar. And in that we can use background image. And we can use network image. And just pass the URL and the URL we are getting from user pet dot pet image. And you can mention the radius as well. So let's say radius we're going to have to 150 and save it. And you can see your image is coming over here. So if you want you can add on border by wrapping it into something else. Let's quickly wrap it into another circle avatar and give it a radius of 152. And you can use the color whatever you want. So let's quickly add a little space on the top that is const. And give it some height let's say that is enough. And we can add one comma here and save it. That's fine. Now what else we need we can wrap this column into center if you want. Let's put it in the center. Save it and it becomes in the center. And what else we need we need to display the name of the dog after this. Let's add comma use text widget and give it user pet dot pet name. And you can add some style here like say text style. And give it font size. Let's give it 24 and everything is const. Let's add a const and save it. Now if you go to your dog name what we can do we can add a little space over here. So let's add const sized box and give it a height let's say of 10 pixel that is enough. Save it. So let's go down here and add more spacing. This time we're going to add 20 height and here we can add one row. So you can design whatever you want. So I'm basically taking a row so that I can display two things that would be the icon of the dog. Let's say if again I will add the condition user pet dot is friendly is true. Then I will say I can start what I can I want to return pets. Otherwise icons dot do not touch. So if you haven't seen my previous video of list view you can check out I will add the link in the description. Same way I will add the colors over here you can even copy it from this homepage where we have added like this. I just copy this go back here and you can add the color over here for this icon color and paste this. Now just carefully we need to remove this and here we will mention user pet. So that's all with this and you can see the icon is coming over there and since this is again the not a friendly dog. So we will add the same condition to the border part of this circle avatar. So let's give it a background color and then we missed with one extra comma save. Okay and let's go back to this row and add the second entry that I would like to add the text and which is again based on if the user pet is friendly. Then we can have some text like like simply say first of all the name of the dog that is user pet dog. Sorry dot pet name is friendly and otherwise we will say just use this dog name dollar dollar here user pet dot pet name. Is not friendly and I think we can do this and if you want you can add on the text size here. So let's quickly use the same property over here with the style and we can just add comma here paste it. So this time we can add a little lesser size and I think we need to align it to the center. Let's say main access alignment dot center save this seems better and we can even change the color of this as well. So let's use the same property over here for the color. So if the dog is friendly then it should come in a green otherwise it should come in a. Let's cut this save this and this is fine. Let's try to look at the friendly dog and does it come nice. Yes it is coming now. So that's all I think. So one more thing we can do if I try to change the orientation then you can see we are getting this error. So we have overflow pixels. So in order to resolve it what you can do simply wrap your center widget into one more widget that is single child crawl view. Save this. This will make your UI responsive and scrolling. Now even if you are vertical or horizontal position no problem with this. Let me quickly change this and everything works fine. So that's all for this video. If you have any doubt do comment in the comment section. Thank you.