Learn Flutter API and Json Parsing - Build Real ios and Android App (4 Real App) | Yazdani Chowdhury | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Learn Flutter API and Json Parsing - Build Real ios and Android App (4 Real App)

teacher avatar Yazdani Chowdhury, UI/UX Expert, Mobile & Web App Developer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

19 Lessons (3h 38m)
    • 1. Introduction

      1:26
    • 2. App One - Create Project (Simple App)

      9:34
    • 3. Drawer Design

      9:42
    • 4. Future and Get API Data

      15:43
    • 5. Get Data From API

      19:49
    • 6. Show Data in Vertical List

      17:12
    • 7. Final App

      19:27
    • 8. App Two- Sunrise and Sunset Finder App

      7:34
    • 9. Server Data From API

      8:54
    • 10. Design Body

      9:42
    • 11. Sunrise and Sunset App Final Output

      12:34
    • 12. App Three - Weather App

      10:01
    • 13. API Data Structure

      5:00
    • 14. Get All Data From API and Show

      11:31
    • 15. Show Weather in UI

      15:23
    • 16. App Four- Create Project and App Bar Design

      8:11
    • 17. Get Complex Json Data

      10:38
    • 18. Retrieve All Complex Data

      21:32
    • 19. Random Color for Avatar

      4:30
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

70

Students

--

Projects

About This Class

42161de4.jpg

 

Welcome to this class. In this class Students Will Learn How to complete Real World ios and Android App Using JSON Data and API.

When you will Complete This Class. Here are Some Lists That You Are Going To Learn:

  • Flutter Weather App

  • Flutter Sunrise and Sunset Time Finder App

  • How to get JSON Array Data

  • How to get JSON Map Data

  • How to get Complex Query

  • Flutter Navigation Drawer

  • Flutter AppBar

  • Flutter Material Design

  • Flutter Card View

  • Flutter Widget

  • Flutter Row and Column

  • Flutter ListView Builder.

  • ios and Android App Development Using Flutter

  • You, Will, Build Real World Flutter Application.

  • You Will Learn Flutter Horizontal Listview

  • You Will Learn Flutter Vertical ListView

API is the way to connect our mobile app with the webserver. So after finishing this class you will have proper knowledge of API and how to work on it. You will be able to work on real-world mobile apps development where the webserver is used for the backend of Mobile apps.

Students don't need to have any prior experiences or skills to take this class. 

Required Software:

  • You Need to Have Android Studio.

Meet Your Teacher

Teacher Profile Image

Yazdani Chowdhury

UI/UX Expert, Mobile & Web App Developer

