Complete Guide to Flutter: How to Build a Real World App

hey what is going on everybody welcome back to the channel hope you're having a fantastic day now today's video we're going to cover a very exciting topic and it's going to be the complete guide to building out a real-world application using the flutter framework now if you're not aware of what flutter is it's basically a cross-platform tool that allows you to build out iOS apps and also Android apps using a single programming language called dart now in today's lesson we're going to cover four very important topics related to flutter and how to build out applications right so before I go over these topics so why don't I walk you through a demo of the application we're going to build out throughout today's lesson and basically it is this application in the middle right here so this is an application that is a very very simple ListView that allows you to grab data from the Internet and once you have that data we render all of that inside of this list and upon clicking into one of these lists items we navigate to a details page for that item so you can see if I click on the second item and this little is looks a little bit different right alright so that's basically the demo of our application and as you can see it is not trivial it's fairly complicated and it involves a lot of programming alright so on to these four topics on the left side over there the first thing we're going to go over is actually very important and it's called reactive States and I'll show you what the difference is between something called a stateless widget versus a stateful widget in flutter and if you're already familiar with react.js or react native and this will be an easy topic to understand but if you don't know what react is just yet I'll walk you through step-by-step what exactly a state is instead of our application but basically this app right here has two states this fully loaded state with all of these items and the second state is the loading state that has that circular progress indicator alright so once we tackle that topic we will move on to how to fetch data using flutter and how to actually perform some networked activity inside of our application over here so every time I hit refresh we actually grab some data through the network and that's going to involve me showing you how to set up some flutter dependencies inside of our yam bowl foul so I'll tell you exactly what that is later on and then after that we'll move on to parsing data using JSON so all this data is being fetched through an API that's giving us JSON data back and I'll show you how to transform that data into JSON objects that we can use instead of a list like this and finally we're gonna move on to how to navigate between multiple pages inside of our application and this app right here has two pages this page right here for the details of my Instagram firebase course and that's basically a navigational page route and I'll show you how to write out that code as well alright so having said all that you can already tell that this video might be a little long because these topics are actually fairly complicated so in the description below I'll include some time stamps two different areas of this video that you can jump to and from if you're you know maybe watching this video for the first second third or even the fourth time now why don't we go ahead and begin by starting a brand new project inside of Visual Studio code right now all right everybody you welcome to the coding session at forward today's video we are going to start off this lesson by creating a brand new flutter project inside of Visual Studio code which is this black box over here so let's create a new project by going to the View and command palette and because I already have the flutter plug-in installed I can create a new project by typing in a flutter new project click on that give our application a name like so LptA hit the enter and just make sure to store it somewhere inside of your computer so that you can find your project a little bit later on so here we go the flutter plugin is now creating our project and I would like to expand this just a little bit wider so I get some space to work with and here we go we have this a main dot dart file created for us and by the plugin which includes a ton of code and this is the template project or the template application that the plugin creates for s and so a lot of this code is kind of difficult to understand if you just keep it so well why don't I delete everything and start from scratch this way I can explain to you how to implement this stateless widget and the stateful widget for our application on the right side over there so everything looks pretty awesome and I'm now ready to begin and the first thing I would like to do is to create a great a class that helps us kind of create this application over here that is complaining about so why don't I create a brand new class and we will call this class a real world app and we will extend something on the right side over here now if you are creating a view for your application you will want to use a stateless widget kind of like this but we are going to use a stateful widget instead so just I've been stateful widget and we're using this because our application contains two states this loaded state with this list view and also that circular loader thing on the middle over here so that's kind of why I'm using a stateful widget and you'll see why we use this a little bit later on so before I can show you I'll have to type out a little bit more code that is also might be pretty confusing so let's just walk through this one step at a time now the first thing you want to do is to look at the error message over here that tells you to override this create state method and this guy wants you to return something called a state that is of type stateful widget so let me just type out a their companion in class that represents this state object over here so we'll call this something like real world state and we will extend something called a state and I'll use real world app over here and this guy wants you to override the build method so let's just type in build and you'll get these two methods that you need to override for your application to work now the reason why real-world app is over here is because this guy is a stateful widget and we want to return your version of this guy so why don't I go ahead and say return new real world State like so and in that with a semicolon and everything should be good to go here I'm going to provide the real world app of there and hit save and now the question is should we run this application inside of this simulator right now well I'm going to try to do that so let's hit the bottom button down there I'm going to select one of these simulators and I want to use this simulator on the right side and that's the iPhone 10 and I have that selected let me click on this little bug icon hit the play button and we're pretty much going to launch this bit of code inside of our application over here or the ax simulator and we'll get a little new icon to show up at the last slot maybe after 10 or 15 seconds and there we go everything seems to be up and running and we now have this message over here and it says that the build function is returning a null and that's this guy over here so that's the error that we are now running into and I'm currently still inside of main dot Dart okay so make sure you setup your application using the stateful widget and some kind of state object like this and we'll use the state in just a moment but why don't we first fix this error by returning some of the things and for the first application of widget you have to provide something called a material app and inside of here you'll just say something like Oh and this home guy is typically going to be a scaffold for your very first component this way you can provide an app bar like this new app bar and this title will be saying I don't know let's say real world have bar all in caps and sometimes you might be a little bit confused as to what these messages mean but this title over here really expects you to provide a widget so we will say new text and this guy is a text widget and if I hit a semicolon over here Hitler refresh button hopefully our application will be up and running so always a good idea to see your application inside of this simulator as you modify your code and make sure you have this instead of your real world state and everything should be ok now the next thing you want to do is probably provide something inside of the body of your scaffold so this is the scaffold with the app bar and you just want to type in body over here and say maybe something like News Center and inside of the center you can provide a child you can say new and maybe a text over here and say one two and one two two two at the save so I'm just hitting command s to save it you can do that too hot reload or just hit the refresh button up here and there you go yep 1 1 1 and 2 2 2 you can now replace this with a circular progress indicator and hit command s you'll see that circular animation instead of your application right away so that's another nice thing about flutter it's really easy to develop your applications because hot reloading makes changes appear right away instantaneously which is pretty awesome and overall reduces the time that you need to spend on coding out your application all right so let's go ahead and move on to adding some features to our application for example we want to add this refresh button up here that toggles between two different states of our app the loading state and also the finished loading state over there so I'll show you how to put a refresh button at the top there by going into the app bar section and let's see I think we can provide an actions property and this guy is just a list of buttons so why don't we say new icon butts in and I think in here we have to specify the icon property and this guy I probably will have to provide icon and inside of here you can see icons dot refresh and that's this big circular arrow so I'm going to command s and once you save it and reload you'll see this button up there in the dark blue might be a little bit hard to see but it's definitely there in order to make it pressable or white you want to go inside of the icon button so I'll see you up here on pressed and for the on press callback function you can execute some custom code and let's say brace brace and we'll just say print over here and reloading dot dot and that and refresh our application so once you have the arm press you'll have a the ability to press on this button and it kind of has this animation of that circular gray area and down over here you see the text being printed out inside of the console as well so everything is pretty good printing out messages and flutter is really really simple with the print statement like that alright so pretty awesome alright so now that we have this on press function implement it inside of the action bar widget I would like to now move on to introducing some state changes instead of our application and the way I'm going to do this is to go all the way up at the very top of my real-world state class and I'll introduce a variable called is loading and I'll set this guy equal to true at the very beginning because at the very beginning we should be loading some data from the internet and I'm using this underscore because this represents a private variable so I'll just follow that convention for now and down at the Center widget over here under the body which is which is currently holding this circular progress indicator I'm going to use the is loading a variable and I'll use a ternary operator and I'll use a colon over here and let's just hit enter and I'll say new text and we'll say finished finished loading and dot dot dot so why don't I hit the refresh button over there and you will see that nothing has changed we still see this thing over here now with all of the code that we've set up so far we can modify this variable whatever we hit the refresh button by saying list I'm going to call this method called a set state and this expects you to pass in a function which is very simply just type out parenthesis and a brace brace over here and finally a semicolon like that and inside of this code we are just going to provide the change of is loading and set this guy equal to false now I'm going to save my project and it's going to hot reload some code and hopefully when I press the refresh button you'll see that the circular loader goes away and now the loading is sets of false hence the ternary operator evaluates this expression over here to the text widget which says is finished loading so if I modify that reload again you'll see that the state of our object is currently loading equals to false hence we get this text widget showing up inside of our application and so this is how a stateful widget operates you have the ability to call this function over here to set the state and any time these are variables are being modified the body over here is re-evaluated again so that whatever you see inside of the widgets that you are presenting will match according to the logic of your state's ok so now that we've introduced the ability to modify our applications through a state variable let's move on to the next topic for today which is to discuss how we actually perform a networked activity inside of our application now if you look at the finished version over here every time we hit this a refresh button we are actually fetching some data from the it's yet and that data comes from this URL over here that is this entire JSON blob now you can kind of see inside of this list of videos we have three videos and that's pretty much what each one of these cells are representing so why don't I go ahead and show you how to easily fetch this data using a package called HTTP which is over here so if you go to this flutter i/o website you can define how to fetch the data from the Internet and this page is probably really really long for this video so I'm not gonna go through the entire thing you know I'll just show you how to set up your project by modifying the pub spec yeah Mille to install this package HTTP so let's open up pub spec and copy over this line over here somehow so let me just quickly show you how to do this by opening a pub spec yeah Mille and here are the dependencies I have a project over here that already has the latest version of eleven thirty sixteen so you just want to hit save and it will install the proper packages that you just specified over here next thing you want to do is to go back into your main dart file and all the way down at the completed example you can kind of see they have imported the HTTP package as HTTP so let's go up here and paste that code right over there so this green arrow just or the green under the lion says that we are not using it so why don't we use it instead of our application somehow and the way I'm going to do this is to modify the on press function over here and so right after we set this state why don't we also call this method called fetch data and I will define this method up here so hopefully you are familiar with method calls so let's just establish that and print attempting to fetch data from a network and end that with a semicolon hit the save hit the refresh button over there you might want to go to the debug console and you will see that we are attempting to fetch data from the network so let's perform the actual fetch using HTTP which is what we just imported and you simply once you call this get method using some kind of URL and that URL comes from this URL YouTube home home feed at my api website so let me just copy that and I face that up here so let's define a final string and we'll just call a URL let it be a type string and a URL goes inside of here and you want to add a semicolon at the very end all right so pretty awesome stuff and now you want to actually say what exactly does the get method give us well it gives us this future response object so let me just say final response equals all of that and what you can do is you can say print so let's just print out what response is right after we fetch the data all right so I'm gonna hit save and what you'll see is that when I hit the refresh we actually attempt to fetch today and the response is an instance of future now in order to kind of unwrap this future object you have to do something called an asynchronous oh wait so the first thing you need to do is every time you have an async method call you wants you define it as a sync as well up here which will then allow you to perform these oh wait calls on your future method calls which basically tells it to just wait for the response to come back and then you will execute code on the next lines below it all right so this is an idea that comes some promises and maybe I'll link a video down below that will explain how to work with promises better but this is just the they call that we need and I'll save again and once you hit the reload you'll see that the response is now an instance of response instead of an instance of a future and now what we can do is we can say if response that status code if this is equal to I believe 200 200 is the HTTP okay we can print out response and response dot and body as well so I will remove the bottom print line and hit the save over time a hot reload and hit the refresh and now what you will see is the actual json data at that URL over there so you can kind of see the user ID we should have videos over here and we have ID 1 and name and instagram firebase so that's pretty much this stuff right over there it's the ID name and the Instagram firebase of course so that's basically how we really really easily get HTTP data using this and get method alright so hopefully that is pretty straightforward and you basically have to kind of understand this bit of code and use this as reference it's really hard to remember this stuff if you haven't typed it out before so just refer to this code every time you need to fetch data inside your application and now what you would like to do is to somehow parse this JSON data out using some kind of JSON a data structure so you can say JSON like that but it doesn't exactly work and what I want to really do is to decode some JSON inside of my project and the way I'm going to do that is to import to something else instead of our project called to see dart and I think I want the i/o library which allows me to go down here any JSON decode and let's see what I want to do I want to say in JSON decode and I want to decode this response body and it doesn't look like it likes me using that JSON so what you want to do is actually import this convert library instead so a lot of new libraries that you have access to if you are using dart so let me just import the convert and I can already tell that convert is being used so JSON decode let me just type this out again expect to get a passing some kind of string object and it will return you some kind of map and let's see the source will be D response dot body and here is my final map equals that so pretty darn awesome and what I can do now is to simply print out what map and use the key of videos and that with a semicolon I will comment that out and save hot reload refresh and here we go I'm going to hit the refresh button again and it fetches the data from our network and right over here we are only printing out the information related to the video structure inside of our JSON so this is the video structure and what you can do is you can capture this instead of a variable so let's copy that and let's see we're going to say final videos let's see JSON equals map videos and you can do a couple of things with this video JSON and because I know it's an array you can see it's an array because it's inside of this bracket you can print out a lot of the information inside of it so let's say videos JSON for each and we'll use a function inside of here and we'll say video and then we will use a method like that and basically I just want to show you how to print out the data inside of this JSON blonde and what I'll do is print out and we'll say video and we'll just use the name like that and use a semicolon I will now refresh and hit this button one more time you will see that after we are attempting to fetch did we get it all back and then we are printing out the video names over here so Instagram firebase intermediate core data and Kindle basic training which are the names over here so you see this that and this as well so that's how you fetch data using HTTP and that's how you also parse data using JSON okay so up to this point of the lesson and what we have so far is the ability to fetch our JSON data using the HTTP package and now what I would like to do is to fix some of the logic for this refresh button on the top right and what I'm gonna do is to actually flip the toggle over here so every time I hit the refresh I want to actually make the is loading to true like that and I would like to copy the state setting and move it into the fetch data function and just put it over here so I want to actually tab this back to the left side and I'm going to hit save now and I want to modify this to false and hit the reload one more time and you'll see that every time I fetch the JSON data we will get the progress indicator and once it's a finish we set the state to loading equals to false and that's why we see the finished loading text at the bottom because of the state change over here inside of the body alright so that is excellent and now what we want to do is to actually show a list of items instead of just the finished loading sacks kind of like what we have in the finished version of the application so why don't we move on to doing just that by modifying this widget and we will build a list using the list view dot builder and let's just sit enter and type in a couple of different properties so the first one is the item count property and if you type into five over here you can or render something using the item builder property and then this guy expects you to return something using a context and the erode number of I like that and make sure to end it with a brace and instead of here I'm just going to simply return a new it's X and let's just say what do we want for our string a row and colon and dollar sign I for string interpolation and we will hit the semicolon here I'm going to hit save and you will see that we have 5 rows 0 up to 4 because we specified 5 here if I had saved with 15 you'll see 15 rows so hopefully this is pretty self-explanatory I don't think I need to explain this any further and what we would like to do instead of specifying 15 is to capture the JSON data up here so that we can use it for the list count for the number of items so this is very simple and straightforward if we capture the JSON data from videos JSON and just perhaps declare a new variable up here so I'm line say var unless it's called as videos like that and all the way over here so you see videos JSON we are going to comment some of this code out so let me just comment out the for each and say let's see videos is going to show up right here and I think you can save this dive videos instead of equal to video JSON from the line just above and all the way down at the bottom which is the item count for our list builder you can save this thought of videos a dot length like that alright so let's hit the Save button one more time and you'll see this over here it says that the getter length was called on the null variable of this dot videos so this guy over here you want to actually first check if this videos is not equal to null and then use that variable otherwise just use a zero like so and what you'll get is a zero row list right there and let's just move back to this guy I believe I want to move this right below here so let's just say that and we will hit the save one more time we will refresh now and we will get the three items inside of our lists which is pretty much what is inside a video JSON and that's because we have three videos inside of this list over there okay so that's how we get our list to kind of start rendering some items based on the objects we are getting from the network and now what I can do is inside of the list view builder for this item builder let's actually return something that makes sense right so what I mean is we want to render out a row with maybe a picture at the top and a bit of text right underneath it and so this is a column widget if you want to render things vertically you use a column and this down here is a row so I'm not gonna build out this thing completely I'll just use a column for the vertical items and we will see what that looks like over here so instead of returning that sex with a row let's return a new column and this guy has something called children which is a list of vertical widgets that you can a render out what I'm going to include at the bottom is a divider so let me just specify that at the very end there and on the top of the divider are all of these elements here so this is the horizontal divider I'm going to include a text component so let's say new text like that and we actually want to include something like the video name so let me just put that in there for now and that with a semicolon and comment that out hit the save you will see that we have 0 1 & 2 which is this text component here alright so pretty awesome I'm going to hit a new line over here underneath item builder and let me say final video equals this videos and we will capture the index at the slot of I so this is 0 & 1 & 2 and down here we are just going to access that video object from above and use the name key from our dictionary and just hit save and you'll see our text changing over there and that's because this video object is the dictionary that we have that we fetched from our JSON call alright so that's how that works and in addition to the name we also have other properties inside of that dictionary such as image URL so we're going to use that to populate the image right above the name for our video so let me show you how to do that by going back inside of here and on top of the text ok so right above the text I'm going to provide an image with a new image network and inside of here I'm going to access the video and using the key of image URL and that would accommodate all the errors will go away and that's the end of URL over there which is just an image and now I'll just hit the hot reload and you'll see the image show up momentarily and that's exactly what our ListView looks like right now if you want to provide the padding or around the elements inside of your cell this is pretty easy to do and I'll show you how to do that right now and the way I'm going to do that is to use a new container and inside of the container we can provide some of the things that we can actually use I'm going to say the child of this container is a new column widget and I'll provide a children widget here and let me just copy these two items paste that in there and use a comma there and if you right click here you can format your document and all of the tabbing will change to this so this is the container that we have let me just hot reload everything again and what I can do inside of this container which is above the horizontal divider is to provide something called let's see spacing or is it padding yeah I believe it's padding but not for the column and I believe this padding over here new edge in sets and all let's say 16.0 hit the Save you have 16 padding for all of the elements inside of your container which is our image and the text over here if you want to provide spacing for the text and image you can say new container and this guy you say height and whatever you want maybe 6.0 and hit the comma you'll get the six spacing just like that maybe eight is a little better at the save and the spacing just enlarges like so now for the name if you want to change the text to be a little bit bolder or larger you can't say common hit the space and we'll say style and this guy needs to be a new text style and is that our here I believe you can say font size of 16 point zero at the Save you'll get your font to be a little bit larger and if you want to be bold you can do this as well instead of here font weights and let's see that's not what I want to find a weights and this guy is not scrolling for me so let me just hit it enter there and the font weight you probably want to give it the font weights of bold if you want it to be bold like so and the bold kind of shows up like that alright so that's how you render out a cell for each one of your items instead of your list and one thing that you might have to change over here is the alignment of your text so you see how these two bits of names right here are kind of Center aligned right and that's because of the alignment of a column inside of your cell widgets so this is the image container and I'll show you how to do this by let's see I want to left align all the text and the way you do that is to provide something called a cross access alignment and you'll say this and just say start and a hot reload and all these items will be aligned to the start of this Cross axes so if it's a column the cross axis is the horizontal and if you have a row then it's the opposite all right so congratulations for making it this far into this video we are very very close to the end here and the only feature we are missing is the ability to click on one of these list items and go to a different page instead of our app right so clicking out to here will lead us to a different page and let me show you how to do this but first what I want to do is to introduce some refactoring instead of our application because you'll notice that this code all the way down to that semicolon is a pretty hard to understand if you just look at it without any of the editing that you will be introducing later on so what I want to do is to map this into a separate class so what I mean is I would like to create a separate class and down at the very bottom over here so let's say I create a view class that is simply a widget so I won't call this a video cell and we will extend the class of a stateless widget like Sioux okay so every time you extend a widget you want to provide the build a method for your class and this guy you just want to return a widget so let's say return new text like that and this is a video cell and that with a semicolon hit these save and now I can use this video cell instead of all this stuff so what I mean is instead of returning this column of widgets let's try to return eight so you return a new video cell and hit a semicolon hit the save and you'll see that all of these cells are just saying this is a new video cell right so hopefully that makes sense for this object and obviously we don't want to show just that text we want to show all of our widgets for our video and the way I'm going to do this is to introduce a property for this class and we will say final for a constant property and we will call this the video and we'll just end it like that and next we will apply a constructor for our video cell that also sets this video so the way you do this is to just say video cell for your constructor and instead of here you just want to say this thought is video and there you go this is your constructor that helps you initialize whatever you pass in here for this property inside of your class it might be a little strange but I really enjoy using this type of syntax because it's very concise and I think it's really really easy to read so let me show you how to use it now by passing in the video instead of our videos cell here so if you type this out you can say videos cell and instead of here you need to pass it and some kind of video object and it just so happens that the video is up here already so just paste that in there and you'll be fine what you want to do inside of here is to copy all of this and just take that and paste it inside of your video cell widget and so just paste that in there you probably want to format the document so that the spacing is correct and you can save now and what you'll get is your video cell is now responsible for rendering out the items in senator lists that way your code instead of here isn't so darn and crazy and now it's much cleaner you just have two lines for the item builder and video cell makes a lot of sense for exactly what you want to render as what are your items for your ListView okay so that's the first step step instead of the refactoring process the next thing you probably want to do in a production style application is to introduce a separate files for your views inside of your app right that only makes a sense so let me show how to do that by going up here and introducing a new folder you can disk all this views that's pretty good name and inside of here you can create this class so this is hit a plus for the file and we will call this in a video and underscore a cell dot dart for the actual file extension and then instead of here you can go back to main that dart and cut all this file or this code cut that out of that file there and paste that into this file now all these widgets they actually come from a different library inside of dart so let me see if I can import this guy and I believe it's called material maybe it's that so package flutter material dart you can save this file it should work however you also have to make sure that this in Maine dot dart this class you also want to import this video cell that you just removed from this file so the way to do that is to go all the way up to the very top and obviously you want to import it so import and this guy you want to say dot slash for the abused directory just do that and then you want to type in video underscore self dot dart it should show up in the autocomplete and what's you important that you can scroll back down to your videos cell and that'll be okay you can hit the refresh make sure you save all your files and save all and everything should be good to go your file is going to run correctly and all of your cells that should out nicely like so okay so that's how you do the refactoring for your application hopefully you found that helpful and now what you would like to do is see somehow activate a new page every time you click on one of those cells over there so let's see how we can do that by making these items kind of tappa bilawal and the way I am going to do that is to go back into the item Builder for our list view and I'm going to wrap this video cell inside of a button so let's say return a new flat button and the reason why I'm using that button is because it has a press Handler like that guy and I believe you can also provide a child so this guy will be my new video cell with the video object up there and the on press is just simply a callback function so you see it's a callback function that needs to be a void return type so this guy it just looks like that it's really hard to explain this stuff other than just typing it out and inside of here we can say print and we'll say videos cell tapped and colon and we'll say I like that semicolon hit save and now every time I press on one of these guys you'll see it says video cell tapped at 0 this guy's 1 this guy is 2 and I believe the flat button comes with some padding's that we can say new edge and said all of 0.0 hit save reload and that'll take away the padding from our button and you'll also notice that when you click on it also has this circular animation that makes the tap have a down state and an out state as well so really neat stuff there and now the ultimate question here is how exactly do I get to a different page inside of my application right so clicking on there how do I get to this page well this is pretty easy and if you google search for the solution you'll find this using the navigator you can say push and this expects you to push using some kind of context and some kind of page route object let me just type this out and show you exactly what you need to input the context property is this up there so we'll be using the list view builder context over here for the route let's define a new route with new material page route that's what that guy looks like and I personally do not remember a lot of the syntax so I'm going to use the project that I have off the screen this guy you need to say context and just return some kind of widget over here so maybe a text widget which is probably not the best thing but we will use that in any case so I believe I am missing another parenthesis there may be a semicolon and that looks pretty darn good if I reload right now and if I press one of these sell items you will see that it will navigate to a new page kind of like that all right so if you swipe from the left you can activate the swipe to back and that's how you go back using this application state that we are in all right so the question that you want to answer now is how do we provide a brand new page instead of this ugly looking black background with the red text like that and basically we are going to create a new scaffold page that contains the app bar and also a home or a body widget so the way I am going to do this is let's see for this next thing I want to use a new class instead so let's say class and we will say detail page and this extends a stateless widget and this guy we will just simply say build and we will return a LC return news scaffold this guy comes with an app bar new app bar and title you know detail page I believe this needs to be a new text widget so cut that unit text and you notice that it's a really fast a type of flutter all this code once you remember it it's really easy to develop your applications so instead of here is the body and this guy we will stay in the center instead of here we have a child and I just know that because the center is a container it always has some kind of child property to it this guy will say new text and you know detail detail and detail so this is our detail page I'm just going to copy this and let me replace this and let's see I believe I can just do that and the hot reload we will go back one page over and we will click into that and the detail page is going to be navigated to using the material page route which is simply the navigation of doing this and it goes to this page and a deal detailed page it looks like that right so this is pretty simple and straightforward and definitely self explanatory in my opinion and for this page you obviously want to show something else for example you want to show a page that is related to the item that you click in to you so all these guys are actually fetching additional data from my API and this page so let me just pull this guy back up and I believe I have something called a course detail and you want to pass him the ID number so this is one so this is one right here and this is two and three if you just use one you will get a different list that kind of looks like that if you are interested in how to parse this stuff you can download the project from the description link below then shows you how to build out of this completed version of the project I am NOT going to show you how to do that because all that code is pretty much in doing the exact same thing that we did inside of this initial page right here we are simply render rendering out a different list and this contains JSON and a row instead of a column but yeah that's pretty much how this application is made alright everybody and that's going to wrap it up for today's video a very very long video on how to build out a complete real-world applications using the new flutter framework if you want to download these sorts go for today's video you can find a link down in the description below now if you enjoyed today's video make sure to give it a thumbs up preparing all this content and actually recording it takes a surprisingly long amount of time so if you want to support the channel make sure to check out the courses that you can purchase down in the description as well that's gonna be it for today I will see you perhaps next week on the very very next lesson bye bye everyone

Channel: Lets Build That App

Views: 107,112

Keywords: ios, swift, development, tutorial, learn, xcode, programming, code, flutter

Id: S59b-XFsyY8

Length: 46min 24sec (2784 seconds)

Published: Mon Apr 30 2018