Navigator in ListView | Flutter

hello everyone on this video we are going to place a navigator inside alice view this is the demo we are going to build you can see here we have a list with the movies and you can select one and go to details so let's build it [Applause] [Music] we are going to start from scratch i have here already the project that starts with the folder when you create a new project and now i'm going to remove these these comments you can see here the app you can press the button and it counts the number of clicks this is the starter app so create a new folder called screens and here inside screens a new file this file i'm going to call it movie list screen without dart like this here import material not dart and create a stateless widget i'm calling movie list screen this widget is the main screen so i'm going to remove the current screen we have that came with the starter project and import the widget we just created i'm going to call it here at home movie list screen and we can remove this okay change this from container to scaffold app remove this and um we can run now see how it's working okay we have an empty app now and we can build our movie list let's close this and change the color from blue to orange i think it looks better with this color i'm a fan of the orange color change the title not tier but in movie with screen to movies to watch to watch like this okay create a new folder with the name model to put here the movie class i will copy because this video focused more on the list view and the navigation and not on the the models and the art classes this class is the class we are going to use as a model for the the list and i can copy here you can see the class has a title a year a description and image it's not on the app yet but we are going to implement it soon so we have here the container we can change it to at least view that builder and use the model we just copy item count is the number of movies we have so mobilize that height we can see where it is implemented you can see here it's this list and we are going to use it as well in the item builder to do that you pass the context under the index and here you build the the widget you are going to use in each row so we can create a an object from the the list using the the index so movie equals movie list and the index for example if we are in the first row the index is zero so we get the first movie and use this object to populate the the row for now i am going to use just a text to display the movie title to see if everything it's working fine then i will change it to display the the other data so you can see here all the movie titles these movies now are hard coded but in a more real application normally these movies are or from the database or from an api so here the we are going to use a card and as a child we are going to use um a least title with style sorry and i want them the let me see the title property and the title is movie the title and we need to add the widget it's not only the the string we needed to place it inside a widget in this case a text we can add now the subtitle and it's a text as well and i'm going to put here the ear and because the year is not a string i need to add two string at the end so to string let's do a string okay like this and with an icon i'm going to use the image from network and place here the image we url that we we have associated with the each movie you can see here each movie has different image as a trailing i'm going to add an arrow and that this server is for so you can find this arrow in icons i can and if you want to follow along or see the full code i will leave a link in the description to the github repository you can follow along and update the links to them to the movies and use the code as reference from to your own project as well so now the application is working and we can add now the second screen screen is movie details and it is dart as well import the material. and create the status widget import the movie class we created it's on model the dash movie dot dirt and create here the status widget and this class i'm going to call it movie details screen like this now here you can instead of a container i'm going to change it and put here as catful as well place here the movie we need to display the details and we are going to receive this movie object in the constructor so add the constructor here so it's movie details screen and then put inside this dot movie like this we can now start building this screen as app bar i'm going to display the movie title so you pass the apart and with the title a text with the movie title inside and the body for this scatter starts with a padding and this padding has as value for all sides eight then inside the padding as a shell we are going to place a colon and this colon the main axis alignment is center okay and as children for this column we have an image from network this image is the movie image so movie image url and then below this image we have the here so it's a text with movie dot here dot to stream because like i said the here is not a string we need to change the type so moving here to string and this i'm going to change as well the text alignment to center so text alignment dot center and the style and here i'm going to change the the size and the style to italic so font size 70 and the style italic okay andy i put front family is not front form front style so font style like this we can have now the description is out so um a text but first let's wrap this around the pattern to put some inspiration between the image and this text and the text below so here we change this from here to scripture because description is already a string we didn't need them to string here remove the to italic and change the text size to 22 and the alignment to justify okay we i think we finished this screen but we need to connect it to the movie list screen to do that you want to show the detail screen when user presses on item so we can use the on top here to go to the other screen so navigate dot push and use the context and here past the navigation page root and with the other screen so navigation page root and here put the cons test as well and return the other screen with the the movie so i'm going to show you like this we can run it and test it okay you can see we can scroll down up and select any movie and slide the only problem i see is the size of this image and the scroll behavior in the movie details when the imagine for example the screen is smaller or the description is larger we don't have enough room so i'm going to put here in the image the 8 to 500 500 and change the this to put here scroll so single child scroll view you can see here the final app and it's all working fine and you can select the the movie and see the details i hope you enjoyed this video and if you want to see more videos like this don't forget to subscribe and press the like button see you in the next one

Channel: Roberto Fernandes

Views: 37,604

Keywords: programming, software development, mobile development, ios dev, coding tutorial, ios development, flutter, dart, vscode, android development, flutter tutorial, listview, navigation listiview, learn programming, navigation in flutter, clean ui, flutter widget, learn flutter, flutter for beginners, Navigator in ListView

Id: q_nesGrGzfw

Length: 15min 16sec (916 seconds)

Published: Mon Dec 21 2020