ListView Navigation Flutter | onTap on ListView in Flutter | Open Detail page from ListView

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 ontap 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 so text and since everything is let's mention Details page is const so we can add a concept since scaffold is also const so edit cost so this detail page is fine let's go back to home page and so for navigation we're gonna 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 route the route we have material page route which is again taking a better so better 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 ontap 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 F Bar is equal to F 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 F 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're 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 so we had users pets is it yep user pets dot data and then index so we gonna pass this we can simply go to this model and we can cross check what we need so simply go here scroll down so we need this setup what we can do we can simply pass it at so datum 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 delete this let's quickly add a final data that is user pet and this we can simply assign using this Constructor where we can mention required this dot user this page is time go back to this and here go to this arrow and simply do what just specify this named argument user pads and done so since we are passing this data and we cannot have cons 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 at Dot username so what we can do since it is a dynamic data we can remove this cost and we can interpolate it we will say this is dollar this username and it's okay 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 data 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 test Circle Avatar and in that we can use background image and we can use Network image and just pause the URL and the URL we are getting from user cut Dot pet image and you can mention the radius as well so let's say radius we gonna have to one 50 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 editor 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 sized box and give it some height let's say 30 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 that's dot pet name and you can add some style here like say text time and give it font size let's give it a 24 and everything is const let's add a const and save it it's about 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 gonna 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 talk 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 icon I want to return pets otherwise icons dot blue 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 home page where we have added like this so 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 pack 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 levator so let's give it a background color and done 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 this text and which is again based on if the user pet is friendly then we can have some text like like uh simply say first of all the name of the dog that is user cut dot doc sorry dot bet name is friendly and otherwise we will say just use this dog name dollar here reuser right dot that name is not friendly and I think we can do till this and if you want you can add on the text size here so let's quickly use the same property over here 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 axis 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 nice 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 overclock pixels so in order to resolve it what you can do simply wrap your the 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 horizontally positioned 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

Channel: Jatinder Verma

Views: 12,312

Keywords: ListView, ListView Navigation, ListView Details, Open an item from ListView, rest API, display image from network, Responsive Design, SingleChildScrollView, Navigation

Id: ncEuhsq4KAg

Length: 12min 56sec (776 seconds)

Published: Mon Oct 31 2022