Teacher

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Welcome to this course. My name is yeah, astonish rotary and Al Gore instructor in this course, in this flat adjacent parsing course, you are going to learn how to work with API and JSON data and how can we build application using this API and JSON data. In here, you can see an application that you are going to develop by the end of this course. All that are coming from JSON API. In here you can see horizontal and vertical ListView. We will build the application using JSON data that can contain multiple data item. And we will do it is called in vertical and horizontal width. Once you're done with this list of data on our list of just an area, then we will move to learn how to work with JSON map or how can we implement data using the mapping system? Using this mapping system, we are going to build a weather application. And these were the data will come from the JSON API. After we've done this, when replication, then we will move to the fluffy sunrises and sunsets. Dan, finally application. After that, we will learn complex and JSON query. That means multiple complex JSON data. We will put in our application. Then we will set all of the JSON data in a list of data so that you can learn how can we work with complex query. In here you can see couple of that item there too. We are getting from the JSON API. 2. App One - Create Project (Simple App): Hello guys, welcome back once again. So in this section, or you are going to die of love a complete application using JSON parsing. Okay, so here you can see the application that we are going to develop in this section. And all the data are coming from that web service. That means we're getting all the data show edges. Okay, so this is a free website. This is a website where we can get some free JSON API. You can see in just one place or you can simply go to this website and inherit. You'll see a lot of free, just an option. So first of all, we will work with this just on photos. So if I click this, then we will see this JSON data. You can see the album ID, the ID title, URL, and Thumbnail. Okay, So first of all, in this part, using these JSON data, we will build this application that is quite easy. Once we will learn how to do these kinds of things, then we will move to the difficult part. That means how can we get complex? Isn't that unlike this one? So this user has some complex data like these entries is to geolocation. Okay, so first of all, in this section, we are going to develop, we're going to complete this project with this simple JSON data. Okay, Let's get started. First of all, we need to create a new flutter project. So open your Android Studio or VS code, whatever you are using. New flutter project. And I can say, and I can say Flutter, just some. Okay. Now hit the Next button and add your domain name and finish. Etl tech foo, time to complete this girl good process. Okay, So till that we can discuss about this def file. Okay, so go to this part of Deaf where we can get all of the packages that we need. So we need a STDP. Peck is okay, that will help us to get the data from this JSON, from this URL. So you can simply search in here is TTP. And you will see some is actually. And from this go to this first one. And once you will go this one, you will see this is the sort of shown here. You can see some instruction how to use these and changes and examples and installation. Okay, so we need to add this dependency inside of our project. So now go to the center studio here we can see, and this is our project. It's almost done. Now we need to configure this project. Okay, so I don't want to work with these auto-generated code it so simply normally I remove all of these coded and I do from scratch. Okay? This is the, this is the good part that you can, you can learn the whole things, okay? So here we can see our project is done. So here we can see our project is almost done. Now, what I will do, I will simply remove all of these auto-generated code. So controller remove and I will read from scratch. So import when it import this material that Okay. And in here we need to add our bike meant some white men. And anywhere inside this curly brace, we need to add our runApp so you can set up, and this one is going to be new material. And inside is material. We need to add our home. That means wasteful. We want to run. We want, we want to show when our application will open. So right now we don't have any more file, so we need to create another file. And in that file we will create all of the functionality for our application. So go to this folder and right-click and select that file. And we can say home-based, okay? So this one is going to be our homepage now, okay? Okay, now anyhow, we need to import our material that and now we need to add, we need to one is stateful widget because we need to get data from server and we'll do a lot of activity. So we need to add, is it for widget? And in her we can add our class name. We can say home. Okay, So this is a smart solution. You can see this home and this homesick. Now go back to this main, main, main dot dot. First of all, we need to import this homepage here. So our homepage, John Dart, and in here now we can access our class then that is our home class. So new home. All right, here we can see now our application is done. Now go back to the homepage. Now in here we need to add about the scaffold region. So remove this container and add a scarf or logit. And inside this scaffold widget, we need to write all of our, all of our design pattern and all of this thing. Okay, so now if I go back to this, this application and any heroic can see, so we have a advert than two icon then in evolution, rare and inside the navigation where we have some, some list of item. Okay? So first of all, we need to design this thing, this bar and this one. Okay? So we need, we need the APA. So for adding air, but we need to use this app backyard, and these contain a, a verb, so you can say new advert. And inside the cell, we need to add our title and our background color and whatever we want to add. So first of all, we need a title. So we can say title and title is a text. So we can say new text. And we can add simple that I can say JSON parsing m. We can say there is some person. Okay, now we need a background color for our MBA. So we can select this background color, and now we need to select the color. So new, we can say not this new, we need to choose this color. Actually, it's not the auto-generate color that is covered in with Flutter. So it can send this orange colors dot orange. Now if I run this application, hopefully we'll be able to say, Okay, we need to do, we need to run it, not Hartree lot. So it'll take a couple of mini I don't think that it will take couple of minutes. I think it can take few more seconds. Though Android Studio is very slow, but for Flutter, it, it's quite good. I think. So It's almost done. No hair we can see. So here we go. Here we can see our application. Okay, so now anyhow we need to add tool icon. So I think instead of this orange color, we can choose this deep orange color. And for adding a no, if I do hot reload, then it might look good. See it good. Now anyhow it would intertwine. So for aiding icon, we need to add actions. And actions has a digital property. And inside this modular property, we need to add our icon button. You can see this icon and this icon button content to parameter. One is icon and another one is on pressed. So for icon, we need to add icon. And for on-prem, that means if user will click this icon, then we can take any actual like we can, we can send them to another page or we can, we can show any kind of message, something like this. Okay? So for icon, we need to choose new icon. Icon is going to be these icons door to you can say like, oh, okay. And for now this on-premise, I don't want to take any activity, just add some debug print so that we can see in this modernist working, so that debug print. And we can say simply MSS. Okay, this is all about for this icon button. Now, we need another icon button and we can say new, new icon button. Okay? So the same thing we need to do here. We need to add icon. And icon is going to be new icon. And you can say these icons dot at. And for this ONE pressed, we need to add this in debug print. And we can set MSS, that is at. Now if I run this, hopefully we'll be able to Series C. We can see two button. Now if I click on this icon and if I open this, and if I open this, now we can see the source. And at C does our semesters and at mess, and that means all of these buttons are working. Alright, so now the thing is that, and now we need to add our navigation rare according to this design, where we will add the background, the name, email, and all of the data. So I think we can do it for our next part, and this is enough for this part. So see you in the next part. Thank you. 3. Drawer Design : Hey, otherwise, so welcome back once again. So in our previous part, we created our project and we added this AB bar and these two ICANN, okay, and now in this part we are going to add our navigation red. Okay, so we will do these same design and distribution drip. So after these AB bar in here, we need to add our navigation read. So for creating a navigation rare, we need to use this drug. So these are jerk heard contain a new drug. And inside these rare, now, if I run this application, we will see the Android Icon. See how easy to see. And this is n, this is an inherit two alleles, two so that we connect multiple data items. Okay? So inside this, we need to add a child. And child is going to be new list view. Okay? And this list view content children of widget, okay? Remember that whenever you will add this list view and when somebody will add the column and show, you must need to add these children are budget and inside the Chilean of widget, we can net lot of data, whatever we want to add. Okay, so now first thing first, we need to add this navigation re-heater, the spectrum color and this takes and the semen, right? So for doing these, flutter provide a function that is called user contra header, okay? And this user, a contrary header content to parameter, one is acronym and another one is icon image. Okay? Alright, so for our current name, we can say echo name is a text, so we can say new text, okay? And any higher, we can just add coach. We see. And for economical, It's also takes 10. We can say. Why do you suggest for dummy text and their age gmail.com. Okay. Now, if you want to add a background color, so for adding a background color, we need to add these and decoration and this declaration content, a box decoration. Okay, and inside this box digression, we can do a lot of reason offshore like border-radius and many more things. So right now, we have, right now, we need only background color. So I can choose this. I can choose this color and color is going to be these colors not I can choose indifference. Now if I run this, hopefully we'll be able to see. See you can see our background color and our dx and our e-mail address. All right, now after that inherent, we need to add our list of item, okay? So add a comma, and then we need to add our list. Okay, so new list. So list is a property, name is provided by flutter and this list style content to parameter two. Parameter one is tighter and not to parameter t parameter. So one is titled, another one is subtitle and another one is for Icon, leading and trailing four parameters. So we need one icon and one texts. So according to this picture, we need a icon and this icon is called the leading, and the second is called a title. Okay? So when you turn the title, title is going to win new text. And we can say, just for example, you can say phosphorus. Okay, now we need to leading, leading missed the icon that we want to m. So you can say new icon. An icon is going to be icons. You can say, Sorry. All right. Now, if I run this application C, we can see the icon and the text. Now if I chose this leading, trailing, and then we will see the icon we let in the right side, C, I can enlarge said, Okay, so I think it's not looking good. So we can use the leading and add and Chance die can color. So just add a comma and add the color. And color is going to be colored dot say, or it's colorful first one. Okay, now, for this, now see, now there is another issue. So if I click, if I click our site and then you can see I want to do is collapse and again open. And if I click this, takes two or I call it not closed. Okay, so for doing this, we need to use these auntie property so we can say, so in here we can set this on tests and stuff. And I can see this navigator dot, dot. I can say they spoke. Alright. So pop means when we add these navigated or off contact that person, then when we click this now or never goes into a room, close, that means so normally we need to use this navigation, navigator.org or contractors pop. That means if you want to dismiss any type of action, okay, So that is important. We need many more timing, so a lot of time we need to use this, never going to output contexts of pocket. So now add few more listed. So you can say num list style and add title. Title is going to do new text. And we can say this only can say second pace. And at leading eating is going to be new icon. And icon is going to be icons dot at the color. Color is going to be, we can say that red color and add these on temp property on TEF is going to be navigator dot of the BOP. Okay, so I need to add two more listed. So new ListItem, we still continue title. So let's tell coordinate title. Title is going to retakes and represent new text. And we can say that our quiz, target-based and Lading and leading is going to be new icon. An icon is going to be icons, dot said our title icon, and just change the color. And I can say color is going to be colors and dot. Choose this purple color. And we also need our own property. And insight is on temp property, we need to add our navigator, navigator and taught of sorry not pop navigate turned out. All right, very good. Now we need to add another one. So new list-style-type is going to title that L is going to be new text and is going to be the case. Leading is going to be new icon. And icon is going to be icons, dot this list icon and change the color and color is going to be, I can say colors colored same green color. And as a less only to add our method so that when user would click this item, we can call off this navigation red and add these navigator dot, dot, pop. Okay. So I added four. Okay, so now we need to a divider. So how can we identify that? And upon this divider, we will add a close button, so new. And just get to use the divider and say hi, say 55, 0. Okay, it'll work, I think. Now add an underlay. New list style title is going to be new text. And we can say Close. And we need to use the leading property. And lending is going to be new icon. And icon is going to be these icons. And I, CMS is going to be close and the color is paying to build against chose these colors. Red color. Okay, Now add the Ontario and this navigator dot, dot pop. All right. Now if we run this application, hopefully we'll be able to see Nissan. Okay? So here we can see the same thing. See now we can call out is NAV. We can call us Nissan. And I can also see, we can see the dividend though it's a very small size. And if I click this close and I can collapse it. So our first two design part isn't done. All right? So I think that's enough for this part. We will continue with from our next part. Next part we will set up our HTTP connection and all on the rocket filed and we will try to get data from the JSON API. Okay, so nurse it for this part. Thank you. 4. Future and Get API Data : Hello guys, welcome back once again. So in our previous part, we completed this navigation rare design and the sidebar. And in this part, we need to add our JSON API and use HTTP connection. So first of all go to these STDP, go to this Pub, dot-dot-dot deaf. And first of all, we need to add this STDP. Okay, so here you will see the instruction. So this is the dependency, this is STDP. Okay, so I will copy this and go to your spec dot YAML file. And in here, after this cappuccino icon, we need to add this. Okay, and go to this homepage and just flutter, flutter package sketch. Okay, So in the meantime we can copy this. So now we need to import this package. Okay? So go ahead. So we can see that x equal to 0. That means we are done. So in here, we need to add these STDP dot, dot, okay? And these dark, we need to add a variable like S, STDP. You can choose any type of name here, and we will use this name when we would need to get this data. Okay? So we are done right now. Actually this is the main basic setup. Actually it's not complicated. And Justin go to this App.vue file and add these packets, okay? And the speakers will get us, will give us the opportunity to get the data from the server. Okay? So now in here, we need to import a couple of decades them. So import, we need to add this dark dot converter. We need to import dot-dot thing. Okay? I think these two will be good. Okay, so need to import this STDP, then converter the missing. So now anywhere, what do we need to do? We need to, we need to. And before that, before that, I need to add a modern class. So create a package. And we can say this model, alright, so this is moral. Inside this modal class, we need to create that file. And this one is going to be plus can see data. And inside the data folder we need to create a class. And we can say className is data. Okay, so inside this class, we need to add all of this field that we want to get from this JSON URL. So as you can see, in this URL, basically we have four unique data. This album ID is similar for all of these things, so we don't need to retype it. Okay? So we need to return this ID, then title than this URL, than this terminal. Okay, so we need to add this fourfold. So remember that you are using the same things. Actually there. There are plenty of way to get data from the JSON URL. So I will tell you step-by-step. So first of all, we will follow this step because this is the easiest way. So ID. Okay, Now we'll look to add a string variable. And for this chain can see this title. And this title is going to be this title. And then another variable. And any arrow we can see this URL. And this URL is going to be this URL and another string. And this one is pull last one that is our thumbnail URL. So Control-C and gesture. Okay, now we need to add a constructor for all of this field. So this is our main class. And for this class we need to create a constructor so it can create a constant called display some data, then add all of this field. But there is a easy way, maybe you already know this, so you just need to right-click on your mouse. And here you will see the generator and select the constructor and select all. And then, Okay, and it'll create a constructor for you or you can write it by yourself. Okay? So I always like to January and just need to add this data. And then it lists these dot ID in this TO title the URL and this.tab minute. Okay, so our modern classes that now we are ready to go. So inside this, so inside this homeostatic class, and that is the, under that means lambda of our widget inherit. We need to add our future builder. It's not a future we'll learn is called the future. So future is a method or property that is that is built by flatter forget data from server or Firestore or whatever you want to show. Okay, So this is the important things, is an every time you need to use this feature. So this future will contain a list because we need to get all of this data and we will set it in a list, the list and this list during get data from this from our class that will have on data class. Okay, now we are getting the error. And the reason is that we did not import these women import this model class packets. They didn't want data from that. Okay, so now we are all done. Okay, so now in here, unitary method, then we can say again it all data. So this is the method name and maybe you already know how to create a method, okay? And this method should be asynchronous process. So we need to use this async keyword. This async keyword we are getting, we are, we are able to edit and just because of we added this. Dartboard async library. Or we can set the packets, that is a built-in package provided fresh flatter. So remember that you are reading this and darker. And this data converter is also needed. So, so let me explain it again what we did here. There's a very easy process. We just need to use this future, future. We need to use future as a function of r. We can set a property that is provided by flutter whenever we, whenever we would need to get data from server or a PA or whatever. And then when it uses future and this list we are getting, we are using this list just because of we. Here we can see all of the data inside in Eric did me, this is the arrow symbol, then this is the first position and this is the second position. So it is a very easy way to get all of this data if we've stirred inside the list, ok? And we are getting this data because we will get all of this data from this data model class where we added all of these record field, okay? And there say we are adding this data here. Now in here, we need to add our in here, we need to add our APA length. So far we can say API is a cartoon. So what is our API URL? So this one is already very well if your URL, so we can copy this and paste it here, and then add a semicolon. So this is our API. Now, we need to, we need to use a data to get all of these APA. So we need to use this, OH, and this is the keyword that we need to get the data from this API. So not from the EPA. So whenever you, whenever you will need to get data from cyber immunity is this await keyword, and then we need to use this STD. Remember, we added STD, STDEV for these STDEV packets. So HTTP, http dot get Nan here you can see that you are and that means we need to add our API URL from hope from his URL. We want to get data from the, from the server. Then we want to set, so we are getting, we are getting the data from this URL and we stored this URL inside this API variable. And now we're telling this wet, this STDEV dot get API. Alright, now we need to decode this API data using the JSON data. So we need to use this empire. They can say JSON data and we need to decode this data. So through this json.dumps decoder and when it does source our sources now this data they recreated here and this data cause we added, we start all of these API data inside this data folder, inside this data variable. And now we need to add this data dot loaded. Okay, So this just a 100 decodable, compacted these data. Okay. So let me explain it again. We are, we added a variable called APA, and inside this variable API, we start our link and then we added another variable called data. And where we are getting this, we're using a wet and this SCTP dot get this API where you start our API link. Okay? Now, once we are done with this two line of code, that means our all of these API data. Now, all of our data inside this variable. Now we need to decode all of this data to use in our application. So for there is a property called JSON dot decode. And then we need to use our data where we know which data we want to decode, non-standardized this data and Cambodia we need to use it. And now all of our data inside this JSON data on right. Now in hair faster fall, we need to create another list of data and that will be there. And that one, and this one will be the blank list to consider list of Ok. And we consider blank list. So we created a blank list view and that datatype isn't this theta cos, we will store all of this field, this field, okay? This list and this list data. Now we need to add a follow for Eastern every letter so you can say for I in is just on data. All right, So we're adding, we are using this bar a i is a variable in JSON data doesn't means for ease and every JSON data, we will store this data incentives I variable for like. So this one has a position. So for this position, we will store all of this data. For this position, we would let all of this data. And for this one we let all of this data here. Alright? And then we're storing these, then we can inherit, we need to create it object of our data class that is about this class. So data against citizen data is a call to new data. See in here you can see all on this VUCA filled that we need. So what we can say. So anywhere we need to use this I variable where we stood all of this data. And in here, inside this I need to use in this input field, okay, in this field that we are getting. So this constructor, see it's very easy process. So our all of these JSON data are stored inside this AI for each and every position. So for ease and every data position, we need to use all of these fields that Mr. field is id, title, URL. Okay, so for IID Tomlin and for this title, we need to use the same thing. So for i and this title and for this URL will also need some things. So this title and for this terminal, and we can say the thing, okay? So hope you understand it. It's a very easy process guys. Like we're adding a follow-up call weaker consider for is look for easy and obvious on data. We are getting a position that is i and inside the eye position we have this full property. Well ID title, URL and Tomlin. So for ease and every thumbnail, every ID, every position, we need to use all of this for property like their site we added. Nationally, I added here this eye and ID because let's say fast position is Islam. So for this position, we had a property ID, title, URL, and tablet. So for each and every position, it will get the data from this API and it will store this data id title, title. I retitle, I did a mistake here. So this one should be URL, right? So this evil, no one should be the URL. So third one should be done. Url. Let, let me check again. So third one is URL. So id title, URL and Thumbnail. Okay, we're all done now in this data. Now in this time, this data is contained the whole data. Okay, now we need to store this data inside of our blend list so that we can show it. So how can we do this? We need to add list, dot, add. And here you can see that veiled and our value is our decent data. See our data. So our value is so list of list of node add this data. Okay, Now we are done. Now simply we just need to return a list view because inside this is true. All of the data are stored right now. And we will get this, all of this data from this list, from this empty list on that. Okay? So we need to return it so we can say return and they can set this list of, okay. So we're almost done for this mini functionality. Already. See we are done. So let me explain it one more time so that you can, you can learn it from basic to add tons, okay, you can learn it clearly. So we added a future, and this is a future keyword that is provided by flutter and that is required for getting data from the server. And then we're adding a list of data. And this data contains all of this property that contain our API, okay, C. And then we're passing a constructor. And after this, we created a method and we'll call this method. Then we need to use this asynchronous keyword and these asynchronous keyword required to get data from the server. Okay? Because we need to hour-and-a-half in asynchronous process. Then I created a APA variable and incidents variable I posted and incidence level I posted a API link. And then I need to convert this API failing to then only to get this link and using this http.get. And then it started in Santa's data for data variable. Then we need to, we need to decode this data for in JSON format. So we need to use this JSON decode and data.dat MOD. Then our all of this data are containing in this JSON data. Now I created another list of variable that is an empty list of letter. And this list contains this data for the class. Okay? So now we are now I did a for low fare. So fall inside this for loop, we iodate and far I in JSON data for each and every position, it'll distort our data incentives I variables. Now this data, data is going to new data and isn't everybody shown? It will contain these id, title, URL and Hamner that we created for our, for our detect loss. And we're getting this to this constructor, okay? Now our all of this data are containing these data object that is the object of our data class. Then I added this list of not add this data. Okay? And then when it's done, we just need to return a list of data. Okay? So this is the main functionality for getting data from the server. Hope you understand it. So I think they're sick for this part. We'll continue with our next part. Thank you. 5. Get Data From API : Hello guys, welcome back once again. So in our previous part, we add it to all of the required functionality for getting data from an API and we created our monitoring class also. Now in this part is time to return data and show it inside this, inside this horizontal ListView. Okay, and we will do this custom design here you can see the MAs and the circular avatar and the id and title, right? So now for doing this, so after December and update these navigation where we need to add our body text. Okay. So so first of all, when you turn muddy and inherit, we cleared our pleased to we are adding this list rules so that we can get the opportunity to do a scope. Okay, so ListView children. Ok, now in here we will, I will divide our layout into part. So this one is our first container, and this one is our second container. That might be good. Okay? So This is the first new container. Okay? So, and I can comment out here and we can say this int fast container. All right, Now it's time to add. First of all, at marching, we can say margin as inset all, and I can say 10, 500. All right. Now at a child and the child is going to be new card. Okay. And add elevation, I can say. And at another child and the child is going to be new. And what I can say, actually, I can add here a column C and column for column newdata children origin because the reason instead inherent can see Nissan is EMS incidents first column and then we can add this on. Okay, So when you turn it column here, and that might be good. So this is our first column. All right, burden. The thing is that since we are getting all of this data from these future, we need to use our filter buildup. So instead of doing all of this team even better to at future hair, okay, so now remote this card we don't need to use careful here. We can get cut. We wait for the ListView. So first of all, in your own eternal child, and the child is going to be new future builder. Okay, See, this is the future buildup. And these future build our content to parameter, okay, one is being learned and another honest future. So first of all, we need to add the feature and these future use our get all that a method that we created using these future seek and get all data. We need to use this feature keyword here, and we need to call it. Now we need to use this builder, okay? And this builder contain two parameter. One is context, and second one is async snapshot. Snapshot only today. You need to add an object of your snapshot here. And then these calibrates, okay, and any hair we need to add all of this data. We can add here, okay? So far, the ADA condition first we need to add a condition here. If data is available, then we can. So inside these, so inside this folder we need to add an if condition. Okay? So if snapshot dot data equal equal null, then we can show it loading message and we can say we need to add her return. And we can say center. And inside the center we need to add a child and we can say new text. And we can say loading, loading data. Okay? And when you turn a semicolon, now if I run this application, so hopefully we can, we will see, see, you can see that we're getting the YouTube and the reason is that under noun right now. So if snapshot data you can now, then we can see and yields that means if we have data in our API, and then we will, we will set this data here. All right, so this is our first container where we will add our scroll view. Okay? So for doing this first of all, we need to return it. So written list few dot builder, okay, we need to use this q-dot will learn. Whenever we want to show any data in a list, we need to use the dot builder. So and these lists could not build our content to parameter, okay, contain two parameter. One is item count, and that is going to be our date is going to be our snapshot dot data dot length. Okay? So item count, snapshot dot data dot length. And we have fun under one that is called item builder. And this atom builder contain two parameter. One isn't given context, that is important and we need to pass our position and it is integer and index. Okay, Now inside these item builder, we need to add all of these things. So radon, least Vue.js buildup. So item count, snapshot, dot, dot, dot, dot length, and item window is going to be a context and then integer and then index. Okay, so this is the basic functionality. So let me explain it again. What we teach here. We created a continent. There is our first container. So added marching and edit. A future will learn. And this is the menu Garfield cause since we are getting all of this data using this future, see this vision and this is the method name. So when you do use the suture and these, when there is contexts, this new contacts in your sink snapshot and snapshots just we added a condition is now show data, then no data, no data. Then now then we can show the loading and is available and we can show this data. Now in here, we need to edit it and type. And this return type is going to be our cart. Okay? So this one is going to be our cart and add things. Now at first of all, when you turn the elevation and we can say 10. And we can send a 10 0 and add a child and child is going to be new column. And column has children of which it, okay. And inside the children of which ear do we need to add all of these fields? Touches column, we need to add our EMS and how are these circular avatar and these text. Okay, so for doing this, the first of all, what we need to do, a new e-mail sent out network, okay? So we need to add our data. So snapshot dot data, we need to pass the position that is index dot. And what we can say, what we can pass, we can pass Our, so I think we can pass our URL. This is our main MS. So URL, Okay, and now we need to add the height and white forties you are looking at for this image. So select the height and we can say height 150 point is 0, and as well as white is also a 150. And we need to use this feat and these feeders about Bach screenshot cover. So now we can see our images. Okay? So our images, Kennedy is done. So any hair now we, we, we did a mistake. We forget to add the height of our main container for our fast container. So we need to define a height and height is going to be 250, okay? That is required. Okay, we need to do find the height. So now hit this Run button. Hopefully we'll be able to see our data. So here you can see, so see what you can see the image as C. But the thing is that we are getting these in Botticelli. We need to define it horizontally. So how can we do this? So inside this folder, okay, inside these list few dot inside these ListView actually. Okay, so for this list food or builder called IRAC shown and we can say, and what we can say, we can say to exist or to horizontal. Now, if I run this, hopefully we'll be able to see on data easy squalene horizontal away. See our data is in horizontal way. We can see these, all of these, all of these images see. So HIV, AIDs, 250. So you're not 250, 150 and inherit, we will add in your ruler at the circular avatar, these and these title, okay, this is the ID. So this is our ListView dot builder, this is our cart and these one is our fast data. It is our emails. And after these, we need to add a row. So what we can do, first of all, we need to add a size box so that we can get fewest space. We can say height, say 7. Okay? So after 7 hour, this the circular avatar and these titled Early Start, Okay? And in here we need to add a container. And inside this container, first of all, need to add a machine, we can say as INSEAD All. And it's going to be, say, 6. And to add a child and child is going to be new. Shops. And row has a property called Change and opposite. Why we are adding header row, the reason is that we need to show the circle Avatar inside this oculomotor and the ID number, and then a title that is our list item. Okay. So good way is we can use the expanded, see the expanded. So the expended is a process where you can define your layout in very mathmatical loyal like one or two, say this one is one, this one is two. So these types of things, so there is a property called flex, and we can say this one. Okay, Now at the chat and channel is going to be new circular avatar. Okay? And inside the circular avatar, there is a property called what we can say. So child, circular avatar and we need to use a background color. Color is going to be just adding. We will have some random color letter. So first of all, just add some colors, so colors, so red color. And that child is going to be new text. And in here we need to add our ID, so snapshot data and our position, and that is our index position dot our ID name. So these IDs hour and these ideas that we are getting from this URL. So I'm, the snapshot is our, the snapshot. Where are we adding these essence lump-sum short, and we connected the snapshot with our least futile builder through the snapshot on data dot length so that we can get all of the length of ID. Okay? That means we are getting all of the data. So we need to use and we edit the same thing for our image. So snapshot data, index.js URL. This URL is this URL, and it is our, this URL. Okay? This is very easy process. So go to this one pays any linear snuff shown and or data in user ID. And since ID is an integer, we need to convert it to easting suggest and this two distinct and for foreground color. And you can say colors dot white. All right, now if I run this, I feel I need to run it. Not hot reload. Now if I run it and do the hard shell lot, and we can't see actually anything. What is the reason behind this? Okay, let me check it because k we are adding, okay, I forget to define the height of this container. So define the height, you can say 0. Okay, now if I run this, then hopefully we'll be able to see these. No, it's not working. The reason is that. Okay. So let me do it in different way. So if I cut it, now if I run it, we need to work. See it is working. So without this expand, Can we add it like add a new container? The new container. Container and child is going to be new circular avatar and child is going to be new text. And in here we will add the snapshot and dot data and index dot id, dot twisting. Now if I run this, hopefully it'll be one c. Now we can see that. We can see the ID inside the circular avatar. Okay, now we need to add, we need to add, actually we need to add, we need to add another size box. Cluster falls. So new size box, and you can say white, say 6. And after decides folks, we need it takes few. Or we can say new container. And inside this container we will let the child and the child is going to be new texts can in here we can say snapshot data, and this is the index position, dot title. Okay, now if I run this, hopefully we'll be able to see our title. C, we can see the title. But the thing is there problem is that we are getting some not getting the right size. The problem is that we need to define the white of this container. So we can defend a white. We can say Oregon second, say a 150. C. A 150, 2000, 150 because we are getting a lot of data. So I think I can choose the a 100. So a 100, a 100 over fine. See, a 100, I'm sorry. C, that takes two. We are getting here. You are getting okay. Now its final most, so I think it'll be good if I can add instead of a 100, two empty, because we don't need to show a lot of data here. See now it's perfect. But it's still, you're facing a problem because we're getting towards sheet at a randomly so we can solve it. So inside this text, inside this text, we can add a property that is called maximum lies. So this would define the line number, how many lines we want to show. We want to show one like so if I run this, now we can see this one line of letter. Right? So this is our circular avatar and we are getting here. Okay, It's almost done. But the thing is that we need to add here the cross sell admin so that it can start from the left side CE, it is started when the medial. So you use this groceries development and cross axial and Mendota started. So now if I run this, the application, and now he is not working here. And there is an instead, I think we need to add it inside the inset column because the sun is setting in the column j. Now we can see it is just perfect. Or instead of crows, can we use here meanings element? So use the Miniclip. Give a try. If you just work perfectly. No, actually it's not working here. And if I cut it here and paste it to the show, and if I run it again, actually is not this year. I think we should add it. And you check it. And this is Darwin container and incentives straw. We are getting this one. I think we need to use it in here. Not main exit only choose the product element. Yeah, Sucrose x and y. Mendota is turn. This way. The Coulomb will start at the start point, and that means the left side. Okay, so now if I hit this Run button and hopefully we'll be able to see it. Somebody still we have many design issue, like we need to change this background color randomly and many more things. So we will do it from next part and then we will move to this second container, and that is our horizontal list group. So if I look in the center, you can see, we can see the multiple color that is generated randomly for each and every item. So I think we can change the text color like nice one, this is maybe orange color. So very sort takes nice anecdote text. So anyhow we can add a style. And the style is going to be text style and Texas term chance that color, color is going to be color is going to be colors. Colors and tart. Orange or I think deeper and so we'll be good. So now if I run, well, we see this in deep orange color. Okay. I think in their seat for this. 6. Show Data in Vertical List : Hello guys, welcome back once again. So we know our previous part. We computate these all these t. Now we need to change these, these darker lever that color randomly. Okay, So this is the important thing. So let's try, let's see how can I do it? So go back to these and inherent, we need to add a duet. We need to add at least top media color, actually. So leased off Media color. I can see actually it's called a micelle color. And we can say that, again, say that color and in harmony to add all of the colors that we want to add. So we want to add these colors, say deeper ends. And then colors taught. Then toddlers into art. And green colors and dark purple. Actually, it is a least of color, as much color you want to add. You can add, then you can set it in, and then the sun will show in your cycle, I want to randomly see least material color, okay, then color, and this color is purple color and you can say how Larson dot and I can say brown color. Okay, I think this will be enough. And add the semicolon and put the semicolon here. Alright, now go back here. And after these least q-dot builder, and in here, before the return, we need to use these material color. You can, we need to create an object of this coloring is m color is a culture. So m color is a gelato. Snapshot. Data. Actually is not like these. You need to use in this way. So index, then this parse sentence, and then this color. What color we get orange than knows the name. And the name is color. Okay? So barriers for these color, dot length. So this is the process. Okay? So still we have some issue here. And we are getting this error. And the reason is that these color we also need to use here because we are getting, we are using it as it, as it, as at least c. So this material color and this is the M color and this color and this color is the object of our material current, not opposite, actually the least top material color, it's released material going on these color where we stored all of these color and go back here. Now we need to use this index, the parson tears and the color of length, okay? Now we need to use the salmon color inside our circle. Inevitable. So the source article that avatar inside the cycle or avatar who need to add a background color. And this color is going to be our, I'm sorry. These are uncolored is going to be our DSM color. And for foreground color, foreground color, nice. And the text color is going to be, you can say colors dot colors dot white. Now, let's run this application. Here we go. Here you can see in the random colors, see these on these in green, these purple, and these brown in these C. And I can see this random color. So this is what we wanted to do. Okay? So we solve this issue. So till now, it's going very perfectly. Now we need to work for our second container. So we need to find out our first container. So this is our first container. Now we need to create and our container, update this container. Okay? So first of all, at any size books or new size box and add height and I can say 5.70, okay, So that we can get some space. And after that we need to add a new container. It's a new container. Container add margin. Margin is going to be as inset all 0. Then what I need to add, we need to add another challenge. Child is going to be new. We need to wet and 22 at least prove there are no wind only to use a list to her. The thing is that we need to use here a row because not because I need to use the children. Okay. You said that you're gonna widget because we will. So this is our, so this is our layout, so we need to use, and so these are is a row. So first row, second row, and the third show item. Okay? So anyhow, we will define our layout in two-way. So. First of all, we need to add new, expanded that might be easy for, for design the layout. Okay. So let's say flex one. Okay, now we had a child and child is going to be new. And you may store network, so fast runner would like to add the image so our image is going to be, okay again, we need some mistake and reason instead, we can add it directly. So first of all, we need to add our filter builder here, okay? So we need to add our future golden. So child, he's going to renew Fisher builder inside this feature. Will there be someone contain these one, contain a future. Future is going to be get old data. Then you need to use the builder militaries contexts needs. Will contexts S0 and S1 snapshot. A SYN, see actually why NCS snapshot is going to be listenership. Okay, now when you get these curly brace, okay, So this is the all about we need to do. Now in here, we don't need to add. Now in here what we need to return any her only to return our list to return least q-dot will learn, okay, Now in this case we don't build your content to parameter one is item count. So one is item count is going to be snuffed shirt dot data dot length. And it's going to be item builder. So this is content and context C dot and the position is integer, index. And in Yaro need to wet our returned. And so add a card view there. So cart and these cartoons contain a television, I can say 7. And I need to add the semicolon and add a child. And this child is going to be the row, okay? And these row continuity in there enough widget. And inside each Eleanor widget, we need to use our expanded. Okay, so new, expanded. It will give us one parameter that each child, and this one is going to be flex. We can say 1 and edit child is going to be new EMS third network and they will want to read type. So you can do this this way. So snapshot dot data and the index position. Now chateaux data dot, dot, dot index position. Doubt. Actually the sun is our URL. Okay, now we need to define the height and we can say height 60. And a white. Actually, we don't need to select the white because since we are using the extended eat will get the same size and need to use the feet. Here is going to be walkscore dot cover. Let's run this application. If everything goes fine, we will be able to see these, but we are not getting this data. And the reason is that we did not at the height of this thing. So height, you can say media query dot of contexts, dot size, dot height. Now run this. See now we can see, we can scroll it and we can see all of these images. We can just call in the vertical way. See. Very nice. But we need to increase the height of this thing. See, we can add a 100. Now if I run this, see, it's quite good. Now we are getting the and the sun is fully spin because we selected the expended one who didn't and defend the white course, we will add another one. And what it does this expended do? And what is the meaning of this flex? These flakes is defined the defender wide, Let's see. We selected flex one and this one and this one is flicks too and isn't his flexor one so that it can take the exec size for ease and every device, okay, it called Like responsible. And the easiest way to design, you don't need to define the white. So now we will define another expended. So new expended. Okay. So new expended. And in this flux is going to be two. And l is going to be the new text. And text is going to be. And inside this text, we need to add our title. So snapshotted data, the sun is going to be index dot title. At maximum lines. Not loan debt makes him on lines 2. Now. Now if I run this. Now we can see the size. Now this, now these MACs collapsed and we're getting a sum size of the text, but it is still not done. So first of all, we need to add a size box here. So new size box, why it is going to be a five-point or six 2000 so that we can get them white. 1600. See, we're getting the white now, but the data is generated from the top and the reason he's dead, we need to add hair. And the crows x is element and close axial and Mendota steps so that it can start from the top. C Now we just started in the top. Now we need to change the font size of licks on this text. So style is going to be text style. And farm size is going to be 19. And around it. It's a very big size, I think. 15 over good. Small-sized, not 1516. And now select the maximum lines too, so that it'll look like good Seek. Now maximum lies to for all of this thing. Okay, so we are almost done. Now if I run this, we'll be able to see why we are getting this year when we are running. Okay, we are getting this one, C. Okay, all right, We'll sulphide letter. So I think we have done lot of things tim, we need to do. We see, need to solve this dishonor game. So we don't need to do, we need to create an under expanded. So clear, so add new, expanded. Okay? And in here, we shall like thing I need to create a container here. It will be good. So new container. Okay? And then at child is going to be num expended. And inside this expended, we need to add the flex. Flex is going to be one. And then child is going to be new text. And the text is going to be not channel text. We need to add here the circle at over time. So this circular avatar. Okay, so Charlie's going to be new takes and snapshot data is going to be these index dot ID, node twisting. Now integers, a background color is going to be, we need to use these tempting here, okay? And then media color. So copy this media color here and paste it after these leaves, food or builder. And then we can use this color here. And for this foreground color, we need to use colors. Color white. Now if I run this, see, we can see, we can see these circular avatar and different color, but it not in the center. So for doing this, we need to add, we need to add this thing. So like Fender height, 100 point not a 100, select 1920 0. Okay? This height is important. Now, we can add these sort of polar avatar. We can add a new widget. Debt is called the airline, which it, and there's LN. And these LNAPL has a property called alignment and we need to select alignment dot center. Hopefully it will work for us. Now run this. Okay, we are getting not 90 degree. Okay? We teach a mistake here. Right here. We need to actually, we can cut this and these expanded. And we don't need to use this container here. We don't need to use this container here, and we can directly use the expended here. So remove the child. So these expended and this one will be work. I think. So now if I run this, it still, I am seeing this. Now. See now it's not working. And the reason is that we can define the height from this container. This is our main container, lake. Lake or this container? This container actually. Okay, So since we don't have anymore continent hair, so inside this row, before this row, we need to add a new container here. So change this widget to container. And he had defend the height of the container, let's say 80. Now it will be what? Now see our particular Nevada in the middle, C in the middle. Okay. So that is what I wanted to show you. Okay. So the only mistake we did, so after the card only need to add a container and inside this container need to add the row. And then we edit this tendency, these expended and these expanded. So if we need more space, so nice one, we can select three because this one need more space. Okay? See you, they're getting more respect for these two are getting, let us think it's not looking good. So two is best. And I am under either we are getting because we did not add the if condition for the snapshot. Okay, So we'll solve it letter. So I think we have done everything, whatever we wanted to do. We can just call it horizontally and we can just call it particularly materially. Okay. So the only mistake that I did, I need to show that thumbnail URL and not the URL link here for the CMS dismissed in December than Disney's theme. So we can change it since we are getting another URL near the Tammy. Okay, so datums not for detained ending the URL and run this. And we will see that actually those images are same, no difference, same immediacy. And just in the edit that you found it. Okay. So I think that's it for this part. Thank you. 7. Final App: Hello guys, welcome back once again. So in our previous part, we successful retyped these particle list of item. And we, and we were showing this image as this title and these circular avatar. Okay? But the thing is that still, we are getting some error. So let me show it. So if I run this, see, we are getting a euro before getting the data. And the reason is that we did not add the if condition that we edit for this part. So, so actually is depend on the internet, the speed, that means it are in this application taking few time to get to load the data from the server. And that time when he is getting, when he's not getting any data. And that 10 is showing you a 0, that means the now non-dot FL level. So for doing this, what we did for this part up to this future, we learn we added a simple condition. This is the if condition, and then we added this us, then we added this leads to q-dot will learn. Okay, So we, we sit here, we just said here, if there is no data, then just show a message loading data and evils. That means if data is every level and then show it in Santa list view. So for doing this in here, upper third tease future builder. We need to add another if condition. Okay? So if so, if this snapshot dot data equal, equal, null and inherit, we need to return it. So written what we need to return 20 to return a center. Just inside the center, we will show it messes. So chart is going to be, I can say new text and we can say loading data. All right, so that means if there is an error and then it will show us this loading message is still, we are not done. So let's run it and see what we are. What we can see now, see loading data. Loading data, loading data. But the thing is that it's tech Tomas time and we are getting this data, and this time we didn't foresee the Udot. Now it's still not done. We need to use condition here and inside this, inside this condition only to put these lists who builder. Okay, so add a condition, so eels. So that means that I is ever level. Then we will for this list, who builder here, that means the hole that us, so the zone is instead it from here. So I will cut it, the whole list view. So I will cut it and inside this list. And then i o paste here. Okay, So this one. So now if I run this, it might take very less time. Say you didn't take that mass time. And we can see this data is, and we can see for ease and every item we can see that random color. I think for the second color, we need to change this color because it seems the similar color because all are both are red actually not shared actually, it's like in deeper ends and the red. So this one, I think before that I can add another color. So I can say colors and you can say, what about blue, black, yellow, gray, whatever this amber color. So add a amber color. So now R1. Now it might be good. Now not need to run it. So we can see this amber color. Now it might not look good. Okay, So all of our design issue, I hadn't done it quite similar to, it's quite similar to these application, right? It's quite similar to this set litigation, right? This, okay, So we have done all of this thing, I think now the only thing is that the details and data part is still remaining way to do this. That means when you click any of these items, then we will move them to, we'll send them to second place where we will show the beak size images and the whole texts. Okay, it might be good for doing this. First of all, we need to create a new data file. And this file file will be, we can say in detail pace. All right, we can say detail page now, if I click here. And anywhere we need to use these import. So I'm sorry, I'm going to use this Mitchell dot. And any ironic that this is dreadfully jet. So in here when you define a class name, we can say in detail. And no chance this container and working a scaffold which it, okay. So first of all, I need to add a bar. Okay, So these Amber. Is going to be new upper and title isn't going to be linked text. And any arrow we can say in detail and data, okay? And add a background color. And background color is going to be colors. I can choose tan, green colored, and it might be good. Okay, all right, now for this, we need to add some simple design like one MS and a taste. So we need to add a body here. So body will contain a, definitely an internalist foods so that we can call it l2 is going to be children from the Noguchi it and anywhere. So this is our ListView. And one we can say we can add a new container hair. So new container only to demand chain. As inset all 10 of 1000 is the amendment that actually is like that design issue. Well, actually it's a very easy process now inherit we need to add a column. So child is going to be new column, sorry, not container, it should be column. So column will have fun and that children objects. Okay? So first parameter is our image. So new image.net in January to add our images. And another one would be our text. So we need to add a constructor of this class. We will get our data through this constructor. So what do we can say? We can say that detail is going to be this detailed. Okay? Now we need to add the constructor here so we can say this dot detail. All right, so we're almost done detailed data and go back to the homepage. Now for this, not for this, not for this text. When he literally click, we will send them to the detail pace. So how can we do this? So this is our, not, this is R. So this one and this expanded that missed in this text. So this see the title. So this is that these texts. So in here only to add on top. So if you want to add the clickable of a text, we need to use the inkwell method motto detour implemented yet. So how can I do this? And just click inside this text and at the left side, you will see the mouth and click here and add a new widget and anywhere at all. And so this is a very easy processing. The inkwell and this.title and this inkwell contain a 110 property. So if we can implement this anti-poverty that we can do it clickable, then we can pass it in there. Okay, So before doing this, we need to import this in detail page here. Okay? So import, I can say this in detail, pesto dot. All right. Now if I come here and now inheriting it to pass out navigator, okay, so we need to use these navigator dot. So we need to use the navigator there. There is a real context and taught push, displaying to a new material, pests, drought, and these bugler contestable context. So when context C, We'll context C. So this will conduct, see an uptake this bill context. We need to use the song and our detail and just detail. And see, remember, in heroin created a constructor held the stock detail. And now we are calling this detail here. So Bill context in this digital class and in this parameter only to pass out snapshot and dot data. And we need to pass the whole index position four 0s and every data. So we are almost down here. Okay? So see for ease and every data we're sending here. So this one is data for this one for ease and every data. So this position, this position, this position and there, sorry, I had a chair snapshot data index that miss the whole index data. We need to move there. Now once we are here, now we can easily access this data from here. So we need to, we need to use, we need to use this one. Okay, so now we can get the data here, but we did a mistake here. We don't need to create the instance of the detail. We need to create the object of our data class. See in these data class, okay, so we need to use this feature of the data class. Data is going to be in this letter and we need to import the library. So import library hair. Now use this data inside this constructor. Okay, so this is all our, so create the object of this class because we need this data. Okay, So these were the object and pass this data. So these in detail, parameter and inherit, we don't need to send anything because we're getting these conditional class here. Okay, this didn't close here. And inherited passing the snapshot data, this index. Okay, now we are ready to go. So now inside this image to network, we can, we need to use this widget taught this data. This is the object of this class that we are passing through this in detail. Plus, okay, So this data dot. And now if I, if I press the dot then, then, then you will see now we're getting all of the option, the Title, URL, Tom, name, and ID. We need, we need here the URL. And then add the height and white. So select Hide, say 250, 500, and donate to select White cause it'll automatically feet and forth. And it gives the box financially. So BOC speed that cover. Now if I run this hopefully will variable. Now if I click this one C or we can see in the CMS, okay, So we are not getting the whole screen. So add for white and the media query dot of context and dot size, dot y. Now if I run this, see now we can see the whole screen for ease and every numeric and see the different isn't a very nice one has defend, these are different. See that? Defend on, okay. So we successfully, I will to complete this one. So we are able to passing the data from one phase to another phase. So you learn it today. So it's very easy and just throw this navigator dot off contract the push and just pass your, your data item that is snapshotted data index because in this index position, the whole data store. So they're saying we're getting this data and this detail is a class of this in detail pace. So these in detail pace. Ok, and we're passing, we're getting a constructor and we created the object of our model plus, because all of the data is stored inside this modal class. So if you want to get access, they don't need to use the instead of the modal class. And then we are passing this object on this ammonium class using this constructor of this in detail in class, okay? And then we are getting this year and then passing it in this way. Now all of our data are stored inside these data for each and every item. So we can, we can set this data. But if you want to do this for before that, we need to use this widget 10 data. Then this URL is a very easy process case. So now we need to use this. We are using this media query white. And because we need to add the image size full screen, this is the venues are, so alright. Now after that we need to add an undecidable so that we can get, so that we can get some height. So there's the high 10. And in hair. So to actually do one thing, we don't do one thing in here. We need to add a circular avatar, then we'll add the text. Okay, that might be good. So what we can do here, we can add a new container here. And these content that will continue Job. The child is going to be new row. The inside is 0. First of all, nuclei and the children of widget, we will divide into two parts. So for doing this is merit to it expanded, so new, extended and expanded had the child of objects or report that need to access this flex. So select dishonest one and add the child, child is playing to win new container, nut container, actually a new sarcolemma. So new circular avatar. Okay. So new circular avatar. And then child is going to be new text. And WeChat dot data, dot id, dot toString. And due to chance. So let's run it. Then we can see. So we don't need, maybe we don't need to use this to Eastern because there's already a string when, because you've converted it to one, say, Oh no, we need to do this thing. So dot two string. Okay? Well we are getting this thing. The C, we can see this here. Okay, So for the second pace, see, you can see two. Okay. So we need to add here that see, it is stated in the Middle Ages she should we ascend the left side. So for doing this, we need to use this cross-section alignment and closer villain mentor to start. Now if I run this, it will not cross exit. Actually, it should be main exit. And although we will decorate letter because if not about the ROE is about. Column. So after that we need to add another size POC. So new such box wipes, not 10.7507 and add new icebergs, not news as well, newly expanded. And after the insight is expended, what do we need to do? We need to add and under Flexbox. Flexbox it'll be two and need to have a child child is going to be new text and inhale return this dot data dot title. Now run this application C, we can see that text. Now all of the data faster folded inside the columns. So there say we need to use this. So viruses. So this is the column in here on Tuesdays cross-sectional and men. And these grows epsilon Mendota step, it might work. See, it is working right now I think. And it changes it to meaningfully alignment to the main incredible and men start No Ish networking in this way, I think actually maybe it's take the space of the 10 dB. Hey, if I add it here. Okay? The years working perfectly. No problem here. We are getting these here and see. Okay, so we're almost done here, guys. I don't think we have any problem right now. And we're getting this extra space because we added these marching 10 dB from here. And from here we also added these marching and the size box and they're severe getting these specially if I remove this margin here, it might disturb from the left side. Okay? So now click here. Now C is quite good. I think it's better to add this margin here. So Marching. So at the margin, margin as instead of this five-prime 0, not 5105. Now if I run this, hopefully we'll be able to see that theme. Yeah, it's working. So thank you guys for watching this video. Hopefully, we are getting data from serovar and showing it in horizontal way. We can do it in multiple colors, multiple random sarcolemma recolor. We are getting data from server and showing it in my article list view. And we're also passing data from one place to another pace. And we're also returning the image's detail and many more things. So I think that is the last part for this session. So see you in the next section. Thank you. 8. App Two- Sunrise and Sunset Finder App: Hello guys, welcome back once again. So in this part, we're going to start to build a new application and we're going to learn the new concept and a new way to get data from a rest API or JSON data. Okay, So in this part, we will build a sunrise and sunset time finder application using JSON data. Okay? So for doing this, first of all, you need to create a project. So as you can see in hair, I created a blank project. And here you can see the all generate coated. So what I will do, I will remove all of this code and I will start it from scratch so that you can understand how, what is going on inside here. Okay, so just create a new project and inside this main fault, import material dark. And in here, we need to use this void main. So void main, and then only need to add chair this run-up. And inside the sign-up, we need to add new material f. Okay, and inside this Media Lab, we need to add our home. And this home is going to be a newly scaffold widget. And inside it is Kafala budget. So as you, as maybe you know that in in all of our previous part, prefer sex home, I were I was working with the separate Feldman in this part. I would like to work in the main.js file. We don't need to separate it, but if you want, you can do it. No problem. So fast at the back. So AB bar is going to be new L bar and edit title, title is going to be new text. And in here I can, I would like to say that sunrise and sunset and add a background color and not bottom. Actually, we need to use the background color and background color is going to be colors. Dark. Purple will be the good. So I think deep purple. Okay. Not deep purple. The normal purple color is very good. Okay, So this is our main scaffold budget. Now if I run this, we will be able to see this thing. But before doing this, we need to configure it. We need to read your project to get the JSON data from the server. So first of all, and where, from which side we will get the sunrise and sunset data. So if, if you search on Google that free Sandra's time API, then use a couple of wave settling. So from this link, go to this link, that is sunrise and sunset over our API, okay, time API. And once you will go this side, you will be able to see this in the diesel have said profile, the free API for sunrise and sunset. And here you will see a couple of example of this. So in here you will see the sample request from here, and this is the API. So choose FastAPI, okay. So choose this faster fear, copy this and paste it here. And in here you will see in this JSON data but is not formatted. So for doing formative, go to the site that is called JSON formatter dot curious concept.com. Okay, now copy this URL and if I paste it here, inside this, you need to paste and it our URL. So if I paste it and then click this process, then in here we will be able to see this data, actually this whole data, and this whole data in a JSON format. So in here, if you look, then you will be able to see these, this result. Then the sunrise and sets and all of these data are hitting her in a map and QA is dishonest the map data McKee, and these are all of the Seventh Hello. So in our previous part, we were, we were working on a list of data like ID, the ID, ID, ID, ID and the data, well, and the data was in a array, okay? So in this part the scenario is very different. And this is called a map. And all of this data in a map. So we need to use that so that you can learn how can we get data is in the map. Okay, So this is going to be our API. And before doing this, we need to go over decades and inherit we need to tie fair is TTP. And this is important to get JSON data and in the fast lane go to this HTTP. And in here you'll see distinct. So click the installation and inherit. You will be able to see that dependencies. Okay, now copy this dependencies. And and here is our application. Then we are creating now and open this thing and go to this party respected woman folder. And inside is published with the Wyman folder. Apply this dependency and appendix Cupertino icon. We need to paste it here. Once you've been done, go back to your main dot dot and go to these tools and then connect these flutter Peck is get. All right. So in here you see the finished code execute. You consider that means we successfully added this file. Now if we scroll down in the bottom, then you will see that we need to import these packages here. Okay, So now copy these packages here. So copy it. And in the import file in here, who need to add this importer or right? Okay, So as in here, we need to create a variable for these packets. So as HTTP and this STDP will help us to get the data from the server. We will use a letter. And in here we also need to add some couple of packages and unawareness and our caressing. And another one is important, our.com voir dire. Okay, So this is our basic requirement and update this main file in here. I'm going to create a new, new method and the method table with the future. So as you already know that the future is a type or property or a tube or whatever you want to say to get the data from the server, we need to use this. And in our proof has all of our lectures. In previous lectures, we were using the easting and sometimes we are using the list on this user type. But as I said that this one is in my way. So this one isn't math and this one is a key. And sudden the lucky and the yellow. Okay? So it's called the map structure. So in here, we need to use it. We need to use map, okay, with that map, we can get this, all of this data. And then we need to define our method name here. And I can send it that and get some jelly. We can say get all data, okay? And so this is a method, as I said, that we need to use this async keyword for getting data from the server. So this is our basic requirement. So we just created our all of this functionality and all of this data and inherit, we need to add our API. So California roll and call it var API. In here, we need to paste our API key. This is our, let me draw on these links. Okay? So we are going to, from the first link from the sunrise, sunset time, okay, make sure that you are actually, all of these are similar, similar. Just sum that up and down below is different. So better, you can go to this one. So copy this one actually, this one, this is the first one. And paste the chair. So all of our data are ready now. Now we can start getting data from the server. Okay. So I think there sit for Dispatch will continue with our next part. Thank you. 9. Server Data From API : Hello guys. So we'll come back once again. So in this part, we will start getting data from our API. So in your previous part, as you can see that we did in the basic setup for our project. Okay, we set up this institute be PKAs and these methods and these API as well. Okay, so now we need to add another variable, and that is going to be our bar. Again, say that JSON data. Yes, On that note, we need to convert our EPA to JSON data. So click distance. So press this JSON decoder. We need to decode our APA, Okay, and in here we need to add our and I'm sorry, before this, before the JSON data, we need to get our API. So for doing this, we need to add a variable, can say these data and only to use this keyword. And as I said that we need to use this HTTP, http dot and get an inherent when you turn our URL, that is our API URL. Now, our API data are stored inside this data. So while we are getting this SCTP, as I said earlier, debt EDR, we added a variable called HTTP for these STDP packets, STDEV dot dot packets. So see I added here as is DDB. And using this std variable, we will get this APA. So http.get this API and this API content, this API URL. And we need to use this asset for getting the data. Okay, now our, all of this API data are inside this data variable. Now we need to convert this data for your goals to JSON format. And then how can I do this? So we need to keep it under variable. We can say var, var, var JSON letter, okay? And insert it just on data. We need to just one dot d coach. And then only to use this source, let me have a decent data.com body. So our JSON data, this one is going to JSON dot D got. And so I hope you understand that and it's very easy process. Just need to add our API inside a variable and then we need to use a variable. And then you're wet http.get this API, okay, after that, once our data is ready, then we need to decode this data into a JSON format. So for doing this, we created another variable called JSON data, then JSON decode, then this data, the reader source of our hair and metadata. We need to add Distinct, okay, an upper debt. We can return this, we need to return this JSON data. So simply return this JSON data. Okay, so their seats. So these four line of code will be able to get data from the server. This is a very easy process. So this is a very easy process guys. So now we're done with this function. So let me explain it again. So we are using your map and the reason is that I said that all of our data in a map format see all of it at NMF format. But in our previous part tutorial, we saw that when we are getting the data, when we were getting the data from the server. And that time it was a list of data inside the array, in an area and then area. Okay, so now each in maps, so we need to use the type is map. Now go back to this main file, okay? And any ad we need to add because this main fund is the header file. Because when we are running the application on these main phone call in here, we need to add the asynchronous system because we need to add this async keyword because we are getting data from the server. Now in here, create another variable. And I can say this bar. And I can say simply said, all I can say, I can say not actually par, inherit, we need to create a map. So map, you're going to be data is local to you, which is going to be our method name, that is our good old data. Okay, so we're all done. So why we are creating a map variable? Because we were pulsing our map variable data. Okay, So anyhow, we need to, we need to make sure that we are creating a variable called debt continuum map. And then we are getting this data from this good old data. Now, we will be able to get all of this data that we were facing inside this method. And then you can get this data using this and get a variable that is a variable of map. Okay, now let's try to get all of this data one by one. So first of all, I will print it inside the console, then we'll set it in our layout. So at print. And first of all, we need to add our decent data. Because inside this data, all of this may variable or a start now. So now add listen data, I'm sorry. And insert days and it used the data and inherit. Then this one is our fast map. That other is called this result. So copy these results. And so this is our math then only to her dove hello, and hello is the sunrise, sunset, so our moon and lot of things. So first of all, copy the sunrise. Okay, hopefully we'll be able to see these data in our console C. And now, and the semicolon. Now if I hit this Run button instead of around console, hopefully we will be able to see our data. And Harry go and you can see that's 54 2200 m. This is this 54 000 m. So for, for, for the confirmation, what we can do in here, we can cast a string with this data. We can say this sunrise, time Miss. See, now safe, and now hit this Run button once again and open this terminal. And open this console actually, then it'll take you time to get this data from the server. And okay, let's run it again. And now we can see the sunrise time is these 540. Now let try to get this. The second data, this is sunset. Now cooperative sunset key and make sure that you are using the same is spinning. If you don't use the same misspelling you might get either. So chance it to no safe. Then we will be able to see the sunset data, hopefully. Take few more times. So hit the Run button again. See that I miss 7, 2, 4, 7, 2, 4, 3, 4 pm. So this way you can get all of this data from a map. Okay? So now if I add this solar noon and then run it. And for synonymous 12, 14, 27, and see these 121427 PM. And all of the data we can get launched at the last one. Okay. Last one and also no granite. And C nine 1000 six PM for this 1900s experience. So we are getting all of this data from this map. Okay, let's do one thing. So this one is a another map and that is result map. And this one is an under my, my temp. So if we want to get this, okay, so if we want to get the result or for all distinct, then how we, how we are getting this data. We weren't getting this data, this data. Then this map name, this is the main name or we can set a key and four then, then that fellow named who is, well, we wanted to get, now there is another map color status. Okay? So now if we want to get this result, then how can we get this? So we just need to copy this one and then just add it here. And we don't need to add to this one because this is not under these statistics alone. Now if I hit this Run button and hopefully we will be able to see these OpenSSL. And here you can see these OpenSSL. See this, okay. Very good. Yes. So the ease and every data we can get from this API that will have inside the map. Okay, So this is for this part and this is very easy to get this data. So in our next part, we will design a layout. And inside of our layout, we'll set our sunrise and sunset time. I think that's it for this part. Thank you. 10. Design Body: Hello guys, so welcome back, 1 second. So in our previous part, we were getting all of this data and we are painting it inside this console. Now in this part, we're going to start painting is data in a UI and ogle designing UI. And inside this UI UX, you retire if our data and then we will set it yet. Okay, so for doing this, I would like to add a image here. So first of all, I need to create a EMS director S at directory. So bleak on your project name, then right-click and then create a new directory. And I'm going to say it is S8 and click okay. And inside this esoteric today, I would like to add an image. So I will use this hemisphere. And he said this as a directory, I will paste it. It's not in the soil actually, I think I can copy it and paste it inside this asset. So the name is Sun. Now open this Barbies test.html and inherent we also need to, and the seam is why when you test this image, we just met realities and up and this is just material isn't true in here. First of all, we need to add these assets Q1, and this is mandatory. Then add a hyphen, then your image directory name that is set for our class. You are, you must namely the sun dot, JP, de, sander and JPEG now, go back to your main file. Now go to these sleekness tools and then flood are then further packets get. If everything goes well, it will give us execute code 0, that means molar. So we have successfully adaptation. Okay, so app.use AB bar. We need to add a body and this body of content in this whole body. And I think for looking good, I think we can add it on evolution. Red icon here, okay, I think we don't need to add an evolution, would just add that icon. We will not add any data. Is going to be new drug. Okay? So now if I save it and then if I run it and do her trilogy, and let's run it, can't recognize it. So now we can see these navigation drawer icon here. No data is contained here. Muslim, because we don't need to add any data just for, just for the good-looking. I am adding here the centromere. Okay? Just forget it about this. And append that. We need to add a body and inherit. We need to add a new point. I can say we need to add a new container because we don't need to add a ListView. And because we are not getting, we're not just calling any data or anything list for you. Okay? So container, it will be good for us. So select the new container. And inside this container, I'm going to use a new child, and that is going to be a new stack. Okay? So inside the stack and the stack contains a children are widget, okay, And inside the stock. First of all, so what is the advantage of using this stuff is tacky. So one kind of widget that is like the column row list view, okay, but the advantage of a stock we can do overlap. That means inside the image we can add another takes an analog data. Okay, so let's get started. So first define a container here. So new container and select the height and hydrogen. See the media query dot of dot size, dot Hi. Can I fixed it? Not fixed in that fixed and select the white as well as this media query dot of dot size, dot white. So this is all about this height and white. And update these inherit what we need to do. We need to add the child. The height media query dot of contexts are sized at White. I don't think there's a problem. Okay, let's run it. If, if it get imprinted problem we will get an error. They're not getting any Euro. Okay, so first add a child. And child is going to be new. We can sell new images. So you Image.all asset. And in here who need to add the image. I'm going to quickly access the image from here against say this. Sun dot JPEG go. This is Diana the propertied for getting the images. Now if I run it, if everything goes well, we'll be able to see any mess here. But we are not getting these things. Lead to one thing removed, this height and white media query and define the height. We need to define the height and hide. You can say 8002004. White is going to be media query dot of dot size dot white. Now if I run this, still we are not getting. So the reason instead, we need to, we didn't mention the Heidi and white for this main container. So just copy this container height here and paste it here. Now it'll be fine. Okay, we're not getting the images from here, and I think we need to remove these first AND color, Let's say if we can see the colors. So colors dark, purple, say feet, Shani it not, child actually should be color. Okay, now if I run this, we're not getting just because of these white. So add a white. I want it to 0. Now add date. Now in here, we can see the background color. That means we are ready to go. So what, what is the problem if I was using media query dot of dot, size, dot white. I don't know why it is getting the year from today, maybe the updated something. Actually, it's not creating any problem here. See no problem, But, but I don't know why it is showing you the Europe. What was it called? Undefined named context. Okay, So do I need to you to use this context? No problem. So I think it's not, it should work the soil. Okay, so now we are done now try to add the images instead of the color. So we can say, we can say that child is going to be new. Ems sorry, new images. And these images containing another remiss. Okay. Then is going to be new asset him is. And in here we need to add that directory or Themis, that is asset for our slurs, our n, m dot JPG. Okay? So this is our image size. And after this heme is, don't forget to add the feet and is going to be box we don't cover. Now if I save it, if I run it again, what is happening here? When I'm getting now run it? We are getting the Euro just because of these media queries onto contexts. So it's not working right now. I think I need to remove it. And we don't need to do is by default to take up the white. Now if I run this application. So here we can see R, here, we can see our images. So this is our image. And insert, these are dead, gone over. So you can say, and inside these emails, we need to add we need to add another text where we will show our fund sunrise and sunset time. Okay, so what we did here, this is our first container and inside the body and then we define the high nano yesterday stock. Why we added a stock, because for that or we can do overlap. Let me inside this image, we can add another container and where we will show the sunrise and sunset time. And inside this container, we need to define the height. Height is 800. And challenge Day-to-day image. And this image continent SMS. And then just need to define the directory of your mAs. Then feed and don't works, we don't cover so that we can get the full exactly the full size of the penis. Okay, So this is all about for this. So I think that's it for this part. We'll continue with our next part. Thank you. 11. Sunrise and Sunset App Final Output: Hello my dear students, welcome back once again. So in our previous part, we did this design. Now in this part, I'm going to, I'm going to show you how can we add another container and another color inside, inside these, at all four of these IMS, that means we need to do the overlap, okay, then we will add, we'll retype about data. So as you can see in this container, I defined the height 800. Okay? So now inherent need to add another container, each other instead of container, I think we need to add a new position. Okay? So add new position while I'm editing this position because it will give us the opportunity to get the get the margin from Eastern every site and then so that we can add a container inside this at the top of this text. Okay? So you can say bottom 5500. Then add a child and child is going to be a new container at first as a container. And select the color. Color is going to be colors, dark purple color. I'm very sorry, not child actually it should be color. And then run it. Okay. But we can't see it. And the reason is that we didn't define the height and white. So let's say height is 200 and 2000. Now hit this Run button and we come see you. And the reason is that we define the height fairly large setting. If we define it 500, then if I she loved it. Okay, I'm very sorry that I forgot to add the white for this container slide is going to be a 100 times 0. Now run it. So here we can see the images. So let's do one thing's chance to height. Can we add it media graded or context now? So media query, dot of context, dot size, dot height actually is not working so better, we can select these 850. Now if I run this, Let's wait a minute. Now. I don't know actually how many sizes should have. Maybe still you can see distinct because maybe for the modem right now if I run it, then what can we do? We can see this is in the tough. Okay. So beavers time it was 1200. Now if I run it and it still is to refer to a phone, a 100. Okay, just leave it no problem at all and just define it to 900. And so this is our position to, and anyhow, we need to define, first of all, in here, inside the container, we need to add the margin. So at margin is going to be as in set all these 10 points, 0. And inside this first position two, we need to use it from both Domingo can say, or we need to add 10, not 500, 50 points, 04 left. We need to ask. Actually, we don't need to add from left side because we will automatically, I will get it because we are using the margin. So this is our thing. Now, let's do one thing and the increased white. So instead of two hundred and four hundred, four hundred and it must more, better. And instead of 400, 300, it was Muslim League and then 300. Okay, So this is the thing. And to hide, naught should be 200. It wouldn't be good if we can select a 150 and just increase the font, I can say the white to t 50 or 40, something like this. Then we'll be ready to go. Okay, so here we can see, so this is our images and any other actually, we don't need to add any card fee or anything like this. And inside these tags, inside this, this background color, we need to import our data. So inside the child, inside this container, upon this color, we need to add a chat. And child is going to be noon. Column and column will have a Chilean on widget. Why we need to end this column, because we need to add these sunrise and sunset time. Okay? So now in here, we need to add our new do one thing at, or I can say consider new container. Inside this container we need to add a child and child is going to be new text and inherit. We can say our, we can say this sunrise time. After that in here, we need to add this variable that is called data. This is, this is the variable of our map that we were getting show these future and the method that I explained in the previous tutorial. So use these data to use this data here. Data. And then after that we need to add the key of them, yellow that is done. Jars. So this is the Rachael's. Okay, And after this result. So this is the result and inheritance. We need to pass our visual. That means that key, not key. This was a list of key and value. So for Sunrise, the keys and the Sandra's, Okay. And in here, the sunrise. Okay. And after that, we need to add a style so that we can send that text Policy Studies going to be text style and font size is going to be 2500, and color is going to be collage dot white. Now run this. And now we can see the sunrise time, but we can't see it in the middle. You can see it just didn't laptop. So for doing these incentives, Coca-Cola monitored air this closer Exelon man is going to be closer to the center. Now run it. And in here, k We can't see, I think we need to use it here. The mean x is cos. We need to add them in data here. So these meanings is alignment. Now run this thing. And here we can see the sunrise time is five-fourths, 2AM, and other less. We also need to add our sunset time. So first add a new size books, new sized box. For new size box and height is going to be a consultant 0. And after this height, need to add an another container. Or instead of continuity can directly edit text. So new text. And our text is going to be, we consider sunset time. And plus our map data, then our map. That is a religious. Remember that guys, if you miss, if you did any spelling mistake, you'll be able to get that data and apply this result in hair. When he turned the key on the value, we're Luis sunset. So if I save it, then we'll be able to see it. So now we need to add a style here. So style is going to be take sister and then form size is going to be a tin point 0, 0. And the color is going to be colors. So colors dot deeper and select a different color, not deep purples. Select inspect, deep orange soccer now hit the Run button and inherit. Hopefully we will be able to see the sunset time. But the thing is that we can't see the text properly. It better to change it to white and change the font size 18 to 20? It will be good if we select the similar size. And in here we can see the sunset time is seven to 04:00 PM. Okay? So this is what we wanted to build and we successfully getting data from this thing. And if you want to add the solar noon day lend and whatever you want, you can get one by one. So let's get, so let's do one thing at these Dell and civil twilight begins the B natural to a light. Solar noon. Okay, so let's add the solar noon thing. Okay? So create another take, so new, faster the new sized books. Such books and height is going to be 10, is going to be new text. And we can say solar and then add the later. Then only to use the results. And then we need to add that sounds as sound, September, the NAACP sunset, solar moon. Okay, now add it. Now as OLS we inherit, we also need to add the style. And the style is going to be text style. And in statistics is telling you to use the font size 20 points, 0. And color is going to be these colors and dot. Right. Now hit this Run button. Hopefully we'll be able to get our results. So we can see that solar Nunez do one thing chance discolored to block, not black. So black will be good. So now hit this Run button. Now in hair will be able to see this black color. So this is our application that we wanted to build. Okay, So this is guys, this is a cop. I think Y2, we could just remove it. So I think this is the final part of this course, of this section. And tie thought that and I think that you learn how to get the mapped hello from a JSON API on JSON URL. Okay? And this is what I wanted to teach you in this, in this section. Okay, so I hope you'll enjoy this. So see you in the next section. Thank you. 12. App Three - Weather App: Hello guys and welcome back once again. In this part, I'm going to show you how can I build to a flat our replication. So for doing this, first of all, you need to create it for our project. As you can see, I already created a flutter Empty Project and it's very easy to simply project. So now I will remove all of this course, all of this code, and I will do it from scratch so that you can understand what is happening in here. Okay, so import material dot Peck is important. What I can say, it not showing me the canal which is okay, so import material dark and inherit what we need to do any twos poet, main. Then we need to add, we need to, then we need to add share. And these sharp, which is going to be new material F. And in here we need to add our Hongkew art. And that'll contender new is Kafala budget. I don't want to separate all of the court because it's a very simple projects with economical learn it from here. And I don't want to create any complex thing, okay? Say I'm going to work in this main file. So just for some AB bar so that you can see there's some design. So AB bar is going to be new at par. And inside this I-bar edit title is going to be new text. And I can say it, and the title is going to be whether the application, okay. Now add a background color. Not gotten, it shouldn't be background color and color is going to be colors. So colors dot t porins. So now if I get this, then we will be able to see this thing. But we need to configure our application. We need to import some packages. Okay? So go to this Pub dot-dot-dot STL file and inherit just SARSA is TTP. And Ginny Are, you will get these STP. And we need this team because we need to get data from the server so that, so that we can get the server from the API, we must neutrino disparities and disparities will help us to get data and go to these installed. And in here we need to, you'll see the dependencies. So copy this dependencies and in harrowing, able to see our application. So here is our weather application. Okay, so go to the hospital to YML file. And inside these dependency flutter SDK after discrepancy, new icon in here we need to do is distinct. Now go to this main file. Now go to Tools flutter and further back as get. Okay, Now we will see the exit, exit code is 0. That means it's working now. Okay, now we need to add couple of packages in the top of our file. That means we need to import then, so this packet is required. Then inherit, we need to create a variable, as you can say as HTTP. Okay? So this variable will help us to get that data from the server. And in here, I will add some, I will add a couple of packages like in dot-dot-dot converter. And we also need import and this is going to be dart async, okay, So this is all about these things. So this is our pipe main things. So this is the basic, this is actually the basic thing that we must need to have if you want to get data from the JSON URL. Now, in this part, as I mentioned earlier, debt, we will get data from weather API. So just to go to this Google and sars fewer that API, then you will see a couple of wave set are available there. And from among all of these website, I would like to work with these open weather map. Okay, So go to the isoprenoids or math. And this is the website where he will get whether APA, and in here you will see a couple of things. So if you want to do build professional application, then you must need to register to their site. Then you need to buy your can take the free trial for the API URL. But right now, we don't need to do this because we are just practicing. So, so we can directly access distinct. So anyhow, you will see the lot of API data. So we can work with current weather data. So click these API doc. So in here you will see some instruction on the CT and a lot of things you will see. Okay, so now if we copy any of these API, like these API, then we will see in this data, if I click this API and then we will see in this data. Okay, so let's work with this London okay, data whether APA, London, example, they pay call and go to this London in here. Now copy this link here and go to this JSON format validator, the site. Okay? So this side will give us the JSON format. Okay? See in here you can see the random data. We can understand that what is happening here. But this link, if I paste it here, and then if I click this process, then it will give us the structure of this data. See in here you can see. So in here you can see the coordinator with our basic main Visibility wind cloud says and many more things. So in here we have very few data. So as I said that in our previous part, previous section where we're building application, there were and the area of JSON item, okay, using the ID and a sequential part, we were not able to get this data. So now in this part, C, ease and every data is a map. Okay, inside map. So this also in this part I want to show you how can we get the complex data, okay, so that you can understand it. So in here or you'll follow when we need to use the Maybe structure Nikos in DC and dishonest map like this one is the key and this one is the for loop. Okay? So this one has very less data, less debt to get some complex data. Again, go to this homepage. They're not home-based in here. Okay? So if I click these hourly forecast and inside this hourly forecast for the example API, I think from the city name, from the example API will not be able to see these. And from these examples API that click what, an ICC. Boom. Okay, so from these API, this API, okay. So parameter ID COVID example a PE called okay, by city ID. After this, by city ID. 13. API Data Structure: Hello guys, welcome back once again. So in our paper, we explain a lot about today's about these JSON data, okay? This URL and this thing. Okay, so if I minimize this least there is another data called city near Moscow, okay? Then latitude country. Okay? So then how can we get these data? Okay? So now and after now we need to start working here. So first of all, we need to create a method and method will be the future. And in here, as I said, these all data are in a map format, so we need to use some math. We can use it here lately story steam. So now we can say get all data. Okay? Now we need to do it asynchronously because we are, we are getting data from the server. So we need to use this asynchronous process. Now, inherit, we need to create a variable, and I can say API. And in here we need to paste our API key. So this is our a picky, so copy this API key and paste it here. And after that. Okay, so now we need to get this API data. So we'll create a variable bar. You can say data is going to be. So var and data is going to be your weight than http dot get URL is going to be these API. So this is important right now. Yeah, This is important. So what we did here, as I said earlier, that we need to create a variable for the Yesterday packets. And this aesthetically will help us to get there epi data. So we need to use this keyword and then http.get and the zip EPA. Ok, now our EBIT and our inside these data variable, now we need to decode this variable using JSON-T. Got so far we can say JSON data is going to be JSON.parse. Then we need to use the source and we can sell this and data dot body. Okay? So just unknown data. Then var JSON data is going to just hunt on the court is going to be data.table body. Okay? So we just only to decode these data. So using these JSON to decode different body. Now in here we need to return these JSON data. So return is going to be JSON data. All right, So this full line of code will help us to get the data. Now, move to this main hair because this is the important file here. Whenever we are, we are, we are running your application on this main file. So now in here we need to use the synchronized keyword because we are getting data from the server. Now in here, we also need to create a map variable, since we're passing data in here using the map Sweeney, I don't need to use that variable. We can say that data is local to your weight. And our method name it is get all data. And using good old data is our method name. This is this meant all that up. Again. Now we can access all of this data using these map variable, all of this data. So in here, if we look, then we will see all on these things. So let try to get data one by one so that it started from this quote. Okay? So linear at print. So we can add some texture. You can say shigella is okay. And upper that, I'm just cutting it. Now. Now, now the main thing is that we need to use this variable net is called data. So data then third bracket. And in here we need to add this map key. Okay, this is the key because if i, so he decided the map key design. But for this t and there is nothing to do because they have only the map. But if, if I, if we look inside this list and we will see that inside this list, and there is another error. And inside this area there is text, narrative DT, and there is another area they didn't land. This is another map area, actually, this one, we can say if we think about only this one, then you will see these main mud and this one is inside this list. So we need to maintain the follow-up. So let's try to get 0s and every data one by one. Okay, so just copy it. And now if I paste it here, and now at semicolon, now if I run it inside our console, hopefully we will be able to see our data. 14. Get All Data From API and Show : Hello guys, welcome back, 1 second. So in your previous part, we added all of these basic functionality and we were trying to get is, this message is from here, okay? Okay, as I said, that is an empty one is in math. So and I was getting all this data using this map variable. And why are we passing this map? Okay, now, so result is taxed and then this data and this code. Now if I run this application, and if I look on the run console, then we'll see the result is two hundred and two hundred. Now, what if we want to get this message? Then just copy this message skewered from hair and copy again inhale Luke it. This is not a string, this is an integer, so we need to convert it to a string. So paste it here. And I'll cut that. We need to convert it to a string. So due to a string. Okay, so now hit the Run button and hopefully we'll be able to see so sidereal day 0.0204. Okay, Now, if we want to add this C and D, and then how can we get it? So those processes since same, just copy and paste hair the map name, okay? And now this list has multiple that item and this is quite difficult or difficult actually, you just need to think about the position, okay, so this one is position 01 and 0s and every position has some other properties. Mean whether an unbroken and clouds since a lot of things. So see the 1960s and this one. So we can get, we can get all of this data. Okay, so now this is our, another map. Now just forget all of this math. So now you just, you just need to follow the sequential process like quiz one is who is after? Okay, so this one is fast. This is on many, many list. Then this area than this mean then this data, okay, so fast copy this list. And if I copy this list, and if I just bestest hair, and if I don't mention any position, then if I run it, we might get an error. And the reason is that, so see, we are getting an error. See that either. And the reason is there inside this list, we have multiple data. So first list item we want to get. So we need to mention it suffered the least, we need to pass the position. Let's say we want now Position 0 number data. So this is the 0 number position. Okay? So now if I run it, okay, let's run it. And let me move it. And if I run this polygon 0 and then it's stealing, you're getting them. You don't. And the reason is that after this list, there are a lot of property to so he saw and we want to get so let's say we wanted to get this one, and this one is a integer, so we need to convert it to a string. Okay, so go here and in here, and then convert it to twisting. Now, hit this Run button. And now see, we can see the results. So after this result, for this least, we can get this DD and this is the position number 0. And if we look in position number 1, that data is different. And it is different. Last is 600. So if I change the chair position number 0 to one, then we might see some other data, some other result, C, we can see this 200. Okay? So now let's say we will get all of this data that is inside the 0 number position and after these in detail. So now we don't need to use this digital because we will not get Luddite this data. So after the position, there are few couple of property like main and then whether flowers, no wind. Then says and these things, all of these things inside this list item. So if we want to get the temperature from this, that how can I get it? Then we need to use these Min. And now this is an, another map up to this position anywhere we need to use it. So once, now if I run this, we will be able to see all of these three field. And now we are getting an error. Why we are getting an error? We didn't mention the quiz item we want to get. So let's say we, we are, we need to add this one. So now if I copy here, and then if I paste it here, then if I run it. Then still we are getting the problem. The reason is that we need to convert it to a string because it's an integer. So converted to a string. Now hit this Run button. And in here you can see result is 27 or point 59. So we can satisfy, we get all of these other if you want, then we can get it. Then change it to then paste it. Now, run it. This is the thing is that we are getting from this key. Now if you want to get in the way that data from here, let's say then you need to copy this weather update. And now that these item you don't need to. So we don't need to get this mean data. So we can insert this means. We need to paste it in this weather. And this is the Euler and appendix, whether we have couple of item like main description, an icon. So if I copy this name here and then weather, and then I need to paste it here and then hit the Run button. And we are getting an error because after this, whether there is an Maine, but each step a string, okay, So the integer index is incorrect because we are using the least one then whether, okay, so inside this list, we have this thing, so weather. And inside this, whether we need to use this integer. Okay? So let what it called in teaser of index, okay, so after this, whether you need to use the initial position, okay, So this is the position 0 because there is only one. Okay, see why we're getting, because inside is whether this one is another area. So there's a need to mention this. Who is array, whose area we want to get. So whether than the position, this one is only one letter, so the position is 0. Okay, then we can get them in. This is, the result is going to be clear, okay? So this is how we can get 0s and every data, okay? So if you want to get the cloud, just need to follow step-by-step. Okay? So this one is our, another map. This is the result of weather. So after this, whether there is another array called clouds than wind, we individually. So now if I copy this wind and copy this and paste it inside this weather. Now for this wind, look at there is no area. So we can remove this area attempt from here. And then inside this window we need to copy the spirit and the soul is integer. So we need to convert it to a string so we can copy it. So then paste it here. Okay? All right. Then we can see that Rachel is 3.43.2 where we can maybe use Aboriginal. Okay, So there, so we can see it. All right, so this is how we can get 0s and every data. So now in our application, so now hopefully you understand it how to do these kind of things. And after this, there is another, another map that is called the city. So let try to get some data from the city. So after this position, we don't need to add the position here right now because this one is another map item. So we can simply add this hair city and look at the city after the cities, there are a lot of properties like name, Moscow anode. Okay, So let, okay, let the name apec coffee, this name, then inheres. Now hit the start button. And I can see the result is, the result is Moscow considered casualties? Moscow and upper this. If we want to get the coordinator, then how can we do this? So after the city instead of name, we need to use these coordinator. And then after that, we need to select this let or langue whatever you want. So copy this lead and inside this, paste it here. Now if I run it and we'll be able to, and we are getting an ear. And the reason is that after this city, we need to use this core city than the coordinator. Then let this one is a integer, so we need to convert it to sting. Then sent each hair and in her will be able to see, see. Okay, So this is all about for this part, hope you understand it. How can we get 0s and every data from a complex JSON URL. So acquiring from a complex and JSON URL, how can we get data? And using a map? And in our previous section, we learned how can again data using the Falcon again, the lease term data target. So this is all about for this part. Next part we will, we will get some data from her, then we will do will do, then we will set it in a UI. 15. Show Weather in UI : Hello guys, welcome back. Once again, you saw in our previous part, we saw how can we ease and every field using this map, OK? And now in this part, we will design our UI. Then we will show our temperature and temperature minimize in our application. Okay, so that you can learn how can we set up a UI design n, set it. Okay, so for doing this, first of all, update this, update, this app bar in hair, and to add a body section. Okay, So at body, body is going to work and say new container. Because in here we don't need to add any L2 because I'm not going to add any list of data. So continent will be fine for distinct and define the height of this container. And I can say, Hey, I 800, 2000. Okay. Now, at a child and child is going to be a new stock. And stock has a children of widget property. I am using her stock so that we can do overlap. That means I will add the EMS and inside the and at the top of the image, I will add the text. I will show the temperature. Okay, So there, so we need to use the stack. So before moving to this, I need to add the images in our application. So click at the top of the main directory of your project, there is a project name and then right-click. And we need to create our asset file actually selected on that directory. And we can say insert and insert it. I said we need to paste our images, whatever image we want to add. So let's say I'm going to add these images in here. Okay, you some better to copy it and paste it. So I need to copy it and go back here and paste it here. Okay, we are done. So this is our image. Now go to these powers for good alignment and inherit this use material design. We need to add this image. So write down these SSQ. I remember that you're writing these assets. Then add, then add a space and then the directory name, that is asset folder name. Inside this folder, our image name is Sun dot JPEG. And this is going to be the sunder Sunderland JPEG. Now go back to this main and go to these tools then flooded than his father Becker sketch. So if everything goes well, then we will see execute code 0. See execute code to 0, that means everything is fine. Now in here, we need to add our image. Okay, It's very easy process. So now create a new container. It's a new container. And select the height. You can say 100 points 0 and apply this height, select the child, child is going to be new image. And this image container image property. And inside this image, we need to add our acidemia because our images inside this asset for the directory. So we need to add in these asset directory. So as sediments, now any hair to add our directory name that is called asset. So that is called asset for our slurs. And x1 dot JPEG. Okay, Now at feed box B dot cover. So box fade dot the dot cover. Now we don't need to define the hydrogen while because in here we defined the height 800 for our full body. Okay, that means the whole body section on in this image. Now hit this Run button. Hopefully we'll be able to see the output. So now if I open this, now her ego inherit, we can see our images, okay, that's there after this image. Inside this image, we will add another container, then we will add our data. Okay? So for doing this, what we need to do, we need to add 20 to create another container here. And as I said that we're using a stack so we can easily over levied. So I've got it starts feeding on the container, opens a new container. And this container, actually not Container. Instead of container, we can use her new position. And position is another activity will then give us the way to do overlap. Okay? So I can say here both OMC So bottoms and bottom of 520 0. So from this bottom hour and these data will show, okay. Then in your nib to add a child and child is going to be new container. And the container, and add the hide and white of this container. So select Hide and I can say and select height. And I can say hide is going to be a 150 and select the color. And color is going to be colors. I think the parents. Okay. So now if I run this so I can't see it there isn't. Instead, I didn't defend a wide of this container. The wide it for a 100 and 1000. Now hit the send button. You will be able to cities. And in here we can see this orange color and also we can see it, it, it, it take a margin, bottom 50, okay? Wanting add a margin for this container. The margin is going to be as inset all, and I can say 10. Now if I run this, we'll be able to see it. So now we can see them much in here. Okay? C terminus, 10 different. And if we want to add margin from right-click and Sarah from right, Take 10, I think it'll be looking good. So and now I think we can see C, we can see these tuning. We don't need to do these things. So previous one was very good. Remove this and enjoy the height and clean. Not, we don't need to hide a 150 dB. It will be go to the a 100, a 100 or with a far-fetched. So a 100 or with a partner. So this is what we can see here. So now we will show that our arrows show our temperature. Okay? So this is our container and as the only know that container can contain a child and the child is going to be a new column. I'm adding a column because we can add to that a particular ok. Now in here, we need to add our data. So let's say what I can say. Add directly. It takes some new text and new text. Then we need to call our map data, Okay, so that we can access it. So data. So this data, I'm sorry. Why it is. So copy this and paste this data. And then then we need to add our directory. Now there is a map name. So any higher we need to show at our directory name that is called is not directory, that is the main map data, so leaves and 2. So as you can see, this list and this list content lot of data, this one has positioned on dissenters, another position. So let's say we need to add this list. Then you need to define the list here. So this list and upper, this least, we need to define the position whose position data we want. We want to add that 0 position because this one is 0, this one is one. And this list, list has multiple data. So now we need to copy this list, need to, need to define the position. So from this list, we need data from the position 0 and from the position 0, there are a couple of other data like this, whether description and many other things. So let's say we need to add this temperature from this main. So now, now we need to copy this mean because this temperature, it is inside this main. So copy this main and update this in here. We need to add it here. This one is going to be this mean and this mean when it, this temperature. So if we need this temperature, then we need to add here, in this temperature. We need to add these temperature, and now we can copy it and then I can paste it. Yep. So this is what we can get this. So let me explain you take in the list is our main menu electrically we can set this is the main, main map, and inside this list there are a couple of other data. So we need to define the position and the position is 0, normal position we need, if you want, you can choose one so that then you will see in this position number data, okay, inside the 0 position, there are a couple of other data like with our Cloud wind and minimal things. So from this we need to add in these temperature. So that's why we need to use this mean because the temperature is inside this main. So I select this main and update this. And this man has couple of other data. And from among all of this data, I would like to add in these stamps. So there's my IPS tutor and this temp. Okay, so now add a comma, and in here we need to add a step. Instead is going to say Texas style and say font size. And font size is going to be 2500, and color is going to be. Carla, quite okay. And update that. Now if I run this, now if I run this application, hopefully we'll be able to see the output. We are not getting this output. So let's run it again. And we got an error. And whatever we are getting, we are getting is that it's not a subtype of type of a string, okay, So as you can see, this is an instinct, so we need to convert it to a string. So but temperature, our temperature, we need to convert it to steam. So convert it to stick. Now run it. Offer this terminal level to see it. So here we can see in this temperature is to 700, but it's in the middle so there's less edit in. They stopped. So how can I do this? You can say this cross axis element and across, excellent mentor to Stat. And if I run it. And now we will see this Onitsha actually to live better if we, I didn't center. Okay. So now select center and hit the Run button and her ego not sent. Okay, this is not the crowded Zealand meant to need to add it in the main centres. So need to choose where these main exits element, domain Exile on Main is going to be in this main exits element nerve center. Now for this demo, verbal don't see it. Okay, and lead to one thing after this and a stink. So that just caused H plus. And we can say in Fahrenheit like, like what I can say now, this forward slash Fahrenheit. Or if you choose, you can say that Celsius also the Fahrenheit, okay? So temperature is this fahrenheit. And do one thing at the weather clouds. So this one we can add. So this one is another field after this inside this list. So we will add these weather and this means so that we can see nowhere that type. So for doing this, or don't need to do, add a new size book. So new size box and height is going to be a concert and 2000 and apply these in here. What we can do, we can simply copy this text and we'll change it because we need assemblies. And so inside this list, we added the main directory. But right now we need to add these within directory because these mean in the cloud inside these, whether some copy it, remove this mean. And in here I need to learn the weather. And instead of damp hair, we need to use this main here because this main content is plugs, Okay? And in here I will need to add it. And as you can see this, this is already an extinct, so we don't need to convert it to a string. And we also don't need to add these di fare because you say is the message. So now hopefully we will do Seat model can't see it. What is the main reason? Okay, so let's see where we are getting the 0. We need to add the integer type of index. Okay? So as you can see, this one is also an inside an array, okay? See this one is area, but this area has only one that we must need to define the defend a position on this area. Okay, So after this, whether this content and position, so in anywhere, when you turn the position and position is going to be 0. Okay, Now if we run this, pulley will be able to see our output here. And in here we can see that clouds masses, Okay? This class messages. Okay? So we have successfully added all of these thing that we were wanting to add. So, and can we add any more data from this mean directory, temperature and pressure, random level. I don't think that we need to do anything. You can add as much data you want from this directory. Okay, So this is the basic concept of how can you build a weather application. Alright, so I think I saw their seat for this part. We'll continue with our next part. Thank you. 16. App Four- Create Project and App Bar Design: Hello guys, welcome back once again. So in this part, we're going to start a new project for jet complex query parsing. So in our previous section, we have done if complete application and we get data from server and we set it to our list few horizontal and particle. So that was quite easy. Now in this part, we will move to learn complex JSON query. So as you can see that as we were working on this JSON placeholder way. And they provide the free JSON API. See, so in our previous part we completed, we want to, with this API, this is quite easy, just the area of list and this list, this list. But in this part, I would like to move for some difficult, like this user part. Okay? So if you go to this user directory and anywhere you see this, this is actually the complex queries. So see this one is similar and the easy way. So the difficult part is in here you'll see the ID number, name, the username, and those are easy way. But when inside this, inside this list, there is another object that is the, another area and insert here you can see the another is tilled soil city zip code. And then you will see another geolocation, then another ray, that means whole array in a, in a area, okay? Or you can say, Okay, so this one is position 1, position 0, then this one is position 1. Okay? So how can we get this, all of this data from these types of complex query. So for doing this, first of all, we need to create a new project. As you can see, I have created a empty project. Okay? This is an empty project, but I will not work with is auto-generate coded. So what you need to do, you just need to create a new flutter project. Okay? So I will remove all of this genetic code. Then I will import, I will import this material duct. Okay? So now, first of all, I need to add a white mane. And in here I need to add this schon F. And this F has news new material. Okay, actually, we will not work this ON new, not new material left. We will create hair and under stateful widget is template widget. So state-led widget and we can set this my and this run f will be this my F. Okay? Alright, so we are done. And inside this my f inherit, we will connect our scaffold widget and add our scaffold it. Inside this scaffold budget, we need to add. So first of all, we need to create another file so that we can work on this file. Okay, so I will create a new file, and this one is going to be home base, homepage and click Okay. So Festival in her we need to import our material. So import material that and then we need to add here is check for logit and four. For this file, we can choose the class name. You can choose any class name you want. So now home and anywhere we need to add, we need to import this home actually. So this own pesto dot, okay, now we need to connect this Home layout inside this, inside this my F. And anywhere. We don't need to use the eschatology because we will add couple legit in this home fall and in the sample will be our main, main file, then all of these things. And in this file we would do the functionality. So remote, this is scuffle legit in here. We need to add. Our material does. So this material left and inside this metadata f, we need to connect our home keyword, that is our platinum that Miss. Okay, and this whole class, okay. So let me, let me add up bugs. So add acetonitrile, the scuffle legit, so eschatology. And inside of the scaffold budget, we need to add up, but okay, so AB bar is going to be new. A bar and bar has tackled, adult is doing to renew text. And in here we can see or we can say, we can say and JSON parser, complex JSON parsing. Alright? And we need to choose a background color. And color is going to be these colors, dark, indigo color. Okay, we are ready to go. So let me explain it again. So I created a separate home pesto dot find in here. We will do all on this, our application design part, that will be our main file when our application is running. And inside this main file, I created a and under state-led widget. And in here I connected this whole class that we want to run an insert this Min of white men. This is the main file, main function that call when we run a flat replication. So incentives on F, we need to use new Maya. That means we want to run, this might have an incidence my f. We connected this home keyword with this class. That means, and this one will connect this one and this one connected this one. That means we use this homepage. So this is the basic concept, may be already know this is not a big deal. Now if I hit the send button, hopefully we'll be able to see our output. And now here we go. Now we can see our of our complex JSON parsing our bar. So let me do one thing. Inside this emperor, we can add some icon button just for designers, actions, which it, and in here I can add new icon buttons so I can model. And it'll give us two parameter. One is icon and another one is on pressed. All right, so for icon, when he purchased it and I can say new, icon, icon has a property called icons and dark. You can say sars. And for this unimpressed, I would like to say that. So let me explain it. Why does this on-premise one, this on-premise work when user will click the Search button. And in that time, and in the time, if you want to take any action, then we need to then this unpleasant column. It's like the click functionality, okay? Non-linear. So right now we don't need to do anything, just I want to show a debug print messages in the console so that we can understand that this button is working. Okay, and we can just search. Right now, add a comma and add another icon button. I can say new icon button. And this icon will give two parameters. One is icon and honest, another on-premise. So icon is going to be new icon. And icon is going to be these icons, icons dot title. And this one is going to be, I can say this debug print, right? And we can say title. All right, so if I run this through the hot reload, we can see these two. I can now, now I am clicking, I'm clicking in those two buttons. Now if I open my opened my console, then we will see these messages are held. So sars and titles, Rs and the pace it working. So our first often is done. Now it's time to connect our API. And some of the things. I think that's enough for this part, we can continue with from a one next one. 17. Get Complex Json Data: Hello guys, welcome back once again. So in this part, we are going to start connecting our API. Then we will add some functionality. And in, in our previous part, we completed the basic of life layers are like the create project. They structured the project and added some Empire and icon. Okay, so now go back to this placeholder offset. So let me tell you one thing. Maybe you already know this. So we need to add these packages in our Bobby spent YML file. Okay? This packet is repaired if you want to get data from server. Okay? This is, and this one will give us to decode our JSON data. Okay, so we need to import it. So here you can see the dependencies who go to these. These are pumped up data and searches GDP and then copy this one. And now open your power respect to the YML file. And in here, this cappuccino icon even been done up to this icon. You need to add this one. Now go back to this homepage. Select tools, latter, and flooded back as good. It's a very easy process. And we also need to import this discipline and the top of our file. So copy this one. Now we can see, now we can see the exit code is 0. That means it will work now, okay, So in this whole test or dark, we also need to add this 14. And in here I need to add here. Okay, So we are done an NER, we need to add, actually we need to add another. When you turn a variable for this STDEV, we can say as a CTP and using this variable, we wouldn't get data from the server. Then we will decode it through digestion. Okay, now we need to add couple of couple of flagging. So we need to add these things, these asynchronous process we will need, and we also need to add the dark dot converter. The converter there is all about. Okay. So now, so this is our yesterday's class and update. After this class, we need to add a future. So as I mentioned in our, in our, in my previous, in, in our previous section, that fishery is required when we need to get data from the server. And that is a function or we can set a property that is provided by flutter. So future and anywhere on it to add the least, because we will add, you'll get this data as a list of that. Now in here, we need to add a method name. We can say Get Data. And as I said that whenever we need to get data from server, it, it is an asynchronous process. So that's why this method should be asynchronous process nurse, I wanted to write this asynchronous cured. So how we are getting these asynchronous map, we are getting this as incurred and just because of we imported this darker dressing. So remember that you need to import it kept. Now in here, we need to add a variable. We can save our API, okay, um, our API and now go to this place holder hair anywhere that I said that we will work to the this with the user. User. Net is a complex that has complex query, okay, cities complex, but we will get all of this data one by one. There is nothing to be worried, okay, and paste it here. Right. Now we need to create another variable so we can set up our data, is going to be wanting to use these await keyword, then our HTTP GET and these URLS prepared for this API URL. So where we're getting this SDP, as I said earlier in here, I created a variable for this STDP packets as SDP and shortages GDP, we need to get our API. There is our disappear and now our API, all that are stored inside this data variable. Now we need to convert this to Jason. Okay, So how can you convert it? So for converting it, first of all, I need to create a JSON variable, not just one variable like a variable. We can say JSON data. Okay, so now we need to add this JSON keyword suggestion to QC and decoded. Okay, so just under the code and in yellow nutrient source and our sources in this data. So this letter dot body. All right, so as you can see, we identified this var keyword, then JSON data, and then Jason, we need to decode this data actually. So there's 50 decode. We need to use this JSON row decoder. Then only to use our data, we want to decode, we want to decode this data. And then now we need to return this JSON data. We can say return just under C, we are all done. So we can see this return JSON data. All right, so this, this colon is the main functionality to get data from this API, okay? As I said in my previous section, that in our previous section, we were we were getting into in defense like we created the monadic classes and then show the constructor we are getting this data. But in this part, I will show you another way how to get data from surveys so that you can learn the whole JSON data. How can we get complex data, okay, So this is the main purpose. So you need to learn isn't every fact. So, no, so our data is stored inside this and get all data method. But as I said that we will design our layout in this homepage. That means all of these data that are available in the ghetto method, we need to get this data in this homepage. Then how can we do this? So for doing this, we can get it through the constructor. So first of all, in this homepage, I will click, I need to add a list, okay? Because we are good, we will get all of the data in a list. So you can say at least of now, I will create the constructor of this whole class. So I can say home and an inherent rightness in this list off. Okay, so this dot. Let's talk. So what I did here, I created a constructor with just created a variable of this list. Then I am passing this data to this constructor on this Home class and this totally stop now and go back to this main, main No.5 on right. Now in here, you can see in here we need a constructor, okay? So first of all, in here, we need to add, we need to add another list variable can say list and list. And then we need to create a constructor of this, of this my F. And then we need to pass it. And you can say my arm, my hand is going to release stored list, at least, at least. Alright. Okay, so as now, we need to, now we need to connect this, no need to add this list of inside this home. Okay? And the reason is that in hair, in this whole class we created a constructor for this home and we are passing the list. So we need to add this list of, in this list. Now we are creating a list and we are also creating a construct. Rob is my f, this Maya classes connected in this Maya. So in here we also need to add an underlay. So for doing this in her sister, all of this data. So as I said that this white men, this is the main function of this application. So when we hit the Run button, when you open the application, the first time in this method called, okay, so for this, we need to add this asynchronous course. We need to show our we need to get our data from our application will open. And anywhere we need to add another list of variables. So you can see list and I can say List of an inside this list, we need to store our data. We can say it and get all data. And this is our data. Okay, so now our, all of this data that we were storing inside this ghetto method, now these data are stored inside this list. Ok, Now we need to pass this list. So this myself constructor, okay, so now our, all the functionality are done. So we have successfully all of this Record Functionality. Okay, Now see, isn't every part are connected with each other. So let me explain it one more time. So as I said earlier, all of the data are stored inside this method. There is a future method and delete stuff. Okay? So this is our main file. That means when we will run this application, this final exam, and we will design all of our layout in this for the admins, all of the data that we were storing inside this main dot dot, we need to get this data in this file. So for doing this, we need to pass this. So anywhere I did, I created a, I created a list and passing the list to this constructor of this whole class. Now back to her. And inside this my f plus there is a Estella legit in her inside this material lab. I added this home plus. So in here, we need to construct a list of data as we're passing here a list. Okay, so that's why I created another list here and created another constructor on this, my F. And then I added this list here. And as I created and under my constructor, and this might have is connected with this run-up. Okay, So anyhow, we also need to add our list of, as I said, as I mentioned earlier, that this man will run fast time on the application will open and in the time, and in that time, we need to add these things. So, so we are storing all of this data that we were getting from this ghetto data and all of these that are stored in this list of data. And we need to pass the list of inside this list of myself constructor. Okay? So that is the basic things of our just some functionality, okay? And in this and now we can easily access all of this data from here. So I think that is enough for this part. We can continue with our next part. Thank you. 18. Retrieve All Complex Data: Hello guys, welcome back once again. So in our previous part, we completed the basic functionality for getting data from API. Okay, so now in this part, we will design our layout and then we will start retrieving data from the API. Okay, So as I mentioned earlier, we will work, we will do our UI design in this home pace. So now let's get started. So here you can see the app bar and after this AB bar. So I think I can comment on the chair. You can say a bird. Okay. So after December, I need to add a body texts and I would like to add a list view so that we can do is called Children is going to be, we judge. Okay. So children is going to be widget. And to now what we can do, insert these children of which it, we need to add a container. So new container and add marching margin will be, you can say as in set all 10. And I would like to add a card few. So child is going to be no, Not card view. So first of all, we need to add or at least two dot builder. So this is the list food. So why we need to use this list foo dot buildup. So this is the process of getting data and showing data in a list. So they're saying we need to use this list q-dot builder, mainly this list q-dot Bueller required two main parameter. One is item count. That means how many data and whose data and how many length we want to show in this list queue. Then they need a list for buildup. So for item count, we need the whole list of data. Okay? So as we are passing this data through these Staedtler, which it and is my f clouds and these distinct, we need to use her foster only to use this widget keyword. Okay, then we need to use our list of that is our least Daenerys petal length. That means we need the whole land that we are getting from this API. Okay? So we need the whole length of data. That means we need the whole land. So 0s and every data is in every list we need, okay? So for ease and every item that means this is x, Let's say this one is an array. So for this position, so for this position, for this position you can say so for Nissan actually. So for this position has lot of data, like phone with a company name parser and many more data. So we will, for ease and every position, we will return all of this data. Okay, Then I will send it to our list too. So how can we do this thing? So for doing this, go back to this year. So, and as I said, this list put on builder need to main parameter. One is item count and another one is item Bueller. So let get started to item buildup. So item builder. And in here, the first prime, this item will also contain two parameter. One is build contexts and another one is container, so that Bill context. So we'll context C, can Econet any name, whatever you want. And the second parameter is going to be our position of our data. Okay? That means this area have any position is 0 and this one is one. Okay, So this position number so that we can get the whole data for each and every physician of this area. And now anyhow, we need to add the curly braces. Okay, so now in here, what do we do? So anyhow, we need to return our country or continent, whatever you want to show. So I would like to add a carpool because I always like to show data inside a cartoon. So certain card field and any semicolon here. And inside this card few first unit 2 and the elevation, we can see the version 10. Then we need to add a child. Child isn't going to be new. So, so let me do one thing. First of all, we will add this ID. Okay, so this idea has a position 1, 2, and t. So I will add the ID and then the name, user name, email and j's and many more thing actually. So I think it'll be better if I select your show here, because we will show this ID and this name in a row, then rest of the data will show in a column. So it better if we can choose a row here, okay, so 200 here. And inside this show, we need to add first container, not actually fast container. We can say we can detect layer the circular avatar for this ideas for add new circular avatar. And circular avatar has a K and the circular avatar. And we need to add a child, and I can say new. Actually we need to use the app child, child is going to be text. And anywhere we need to add our data, that means we need to add this keyword. Okay, So how can I do this? So first of all, as I said that we are working in another file and we're getting data for through these parameters. So there's so many to use this widget and then dot list of, then the position and the position is index. And second parameter is our. The standard admits who is filled. We want to add, we want to add this ID field, right? We want to add these ID. So we need to add it, and we need to add the first position on this ID. So that's why we need to add. We need to add 0 here though, it is done automatically fast position. Okay, Now if I said these application and if I run it a relative it, and we will see an error. So let me run it again. In here we can see, but we can't see any that I hear. Why we can't see any data here. See. So this is our list q-dot builder, which it integer. Okay, let me check it again. Let's q-dot builder content list purely spit of land integer index or widget list of index. So here we can see we are not getting this data and we are getting the error. And the reason is that what is the main reason actually? So we did to Mr. Care and the first mistake is we need to define the height of this container, okay? And so for doing this, I actually, we can define this height this way or I think we can define the height in this way. It will be good. So we need to use the media query, media query dot off context, dot size, dot height. Okay, that means it will take the whole data. Now if I run this, it still, we will see, we can see an error. And the reason is that this idea is the integer version. So we can show a integer value inside the text field. We need to convert it to a string. So just add dot-dot-dot testing. Now we are ready to go. Now if I do hard shell out, here we go. Here we can see our all of this data that we can see. Okay? In 1, 2, 3, 4, 5, 6, 7, 8, 9. So we have actually ten, that only is it true that we have only 10 data? 1, 2, 3, 4, 5, 6, 7, 8, 9. Yeah, there's still only 10 data. Okay, so still we have to do some design issue, okay, When you do this. So the first thing first and then we can do, we need to add a margin here. So at the margin, margin is going to be as inset or we can say 10. Now do hace lot. And we got the Munchen multiscale we need to have, okay, The thing is that and for this container, and I think we need to have some fading. Okay, so for adding a padding, we can, we add fitting into this container. Whereas instead all 10 5, 0 says it's reeducating, getting the padding outside of the state. So the thing is that the world can we do, we can add, we can wrap this Alcoa filter with a fairly bedding. And you can say as in said, Oh, no, If I do, now we will see the space and we can also do. So this is our first item of our row. And for second-order what we will do. And for second data, we will do, we will get this name and then we will get simultaneously these, all of these things. So for doing this, first of all, I would like to add header container, then we will import a column, okay? So new container, okay, then at child, child is going to be new column and column is going to kill the Norwegian. Why? I would like to add this column because we need all of this data simultaneously, 1234, okay, one by one, there, say I am using it column. So fast data is so new text. So new text, and you need to add this way. So WeChat dot list of the position of the index. And then our name of this field. And the field name is name. Okay? So now if I added here, then I will see this thing. Okay, now if I run this, here we go. Now we can see the name, okay? So I think it'll be better if I can add, I think I can add a font size thing. Firm size is going to be 17 CDO. Okay? So now says C, Now, which look good. So this is our Nim. So the thing is that I think we can do, we can cast it with a string variable. It might be good. Okay? So it can say your name, name is going to be this name. So we can cast here and I can see the name and it can add a spacer, little bit of space. Did not working into it. I think don't need to add the name. Okay. We don't need to add the name. We are done almost. Now. The thing is that anywhere I need to add a size box. So size box, you can say, hi, say 4, so that we can get a space. Now, I would like to copy this thing cause we need some things for Eastern every item. So this one and this one for the e-mail, right? We're getting that username. So now we can add that user name here, use a name. Now if I run this and now I can see the username. Okay, So how we are getting is an every field, we're getting each and every film simultaneously. Like first of all, the main heater link is our discipline, this widget list of the position of index and then the firstname. Then we added the second and the user name. Okay, then no, you let another one for our email so we can copy this one. And copy this email. And remember that you need to add the exactly the same is failing if you did any spelling mistake, it will not work. Okay, now save, now, see the email address we can see. Now. Now, now the next thing is very difficult. Actually is not very difficult. And this is the main reason why I am showing you, I am working on this API. See this for was the similar things, the ID name and see if we can get this one by one. But for address inside this address and this address is a and under edit it inside this address we have and under four item for data say. So how can we get this? So if you want to get this stage Sumerian city, there is nothing special. We can simply copy it here. The only thing is that we need to add another special field. So this e-mail, first of all, these imine will be the, these edges. Okay, so we need to move step-by-step. So for this position, first of all, we need to go to this address. And this address is another array, and inside this address there is another field called state. Then we can copy this is TTL. Then we can inherit, we need to add another. Then I need to paste it in this step. Now if I save this, so see the index position then that this address, and inside we have the another field. Okay? So this field is in this field. Now if I see, now see these edges, we're getting these 0s and every state C and a steadies cooler light, okay, Now if we need the suite that how can I do this? I will copy this on. And I can say and paste it and change this one too sweet. And chance this onto sit. Now if I run this, see, you can see it right there. It's a very easy process, guys. You just need to follow step-by-step new, copy one more time. Then paste it here, and then copy the city. And for the Swedish becoming the city. And now if I run this, we can see the city name here and copy one more time for the zip code. So pasted here. And last 20s and zip code. So copy the code here and paste it here. Now do Savior and Harry go. Now we can see the zip code for ease and every item. Now, another problem is started now. Now the thing is that we have another area inside this address. They GO, so how can we get this lat and long? This is very easy process. We need to do something. So after this address, first of all, we need to add this NGO, that is another RNN. So up to this address, we need to add this GO. And after this, you will need to add the variable m, that is land and long. You'll just need to follow the established at this one, this on dispersion, dispersion and this position. There is nothing to worry. So now if I save, we will see the LED headdress. See, you can see now if we need these languages and then how can we do this? We can simply copy this one and paste it here. And after that, we need to use this length here, copy this link, and paste it here. So at JS, this is our main position after this and this address. And this is inside this area variable, then address up to this address. And then this length. Right? Now we can see this length. Care, care. So you get all of this data is very easy guys. I don't know why people are less worried about these types of JSON data. And now we need to add this phone number. So now look at this phone number is outside of this idea that it's the similar. So we can easily get this phone. And we've said, like We can do, we can simply copy this one. And now best hair. Now see, we don't need to use this. Get long Jiu and GEO. We don't have any more area because these this phone number is outside of this address, Eric. Okay. So we can simply copy this phone number because it is our main directory. That means after the index when he turned our phone. Now, if I set this here, you can see our phone number. Okay. See the phone number, the different phone number. Okay. And after this phone number, we have to add our website. So copy this text and one more time. And this time this one is going to be for this website. And for this website, we need to add this one deserves side. Now we can save it here. Now we can see the waves that addressee though we've selected as Hildegard.org G, Then anesthesia dotnet, Ramiro dot info and many more things. Ok. Now in here, there is another thing. Yeah, we can see another area that is company name and barcode, catchphrase and VS. So that means the same thing. This is another area. So how can we do this? We need to follow the same step. Okay, so I can copy it here. And this website will become this one actually in this company name. So this company Nim, suppose this is our main Eric and update this company array. Now we can access one by one, all of this data say we need now Don name. So you can copy this name and we can paste it here. Now if I run this, see now after this name we can separate these waves. And now I can see that I can see the name component and then we have another one. So I can copy this and shine it here and change the name to this one case first. Copy this one. And now says, okay, now the problem is that we are getting actually quite big name there. So sometimes we can see there is an alternative. We need to define the white of this team. So what can we do? Actually, we can define the white of this thing. Could say white is going to be 90 for this container there. Say if it works now see, it is working. It is not 90 actually. Think I can choose to 100. It'll be a good idea to a 100 is fine. To a 100 is fine. So we can see, and the thing is that in here, if you notice that for these, for these name is quite weak name. So it is taking two or three lines so we can break it. How can you break it? Will just inherit this and in her son inside this text and before them, the estar, our upper the style. We can enter maximum lines or you can say maximum lines 241. Now it will show only one line. See now only one line seeing this length. Okay, so now we can copy this one. So now we have the last letter, that is the, this BS. Okay? So companies can change then this VS. Now if I run this application, here we go, and we can see this BAS data that is harnessed. See CMBS hardness, real-time, market, harness, real-time. We are not getting the whole data because we are using the maximum LAN 1. Okay, so hopefully you enjoyed this lecture because in this lecture, who you are getting all of these complex data for ease and every array. Okay? All right, so now we can see the data are started in the center, so we need to add it in the start point. So as you are using the column, so in here, we can use this cross-sectional and meant and this cross-sectional and Mender start and see all of the data we started from the start point. Or if I use this in, then it will start from the right side. There is the inside c. So I think it's tough going on with them. Good. Okay. So you have learned in this part how can get all of this data for each and every, it doesn't matter. Must array how much error inside the area, inside area and insert the Eric. You can easily get all of this data. You just need to focus the sequence of the data, whose data you want to add. So address in the position than they are. Then these data, these data, these data, this data, and it's already setup. C is for firstName is a very simple level. We can get it very easily. And for their tests only to this address, then we need to move to the street. Okay. And then we need to move the solid. Okay. And for phone and combine them. This is similar. So I hope that you will enjoy this course. Thank you. I think that is enough for this part. We will continue with our next part. 19. Random Color for Avatar : Hello, hi, So welcome back once again. Faster poll. So let's do one thing. Change the background color of this, of this circle Avatar. Okay, on this sarcolemma data. So for doing this, we can add some custom random color that we did for our PFS, but we can say list of material, material color, okay? And I can say color is going to be, and this is known as the sun is at least an ER. We need to add all of the color that we wanted to at randomly. Or you can say indigo color, then colors and dark green color than color's brown. Then colors dark purple. Then colors. Deeper ends. Okay, I think this one will be good. You can add as much color as you want. And now we need to get another object after this, after this list. But this inside this curly brace before the return card. Okay, we need to use these material is metal color and you can say m color is equal to this color. What is the color? Color? Color. Color is going to lose color and inherit only to pass the index position. Then need to add the parse sentence and then the color dot length. Okay? All right. Okay, wait a minute. So we did a mistake here. We need to add this list of data inside this home is denote this one, okay? So in here, so that we can access it. Now we will exceed X is if c, Now that you're gone, G and they spilling a lot, not Len, L-E-N, G TAs length and this length, now this M color we need to use inside this circle and over two. So this is the circular avatar. And in here I wanted to use, we need to use the background color. So why we are getting the Europe circular Victorian going to be okay. So wait a minute. Why are, why we are getting this year, I don't know. So this was our code editor and y we can add distinct. Child is going to be a news article levator. What is the main reason? Well, okay, the reason is that we need to add this clone hand semicolon here. Now we can access BC. So this is our techs for our circular avatar and uptake debt. We need to use this background color. And this color is going to be in these m color. That is the, the standard colors that we generated. Okay? And after that, we need to use their foreground color so that foreground color means the color of this text. So we can use white color. So colors, colors dot, dot, white. Now let's do hot Schiller and harrowing go. We can see multiple colored them in random color, indigo color and green color, brown color, purple color, orange color. See all of these colors that we added inside our list of the color. Okay, So that is the interesting thing. So I think, so I think there's eight.