ListView with Navigator | Flutter Tutorials

hello my name is mr. t totem animal come to the new photo tutorial today I'm going to show you we're going to learn how to make the simplest view the the navigator functionality to navigate you to other screen so okay let's get started so okay let's start building our app we have a very simple I play out my app my home page home page is getting cold in here and it can't render so everything we do we do inside of this one inside will have the text we don't need text we need a method which will create I'm with you and it's going to be called build a ListView we put underscore because we want this method to be private so no other final can see it and this method return us ListView bill ListView okay and inside dad's been returned let's see video and the constructor called older this thing is gonna have item count know how many items to build if you usually this is dynamic number like the length of the array and that base like how many elements inside of that but this time is going to be static and item builder item build it just defines what what is going to be built for each individual item and it has two parameters first one is context but we don't need to specify it in here in here and second one is index for each element like number is come here one yes item builder gonna return ListView return list I'll excuse you know and the list style is gonna have the title text text the list item number index yes so it's gonna iterate like and one for each item build up to ten also every element will have the leading icon I come on icons and it's gonna be turned up let's see what we have we have exactly what we wanted you have the list view and ten elements inside starting from zero ending to nine and you have the tile title and icon in the front it can be like image icon button or anything with its widget and in total so yeah the outside I would like to and the subtitle in here just for reasons oh good looking and more spaced I don't thing [Music] subtitle simple as that let's add and one Lang we did we added the subtitle amazing also we should add the trailing icon to the right side of the element let's do exactly this thing especially this thing's very important step icon and it's gonna be icons how forward bravissimo Bravo Wow you did an amazing job congratulation your professional aflutter developer that's amazing we have the very very beautiful UI you have the list time title we have subtitle we have leading icon the trailing icon and we have no functionality this is very bad we can't do this mistake we have to add something to do for our elements and one best thing we can do in here is to navigate the other screen so I keep tuned a vagator another screen we should first create our details page which will be called details dot dot and inside of that let's close this one and sorry that I'm going to import very very important thing the material package and we going to create stateless widget yes and state all status which is going to be called details page actually don't need this one and to pass in the parameter from one page to another page we have to initialize it somehow like that let's just create a variable called index and it's going to have a constructor detail page like this class has to enjoy somehow and it's going to have one mandatory parameter and this is going to be called any index and yes inside that I'm going to return scaffold because without it is going to be locally and AB bar and bar and it's going to have a title called context context and the details page yes save that and sign the body you were going to have let's say Center widget the child and text the details page number index yes it's amazing UI so at the moment we can't do anything you can only scroll and if we click nothing nothing is going to happen but if we go to our main dot dart file and on our last I'll leave it on tab functionality we're going to use the navigator navigator is the matter to go between between the screens if anything if you want to go to the other screen you call that push function like that if you want to go back to the previous screen you're going to use pop simple easy to remember and push function going to have the context and route the context is going to give in this function when the negator the context from where you going to route my - where from - well and to give it the context and have context inside in here at our homepage class on our build the function so let's just pass it in here and this function is going to have distinct build context context context context are no Reds could be learning amazing and for the route part we won't build one with material page route he's going to have a builder and the Builder is going to have a context you and it's going to have details page as the route and we're going to put index inside in here and we have big diagnostic error because we didn't imported our new screen let's import that and it is details just example detail dot dot and this is should be working detail pitch deep tail page yes amazing so we should now the functionality now let's click on the third item and we went the third Beatles page amazing very very amazing I'll just make the textile a little bit bigger just for some reason we like to see the phone better 32 and no less Lord of somewhere yes and yeah rocker indentation is yes now we can see our page much good clearer so yeah we have we have our list view if icon title subtitle and this icon and ideally this icon should lead us to our next page but we can cook anywhere now and doesn't makes any sense so let's make that I'll are to forward Herrick called forth this thing takes us to the little speech and to do that it's very simple we just have to simply use not the icon widget but but we have to use icon button and I can but enhanced parameter icon and put this one in here to clear the lion I press ctrl X and paste it in here not like that you first rank amazing yes and this one is gonna have not on tap metal but on breast method and we just simply copy this one and paste it in here and let's leave this on breast why I am angry nobody now we need to know this yes and extra here in yes yes and now we should have our functionality working correctly if you press the arrow nothing is going to happen but if you but if we press on this icon well I will go to page number free amazing and one final thing for the beautiful beautiful looking code and UI we should add the list we should cover the style of card Sun has some elevation shadow and some proper spacing between the tiles and we should have it like that yes now some just looks a little bit better so yeah this is it this was very simple easy tutorial I hope you like that in if you want to see more of them now to do some cool stuff love that letter and dart leave a like leave a comment subscribe and let's let's wait for new tutorials to come and they'll probably certainly come you can just thank you for watching and see you in the next time see ya

Channel: BracketPair

Views: 50,973

Keywords: flutter, tutorial, how-to, how to, flutter tutorial, list view, widget, navigation, navigator, beginner, easy, coding, app, mobile, development, flutter apps, flutter app tutorial, learn flutter, google, ios, android, icon, clean UI

Id: OpMyn7SdAWo

Length: 12min 59sec (779 seconds)

Published: Sun Nov 24 2019