Flutter News Portal App-Firestore Backend(Android&ios App) | Yazdani Chowdhury | Skillshare

Playback Speed


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

Flutter News Portal App-Firestore Backend(Android&ios 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

39 Lessons (7h 37m)
    • 1. Introduction

      3:12
    • 2. CreateProject Part 1

      7:08
    • 3. Navigation Drawer Part 2

      15:08
    • 4. Connect With Firebase Part 3

      7:45
    • 5. Design LatestPost Part 4

      11:28
    • 6. LatestPost Part 5

      9:28
    • 7. Get Latest Post From Server Part 6

      17:34
    • 8. Complete LatestPost Part 7

      7:45
    • 9. LatestPost ShowDetails Data Part 8

      7:57
    • 10. LatestPost SetImage In DetailsPage Part 9

      9:16
    • 11. LatestPost Set AllContent In DetailsPage Part 10

      14:00
    • 12. Carousol Slider Part 11

      14:50
    • 13. Button design Part 12

      12:28
    • 14. Button design complete Part 13

      8:39
    • 15. Create View and Controller File Part 14

      10:25
    • 16. Internationa news TabController Part 15

      17:44
    • 17. LocalNews Tab Controller Part 16

      13:09
    • 18. Sports News Tab Controller Part 17

      7:16
    • 19. Politics News Tab Controller Part 18

      7:44
    • 20. Internationl news FirestoreFunction Part 19

      10:55
    • 21. RefreshIndicator and ExtraFeatures Part 20

      12:00
    • 22. Design All News UI Part 21

      16:41
    • 23. GetData from Server Part 22

      16:30
    • 24. GetInternationalNews Post Part 23

      17:37
    • 25. Int news PostDetails Part 24

      13:38
    • 26. Int news PostDetails Part 25

      19:17
    • 27. Int News Gallery Part 26

      22:35
    • 28. Sports news getallPost Part 27

      16:44
    • 29. Sports news UIDesign Part 28

      14:55
    • 30. Getall SportsNews Part 29

      8:36
    • 31. Sports news detailsPage Part 30

      11:47
    • 32. Sports news gallery Part 31

      14:36
    • 33. Local news getallPost Part 32

      14:33
    • 34. Local news postDetails Part 33

      12:52
    • 35. Local news gallery Part 34

      4:23
    • 36. Politics news getallPost Part 35

      8:33
    • 37. Politics news detailsPost Part 36

      5:50
    • 38. Politics news gallery Part 37

      5:47
    • 39. Complete navigationDrawer Part 38

      5:48
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

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.

128

Students

--

Projects

About This Class

3611c5b7

 

Welcome to this class. 

Here are the Some Lists That You Are Going To Learn in this class:

  • A complete news portal app using flutter

  • Firebase Firestore.
  • Flutter advanced material design

  • Flutter Different types of widgets

  • How to build a real-world android and ios apps using flutter

  • Flutter Different packages

  • Flutter Navigation Drawer

  • Flutter AppBar

  • Flutter Material Design

  • Flutter Card View

  • Flutter Widgets

  • Flutter Row and Column

  • Flutter ListView Builder

  • Flutter Refresh Indicator

  • Flutter Circular ProgressBar

  • 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

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 yes then HCO3 and I'll be your instructor in this course. I completed my graduation on software engineering. I have been doing programming for five years. In this course, you are going to learn how to develop a complete fully functional Android and iOS application is in flutter and Firebase, firestorm. As you can see, this application is here. This is the complete application that you are going to build by the end of this course in here, in this application, let me show you what you are going to build by the end of this course. So in our application we have first we have a lattice post Fisher where we will be able to see the lettuce post. And we can just call this data horizontally. And if I click any of these letters, post will be able to see 32s post in a new screening. And in here you can see the image or title and our content. And right after that we have a slider. So you will learn how to implement a slider. We will use different packages for using the slider, and it will automatically slide. And if, and though if you want, you can slide it this way and it dried up at that. We have four categories. One is called Denniston, use is post news, local news and politics things. Now if I click on international names, will be able to see our international news in here you can see this. In this data. We have a nice custom-designed, We have an EMS, our title contrary and a number of views and a few little spot on. We can. And to pull to refresh here. We have implemented this pull to refresh here. And if you refresh it, then you will be able to see the update data here. And now if I click this beauty tells, then you will be able to see that you just post right here. And if you want to delete any of these items from this UI, you can do this, just need to swap from right to left. Then you will be able to see this until adoption. Even though if you want to do that it, you can deduct the swipe it and it will do that from here. Right up at that we have a gallery dev and in surgical editor, we will be able to see images that is under this international news. And maybe you have noticed that we have a nice custom circular progress bar. Now we have another category that is called as portioning is under this is portraits category. We will be able to say indifferent post and we have similar type of design over here. We can also do the job petals. And if we want to, we can remove your Chair in here. We also have the gallery. So we have four types of categories in this application. And in here you can see these local news and the Gallery. And for the local news, we can also see the localness details. And we have our politics news as well. And in here you can see this politician in data, and you can see the different types of bottom color and design as well. So this is a complete application. Here we also have an evolutionary using these navigation, you can also navigate it to these different types of categories. I'm fairly sure that after completing this course, you'll be able to learn a lot of new information, a lot of new features that will help you to enhance your programming skills. Therefore, I would highly encourage you to enroll this course. See you in the course. Thank you. 2. CreateProject Part 1: Hello, my dear students, welcome to this course. In this part, we are going to start our project. So as you can see, this is the screenshot of our complete flat earnings total F. By the end of this course, you are going to build this company application. And this one will be our fast-paced evolution shared latest post and detailed space, international news, news gallery, news details and many more things are available in this application. So for that, first, we need to create our project. So go to the Android Studio and now we need to create a new project. So what are the File New flutter project? In here we can name of our flutter Project Nim. We can see sludge or news photo. Ub. Again, I'll hit the Next and Finish. Ok. It'll take few seconds to build this project and create a new project for create a new project for us and default that I need to explain something that inherits. You can see that this is dishonored by our mainstream. Like when he's there will open our application. They will be able to see this application in here. You can see the latest post and these latest posts in there, we'll be able to scroll horizontally and upper debt here you can see a carousel slide show. The slideshow will automatically scroll. Ok. So we will, we will build it in a replication. And there is a four baton here over here. And one is for international news, is post news, local news, politics news. Okay? So as you can see, this is our project and this is a empty project. Ok? Here you can see all of the auto-generate coach, okay, so first, I will remove all of this code and I will do all of these things from ferry crossed so that you can understand everything about who we are right in this code so that you can, so that you can understand everything so fast only to you import our Material dot, so import material tart. And anywhere we need to add our main. And in here we need to use run-up. And that is continuing widget Ev. And this one is going to be new material. Add. Ok. And there is a keyword called home keyword. So there is a queue and call home cured. And inside this long period, we need to define our fast className that, that will open the little come off when user will open our application. As of now, we don't have any other dat file, so we need to create a. So go to this glove folder and right-click and go to this Attach File and define a fine limp can say home. Okay, so this is our new home dot file in here. We also need to import our material dad. So important material, tart. And in here, we need to import our stateful widget. It's just collegiate and different class_name. So if you define the class name over here, it will automatically adjust in here and inherit. Okay? And remember that this Home classes going to append one user will click on replication. And now we need to add this class inside our main.out. So for that first we need to import our whom class so that now we can easily access our className new. So our app is not connected with our Main.jack file. And remember that you may be wondering that whose want you need to write. As you can see, the file name and the class time is same. Remember that always you will have to add the className. You can add filename, anything, whatever you want, but you must need to add here that class them. Okay, this is mandatory. Now application will work. Now if I run this, we will be able to see replication, but it will not give, it'll show us anything as we did not. We have not added anything too long. So first only to remove our container and we need to use our scaffold widget. So a scaffold Asia widget for those of you who don't know anything about the scaffold, scaffold Egypt widget that is forward vets that are inside this scaffold widget on it to write all of our core so that we can show it in our application. Scuffle. This scaffold widget continued a lot of new features itself. So that's why we need to use a scuffle legit. There are a couple of others. There are a couple of other users are out there, but we will discuss it later. So for this application, we need to use not for this application. Most of the time, you will have to work inside this scaffold widget. So you need to remember that. So according to our application API way that we're going to build, and by the end of this course, we have a, what do we have? We have apart. So we need to add this effort as well as we need to add this navigation Jarrett. Okay, so for that, first inside this scaffold widget, what we need to add fast when you take the ampere. So EPA is going to be the new EPA. And we remember that this Apercu or container ampere. And inside this upper. And here you can see our application, but right now we come sending because we don't have any data replication, okay? No problem. We will add our data very soon. So APA is going to be the upper and inside December. December contains a couple of parameter they don't need to use. So one is titled definitely that L is a text. So new text. And we can say here, what is our title text? Our title text is news portals, so we need to add her newspaper news program, okay? And we must need to add a background. Color is going to be the color. So color is going to be the remembered that when you will add a color code, you need to add this 0, then X, then double f, Maybe capital or small mobile work for you. And after that you need to paste the color code. So for this one, we need to get this color code. There is a color code software you can install it to to take the color. So if I drag this colour, it will show me these color codes. So for our F, but we need to use this colour and this net is discolored. So I can copy this thing and I can paste it here. And remember that when you we'll paste this hexa color code, you must need to remove this hash symbol from here. Again, now if I do hot shot, it might be, it might be work. So see, it is working. So we can see this thing is here right now. And so our app but has finished. So I can comment out each here. You can say int of amoeba, int of empire. Right? So I think that is enough for this part. I will come up with new video in the next part. So thank you. 3. Navigation Drawer Part 2: Hello my jelly students. Welcome back. Once again. Innovative as part we have completed our app and now in this part, we need to work with our we need to work our way to work with our navigation drip. So let me let me show you the navigation area. Okay, So this is our navigation realm that we are going to add in our application. Okay? So distribution Dreyer have a heater and we have couple of other options. Okay? So we need to add all of these things. Alright, so for that, after December, we can comment out each hair. We can say drag, drag, start. And you can say in the middle of things we need to insert wrapped. So remember that if you want to add an emotion, there is a keyword called chair that is contained a ger. And if we add this keyword and if we run it, we will be able to citizen evolutionary icon here. And it only for arson. And it'll give us an empty list as we don't have any other options here. So we can't see anything here when you add a one here. So first one is to add a child charges going through the New dispute and children of which it now the question is that maybe you are wondering who I am adding list view over here because when we at least few eat a gif other Chilean of widget. So inside distributable widget, whatever you add will be Apple to ScrollView. Let's say you have at least ten or 20 revolutionary item. In that case, you might need to have scroll, okay, you can't see too into your 3D data in a single page in your display. So we need to scale it. So when you will select the least fuel than it'll automatically do, a scroll is it'll automatically school options for you, okay, so it is always safe to use this ListView, okay? And inside this list view, we need to use our, so now what we need to work first, this one, okay, so need to work for new user account right here, ok. This one lucky for us. This one will give us a default background color, cities default background color, and we need to add a texture. So for echo name, we can send that to new takes. Text is going to be the new Spotify. As we can see, this takes this over here. We can send news portal f. Okay, now, if I run it, we might see this news proleptic, but we can remove this text. But it'll give us an error because these two parameters mandatory for this navigator icon, for this user, I can do a header as though we don't need any email to show here and we can leave it empty. We're going leave it now. And now the thing is that in our app, we can see these navigation re-heater color is different than what we are getting care. So we need to chance it. So if we want to chance it, we need to learn to use, we need to use a property. Gold decoration and decoration contains a box decoration. So new box decoration. And inside this box secretion, there is a attribute called color and discover contain this color kilowatts suny to use x double f. Now, we need to take the color code. Okay? So we can open our, I think it's the same color that we have fettered in our EPA. We can simply use it here. K. Now if I run it, now we can see the same color is over here. And after this, and after this we can see we have different color over here. So how can we add it? So if you want to add different color, different wetland color in here, then we must need to add and other things. So we need to, what we need to do, we need to attribute, we need to wrap this list with a container, okay, so you can edit before do aiding the ListView or if you already edit this list view over here. You can also wrap it using this. So if you want to wrap this list few with a and under h0 vote, then you need to just click in the middle of ListView on the order or ListView. And in the left side you will be able to see a above and go to the strap with new widget. And in here you need to use the container QL. So container, okay, and now select the color. Color is going to be the color and add double F. And you need to add this color co-chair. And now take the color code share. Now if I add these color codes from here, it might be work. Now if I run it. Now we can see this color code, okay? Now we can see this color, and this is the same color. Now it's time to add all of these stakes, okay? So for that new insula contra hitter, and after that, there is a another attribute called new list-style, called list and not newstand, LR and eat. It will give us two parameter. One is called title that Lee is going to be a text. And what it takes to Econet, We can add it here, international news. International news. And it has to organize this thing. We need to change the font size so it's done. It's going to elliptic system, change the font size so we can select 20200 and SLS only to change the color of this funders. So color is going to be the colors. So collage dot. So colors to 25-page, shun it. We might see this on ok. But in our UI design we have an icon over here, so we need to add this icon as well so forth that these ListView has another attribute called leading and actually are typically eat content two thing one is leading and one is one is trailing. So let me show first leading what it works. So leading is going to be the new icon. Icon is going to be the icons. To consent that we can add some. We can say, we can have some random, I can actually change the color. Color is going to be the colors, colors, white and change the size and the size, say 20. Okay, so I don't know what is the name of this icon actually. So there's why I am adding some other immerse icon. So when you will work in your professional project, you might need to use the semicolon. Okay? So now we can see this international news and this icon here. Okay, I think we can change this icon to see the news. Ok, I think it'll work. Now is not falling for that. So it is working perfectly now if I run it, we'll be able to see our nice photo. And if I click and if I click outside, then our navigation worried collapsing. Ok. But if I click on, on the international news, it is not closing. So each should be closing rate. It should be closed when suddenly clique. So for that, there isn't property or attribute call on deaf, so on tariff. And inside this onto f, we will have to add this navigator dot of, I'm sorry, navigator dot of literal context dot. Oh, okay. Now if I run it, if a clicky chair, then you can see it is causing sea is collapsing. So our navigation Dreyer is working perfectly. But we have some other options as we need to add all of this thing. So this one is for our first one. Now we need to add for Westport. So new list-style daddy sprayed with title and it is going to the new text. And this one is for what? This I is for sports news. So S is pushed news. Now. Sorry, before that we need to add the Estelle. Here. We need to change the font color and text. So I started to read the text and the font size is going to be that 20 and color is going to better. Colors. White. Again. Now we need to add up all leading here. So it is going to be the new icon. Icon is going to read icons, swipe on starch. We can add it here, and color is going to win a colored white and size is going to be done at 20. Now if I run, it will say, yes, it is working here. Instead of phase, we can add some other team. I can have this one case, so white color. Now we have two more to add. So new list-style. Dhaka is going to be the new text. So tattle is going to be the new text. And anywhere we need to add our local news. So LOC, local news. And inherit we need to use or style. Style is going to be the text style. Texas style font size is 25 sudo, and color is going to be there. Colors dot. Right. Now it's time to add our leading care. So leading 0s claimed to be the new icon. Icon is claimed to be the icons and taught, say MS. icon and change the color and color is going to be the colors. Colors dot white. And as always, we need to change the size is going to add 20. Alright? Now we need to add the last one. That is our, that is our poll. It digs news. Okay. So new lifestyle. That debt is going to the new text so that he is going to a new tastes and textures, politics, news, and inherit. We also need to change. Our Estelle is going to be texting style and font size is going to be 2, and color is going to be the color start, right? Okay, now it's time to add the leading over here. Leading is going to be the new icon. Icon is going to be the icons in at least one. But before that, we need to change our color. Some color is going to win the color's white and change the size is going to be that 20. Run it. Okay, so each seems everything is done according to our requirement again. So we have done it. See, it is almost similar. Cities, almost same. Not all, most of them, it is a 100% seemed just image is different. Okay, so News put OF news portal OF international news is forced news, local news and politics things. Okay, so in our next part, who we are at will connect to a replication with fire vegetables so that we can instead of working in our home part. Okay, so so let me explain it again, once more time so that you can understand clearly what we have done for our navigation re-heater. So first of all, if you want to. So before, before we dive in, let me till wanting that. It is always important to use a common out here so that you can understand that very surely studying point and where is your ending point, okay? So this is mandatory to it. So you can use this way. And okay, so first of all, we need to use a drug. This drug would contain a dread. And incidently, this Andrea, I have added a container, and the container contains the whole data, whole, this whole part, okay? Not this one, and this whole part. Okay. And we are, we have we have added a content over here just because I had to add a background color there. So I had to add these color inside this navigation drip. And after that, we need to use our ListView and list who continued children and children up widget. And then we need to add either a contrary hit. And this is the building function that is provided by flutter. If we add this user a contour here, it'll give us an acronym or an email and we can decorate our taste and upper debt for each and every item we have a list for each and every item, we have a list title these alleles tail contain each and if free navigation item. Ok, so just we have simply added to our title, and then we have just started our title. Then we added these leading and the all of these things. But I have done a mistake over here. Let me run it again. Okay, so if I click this international news, he didn't call up somebody effect click is post news and local is it'll not trickle off so forth dead. And there is only stat, I have added this thing only for international news and for all of other news. I didn't add it share. So for that we need to use it here on tariff. And is going to the navigator. There is a book of contexts and taught BOP. Ok, now, for this one, I'm sorry, I'm deaf. And you say it's going to be the navigator dot of milk contexts that off. Now it'll, it'll call us for local inaccessible and last twenties for our political news. So on dev is going here. And in here we can say that navigator dot of context dot Bob. Okay? All right, now to hotter a lot too, if everything we find it will work properly. News portal, local news and the political needs. So areas of working perfectly again. Hey, so I think it is enough for dispatch will continue it from our next, but thank you. 4. Connect With Firebase Part 3: Hello my daddy students. So welcome back once again. In our previous part, we have completed our navigation Cherokee and AB bar as well. So now it's time to add our application with Firebase database. So for that first unit to login with your Gmail account in firebase dot google.com. Okay. Once you lock in with your Gmail account, then you will see the space. Now at the top of this right corner you can see CO2 console. Now we will have to click over here. And then we will redirect to the next place where we will have to create our project. It will take a time. It is, I think it is dependent on the internet connection. Okay, so again here you can see this ad project. So once you are here, you will have to click on in here at project. So click here and into your project name, you can add any name, whatever you want to have your project name, or we can say that news photo, news portal. Okay, and so now we need to continue. And here is some rules that revolution Google Analytic project recommend. Okay, I think we don't need to have this one right now because we don't need to use external library for this project. But if you want, you can enable this and then you can continue it. Then we need to click here and create project. It. It will take couple of seconds to complete this creating your project functionality here, so it is moving. I don't know why it is taking Tomas time. It should be done. Ok. It is finishing off and few more seconds it needs. Okay, alright, so now we can see these, your new project is ready and now we need to click in this Continue button. So once you will click Continue button, you will, you will share in here you can see this, this one is for iOS and Android and with a sweat. So as we're walking for the we are working in Android Studio and we're working for Android. So we can use only does Android, but the same database you can also access from your iOS. Ok. So click on Android and in here we need to add our Android Pakistan M. Okay, so for that, we need to go to our project and we need to find out its fiery server ID name. Okay, so when OK, so inside this Android and go to these Ev and inside this app directory, you'll see this one. And our ID name is, we will find out our ID name is here. Here you can see this dictionary. So go to this Android f and then build-up Gradle file. And over here you will be able to see application ID. And this application ID is this one. So copy this one and go to here and paste it. And application nickname. We can say that news or we can leave it blank. No problem. Here's deliberate mandatory news photo and this one is also optional. So we don't want to do this now we need to click here in register app button. Now the important thing is that we need to download this Google service, Jason, and we need to paste it inside this app directory in here you may see the screenshot, ok, so now download this one. K upper. Dare to need to click Next. And here is a lot of new things to do. Kay, so fast, go to this folder and copy the Service JSON on card, this one. And in here inside this app. So click on the app directory, get here. K. So now our Google salvage Asana is inside our project. And in here you will see this Client ID, API key and many other things. Ok. We don't need to change anything here. We can close the chip. Okay, so now here is something that we need to do. So NER, you can see this Android Firebase SDK. There's a lot of new things to do. New things when we're using Java, we also have to add all of these things. So this thing is important to add. This one is class spots. So copy this class path. And for that we need to use it here outside of this f. So C are sort of this afternoon, you will see another bugle gripped build.gradle. Anywhere inside this dependency you will see one class, but just after that, we need to paste it here. Okay, so this one is Google service class, but now we are done with this pile. We can remove it. And after that, we don't need to add this one. And we need to use this, apply Plug-in Google savages or even but that here, here you will be able to see the direction add to the bottom of the file will have to go to the app level build-up Gradle AP level means inside this app directory and this impugn Danone girl, dishonest in this one. So at the end of this file, that means in here and the end of this file, we will have to paste in this one. So copy this one or Google service JSON. And then bested, remember that without discipline you replication will not work. So make sure that you have edited. And now we need to click here next and continue to console. Now we are ready to go here. So now we are in our console nonlinear at the left side, you will see authentication database is stereos hosting function on MLK and many other things. So foster go to this database. And in Firebase, they have two types of database. One is Firebase real-time database, and another one is Firebase, Cloud fires store. So for displeasure project, we will use flooded. We will use cloud firestorm and this one is this. And if you want to use realtime database, then you will have to go and go through this option. Okay? So as we will work with cloud fires stores, so we will choose this create database options. So click here and lock mode. You can say this L0 rich, right? False, and we can now start it in a test mode, okay, no problem for that, as we are not uploading it to in the Google Play Store or we are not adding any authentic system. So we can use this test mode. But when you will build Jello or EFT, You must need to choose this locked mode, okay, so choose this one and done. So we took, take couple of more seconds to complete this thing, to create our database. Okay. So swiping our project is head turn but foot that. Lets run it if it is a work color C. So showing this, oh, okay, our application is working perfectly. We don't have any problem. No. Yeah, we're done here. So this one is our realtime database and in here we will have to write our collection, okay, so we don't need to add it here. And our next part maybe we will add our we will add our database and database name and all of the field, all of the collection on all of the documents. Okay. So we have successfully added shower of our Firebase Off shown in our application. I think that is enough for this part. We will continue with our next part. Thank you. 5. Design LatestPost Part 4: Hello my day students and welcome back once again. So in this part, we need to add our fire a store with our application. Okay? So in our previous part, we have set out to all of the required functionality to work with Firebase faster. And now we need to use a package so that we can get that data and abet the data from our cloud file storage. So you need to go to this. You will have to go to this pub dot deaf website. Then you will have to search this cloud fires two. Okay? And then inside the, and then under these installing tariff, you can see this dependency. So we need to copy this dependency and go to this spirited woman folder. And apart this cappuccino icon inside this, under this dependency, we need to add it here. Now go back to this, your home and tools flatter and flatter Becker sketch. If everything is okay, then it will give us an exit code 0. That means we don't have any U-Dub. Now if we run this, we'll see our app is working here. So this is our functionality. So before more for the next phase, we need to add here. We need to add here. Okay, so we need to import this thing here. So now in your Dart code you can use when it import this one. So import, import here and import. Okay, so now in this part, we will try to add this option. So this fast buddies latest, latest post feature. Okay? So in here you can see this. We have a background color and for each and every item we have another background color. So we need to work on it. Alright, so for that, first, let just the background color of our whole application and then add one by one. Okay, so inside this home, this one is Dreyer. And after this, we need to use our bodies. And inside this body we will add all of these things. So we need to get body. Body is going to be new. We can add ListView and list who has a children of which it cause any year will have lot of data so that the user can install it there. So I am ending here, ListView. And before that I think we need to use or background color. Okay, so before that we can use our background color. Background color is going to be the color acts and apple F. And for the background color, we need to take health of our color Gov. And the background color is this one. Okay, so this one is the background color of replication. So we need to copy this color Katya, and pasted here and make sure that you have removed these hash from this HEXACO. Otherwise it will not work. Not too hot reload. Now we can see our colorCode has changed. Ok, so now in our application, if we look carefully, we will see that this whole application is, in, this whole piece is divided into cheek container. So this one is fast container. This one is second container and dishonest start container. In our fast continent, we will add our latest post Fisher and all of the data will come from fires, fires, Turkey. And the second container contains, and the second container containing these ScrollView, notice Xcode you this carousel slider we can say. And the third one is for button. Alright? Okay, so now we need to work with our first list item. So before that, hey, so before that we need to use our firestorm, okay? We need to add the functionality of firestorms so fast. We need to import a couple of, couple of things for us, for thyristor. So we need to use some data sync when to use the pork fat, I'm sorry. We need to use import. Lucky we have addEdge thyristor, so we just need to add this standardizing, all right, n inside, inside this class. So inside this class we need to use our esteemed subscription. So it's himself solution. Make sure that you have added this dark depressing if you don't get it, you tomorrow work. So esteem subscription is going to be query snapshot. So it's Jim, subscription is going through the coil snapshot and we can say that subscription knowledge. Now we need to use our list to take a list. And inside this incident list we will take all of the documents. Snapshot list is going to the dopamine snapshot and as our going to be the snapshot. Okay, so now in here we need to define our collection reference. So Collection reference is going to be the collision reference is cultural, firestorm dot instance dot collection. And in here we need to add a one database name. We can say latest posts. This one will be our database database name for our dispatch for let us suppose two. Okay, so in here we will have to write down, okay? So this one is for let us post and after that. So this is the line of code is quote is needed to work with blood virus to soil phosphorus is Tim subscription query snapshot. The subscription will help us to query our data and get and get the data from the cloud firestorm and lease document. And inside this list, we have alleged documents, snapshot, and each and every item that we will get from our data will be stored in a list so that we can show it in our UI and this collection reference, and using this collision reference, we are creating a collections. So in here, in files store each and every collection means it relative length, you'd have history. We can see the diversity of 11, okay? So now we need to share in it instead. Okay, so inside this init state, we need to use our subscription. Subscription is going to be the collection reference. Dot, snaps, shores, dot, listen. And in here we can say the does not. And added curly braces here and add a semicolon here. So in here we need to add our set field steady-state. And inside the steady-state, we need to use our snapshot is going to be able to just not show up. So on. So our inducing data snapshot. So this little snapshot is going to be our snapshot dot. Okay, not the snapshot we need to use Edit this way. So snapshot is a cultural nearest snapshot documents. Okay, so this one will help us to get, to take all of the documents from our collection. And we're we are storing all of the all of the documents now inside this snapshot, and this is our list. So all of the data that we collect that we will get from this collections Italy store in this list item, in the list item name is snapshot. Okay, so let me explain it again. What we have done it here. We need to use this insidious disease. So the immediacy, the built-in function that is provided by flutter, okay? And inside this we need to use our subscription. And then when you do use or collision, afraid of snapshot or listen and you can add, you can add any name, whatever you want. It, it likes kinda of a variable. And this variable will contain all of the data from this subscript show and this collection reference. Then we are seeing here there's all of the data that we're getting from the server. We're storing it inside the snapshot. So this snapshot is a call to little snapshot document, okay, now all of the data are stored inside the snapshot. And now go back here. And now inside the list view, we need to use our, now we know it's time to divide our dividable whole layout into container. Like flavours is so fast container second Korea, second third content. Okay? This one is going to be fast container. We can say first container. Start. And fast container ain't. Okay. So now we need to define our container. So new container. Okay, at a, at a comma. And faster we need to define our height of these containers. We can say, hey, a 190. So this container will contain these whole things, including this latest post, okay? So this one height is going to be a 190. And now on definite child and child is going to be column. Now you might be wondering why I am adding here column because there is only stat inside of one container, we have two data items. First one is let us post and second on is this whole data, okay, we may add it here, least Googlebot As we don't need to have any scroll view here. So column will be the best choice for this continent. So that's why I have added column here. So now fast one is going to be the new text. So new text is going to be, again, say that latest post PUT must need to change the font size and the color. Estelle is going to be text this time. And font size, you can say 18. And choose the color, color is going to be the color start. White. Now run it. And we can see this lattice posed is here. Okay, so we might need to add, we might need to add some space. And before that, inside this column, we need to use this gross excess alignment grows. They sit there and Mender instead so that our text Kenny, start from the left side, from the point of them, from the beginning of this thing. And I think we can add bidding here, or we can simply grab this text with a padding. So at bedding eight, Let's see if it is work. Yes, now it is perfect. Okay, so our first item is done. So we can see that if you space between these 22 item inside this container, so let us suppose n is, and this one contains a fewest bits. So we can add a space using these new sized box. The new sized box height is going to be, we can say, five times 0. Alright, so we have successfully added our logistics and I think that is enough for this part. We will continue with our next part. Thank you. 6. LatestPost Part 5: Welcome back once again. So now in this part, we're going to add our this horizontal list item and we'll connect our this field with fire vegetables and we'll get data from fire visitor base. Okay, so as you can see that in this item and eighties inside a container and it contains an image, one title, and description and these few icon. Okay, so invert prefers part. We was here. The size box fading. And if I open this application, we'll see we have done this latest posts now. It's time to add this one. Ok, so for that, first we need to add a container. Over here. We can say new container. Okay? And now we need to define the height of our container. We can say height a 190. We can change, let it no problem. Just need to define the margin. Margin is going to be that as instead all we can say that it 0. Alright? Now in here, we need to define our child. And before that, we need to define our color as well. So color is going to be the color. And 0, X double f. Now we need to copy this color code here. So if you look at here carefully, then you will see that this color is a different than this background color. So we need to grab this color goods. So for that, I will use this color cove. So no need to copy this color. And just pasted here and make sure that this hash symbol, so height is a 190, okay? And now anywhere we need to define our child and John is going to be a least q-dot buildup. So ListView. So these lists q-dot builder. And now, so we need to use these list few dot builder. And it will take two parameter. One is item builder. And before that, let me show you one thing that previously we have added our all of the required functionality for firestorm is chimp subscription list to commend ten, all indistinct. Okay, so now we will have to use the snapshot as the snap should contain the whole data network you'll get from your solver. Okay, So for that, so come back again here. So this leads to determine their content to parameter. One is I can count and I, Jim Kahn is going to be the snapshot. And this snapshot is our snapshot that we have created previously. This snapshot, okay? So this snapshot in Dart, we need to defend our land. So we will have to, we will take all of the Lenhart of our data will have inside this collection. We will take all of that. Okay, there say we have native editor snapshot dot lend again. Now it will take another parameter that is called item bolder. And these item under constant two parameters. One is context and another one is hurt position. That is going to be the index you can add to any other name. Whatever you want is to Lake kinda available. Now in here, we need to define, need to retain our container. So written container. So written container here. And in here we need to add, we need to defend our height and weight. Okay, so for like if you look at here carefully, then you will see that this whole data contain is inside this container, suny to specific, we need to define the White on this container. Okay? So we can say there's a white 350. And who don't need to mention here height because we have defended had a 190 here. K, So container weight 350. Now in here, we need to add our child and child is going to be new show. Show is going to be children of widget. Okay, so now the question is that why I have added a 0 over here? And the reason is that if you look at here carefully, then you will see that left side We haven't emails and the right side we have a couple of our text and one few N1 icon. So we will divide these indices in integral. So these are the phospho item and this one will be the second show item. Okay, so for that we need to add here show. So row containing the syndrome widget. And now we need to divide our show into two parts, so forth that the easy way is called expanded. Okay, so expended tech two parameter. One is Flex Resistor and overseas define the white of, of, of a container of a row item. Or according to that, if I say so, we can choose one for this expanded and for this one, we need to the child and child is going to the new new image.net. And in here we need to use our snapshot, snapshot position of our tightened, that is index and George data. And in here we can say MS. Okay, and now anyhow we need to note in here inside this, inside this, what I can say. So inside this image at come up and is common, we need to use this feed. Feed is going to be this box fit dot cover. Okay? So and remember that this image we will have to use in our fires, Turkey. And two, you will have to make sure that we are using the exact same name. If we do a spelling mistake, then we might not get, then we'll be able to get our data from Firebase database. So this one will be for the first item, that is our EMS. And for the second item we will also have to add another contain another expanded. Okay? So the thing is that now for that first we need to edit size box. So new sites, Pogge is going to be white. You can say 10. And I print that we need to use an under expanded, so new, expanded and forties, we will select a flex tool so that it can take a larger space compared to the first Moreau item. And in her only to use old child child is going to renew. And for the child first we need to use here at column. Column is going to be the children of origin. And the question is that you may be wondering why I am adding column over here. And the reason is that if you look in that part, you will see that first one is what titans signals or description and in thought, but we have in this view icon and dispute text. So for that we need to use this column so that we can add data particularly. Okay, so for that, our first item is our title. So we can say that new text and text is going to be the snapshot index position George data. And in here we need to define this field called title. And we might need to, and we must need to change this color of the stakes and the font size. So the study is going to be the Texas style and form size, we can say 25. And color is going to be dark-colored, Todd, White. Okay? And in here we also need to add entropy that is called the maximum line mixer lunches one. If you look at here, then we will see that we have only one line of title, okay, if you don't mention this, then it will take more line. So this one is our first item. And the second part is going to be for text, for main content. So for that, inherit, just add a bit more space so that we can see it clearly. So size box is going to be high, is going to 5.20. And now we need to use that text. So new text is going to be the snapshot. So snapshot index dot data, and in here we need to use this. You can say it content, so content, okay? And for that, we also need to customers. Even before that I just mentioned the maximum length. So mixed mumbling in here we can see makes your line is three. So we can mention your maximum lunch in not more than that. And now we stem to understand str1 is going to be the Texas style and interdigitate system. We will have to add all of our extra. So firm size, we can say 15 for this one tipping 0 and color is going to be, the color is, color's white. All right, so we are done with this two-part. So we are done with Title and main content. Now, we have another option that is called few icon and this one, okay, So for that, I think we can continue with our next budge. And and for this point it is enough for this part. I will come up with new video in the next part. Thank you. 7. Get Latest Post From Server Part 6: Hello my dear students. Welcome back once again. So in our previous part, we have completed these two text item for our column. Okay, now it's time to add this icon and this view text. As you can see, this is also ensure. So we need to implement and under Rho of a here. So after this takes item, we need to use an unit to add another container, so forth. Such books, so new size box. And say suppose we can say high, it is going to be let me check. Homicide status. I think 5.7 will be enough for that. And after that, we need to use new container. So new container, okay? Alright. And inside this new container we need to use our child and child is going to be a neutral. So in here, we will also have to implement a show because you can see that two item is here in a row. We can see this one and this one. So for that we don't need to use expended. We can directly use icon. So new icon and icon is going to be Icons, torch removed, red icon. This icon will give us in disk Nissan and just need to change the color and color is going to be the colors dot deployments. And this one is our fast icon, and now we have another text and lithium is going to be new text. And this is just a text. We are not going to take anything from our servers. So we can say phew, just simple field. So just a simple fuel plus one must be the capital and change the font size, color, style. Style is going to be the text style. And font size is going to be shorter than say, a small farm sites. So fording 0 and color is going to be the colors. What? So this is how it looks like now. So let me explain it to one more time so that you can understand what we have done over here. So first of all, we have defined a container, and the container is in this whole container. So this one, so we have defined the height a 190. I think we can decrease this height to a 130. We don't need to use much more height. And took the approach that I have added a machine so that we can get a few margin from left, top and bottom as well. And just need to change the color and added a list feudal boolean, this liquid and will help us to get data from server there. So we need to use these, at least paradata builder. And at this list we don't build her contains two parameter fast twenties item count. And second one is item builder. So I temporarily snapshot or length. That is our the whole data that we are going to get from our collection of our firestorm and decided, well, they're also contained two parameter. One is contexts and another one is the index. And I put that we have returned this return container and this continuous containing this whole data items. So this one, like for each and every item, this container will return and it'll give a n. It will show us one by one output. Okay, so we have a white towel 350 and just need to add a row because our data is here in a row. So fascial and second shot. Fascial. It contains in this image and second row which contains this whole data part. So there, so I helped devoted AT using this expanded, which is tau best way to define the row row wise and column wise column height aswell. So flexes one, does flexing one and automatically take is space for this MS and just need to use the image Sinatra. I think we have done a mistake over here. And inside these images, we can add this image height for our. So we can say this height is a 130, which is the mean height of our column. Okay, so, and we don't need to define any weight as we have added this flexible. So this flex one will automatically add it according to the device size. Okay, we don't need to worry about a white. And something we have done in this expanded and we have added a column and content into the first data item, second cognitive item, and third one also containing your shore because it has, because it has to item one is our icon and another one is decent view texts. So there's why we have divided it into you didn't draw icon and these texts. So we are ready to go. Let me run it again. So if I run it, I will not be able to see any data. Just only I can see this shadow. And this shadow I can see it just because of inside this main container, this is the whole container. This one, not this one, this one that is containing these a 130 height and this hydrosphere. And in here I have defined this color there, so I can see this one. Now. We can't see any data and there isn't a stat. And the reason is that we don't have any data in our firewall and in our phi rr collection. So for that we need to add them on data. So it's gone off. And here you will be able to see that our collection of France and Tower Fire story instance dot collection and Emmys. Let us post, right. We need to copy this collection name. You can add here any name, whatever you want. But the thing is that make sure that you are writing the exact same name over here in our collection so fast you need to click. So go to the database, inside this database, okay? And maybe you know how to come here. And if you don't know, then was the previous video where I have shown you how to add distinct. Alright, so now click in this collection and in here we will have to post our this collection. So this collection ID means this collection, whatever name you will add over here in your code, you will have to add this inside this collection ID. Now click Next and it will take your, it'll take the data from you. Like for document ID, for title, and four. Ok, so each and every data should have an ID. Okay, so for that, we need to use this, our tidy. So you can click here, it will create a random ID, but if you want, you can use your own ID. And the feel and the inside is field. You will have to use this field. Now remember that we have added all of this field like this image, title, content, okay? We have chief fields, so we need to use this theme. But right now we don't have in images in our application. So for that we need to first 20 to add our images inside our Firestone. So how can we add images in your Firestone? So in the left side, you will see this database. You will see there is an option called storage. So go to the stories. And in here you will have to click this and get started. You don't need to change anything. Just click next and done. Okay, so in here, we will have to add our, our images, whatever we want to show. In our application. Our attitude coupled downloaded couple of images. So you can download these images here. And you can upload all of the masses whatever you want. So just open. And it will take few more time. It will take a few more time to add all of the images. Once all of your images down, up, once all of your images will upload it, you will be able to copy the image URL and then we will have to paste it inside of our database. So open these fibers consoling a new turf so that we can see it. So this is our fibers console and our here go to this database. Okay, still were in database directory. So now we need to use our collections. So on collection Emmys, let us post, go next and add these all tidy. And our field name is our first field name, news image. So we need to write the same name here. Copy this image. And this one is immense. And the fellow, we need to copy these Philip form here. As you can see, all of the IMO says has been uploaded. Now go to these any images. And if you click on the image link, on the, on the image name or anywhere in this row, you will be able to see these images. Okay? I think I can change the images here. Like this one n and a little bit town you'll be able to see and the final location and just expand it. And then you will see that download. You will just click on it, then you, then this link will automatically copy in Europe. So Copy to Clipboard. Okay, now go to here and inside this value, we will have to place this image thing here. And now we have another film that is called titans. So title is going to be heard. Title and we can see this. We are learning flutter. And under field is called content and this one. And add this content here and in here we need to use our failure like what we want to show. We can set it first time. Learning at or development is really fun to HLA farm to learn. It's really fun to learn. Flutter is super easy, isn't it guys? It's super easy. So now we need to save it. Okay, once we will say, we will be able to see all of our data over here as well as here we go. And we can see that our data is in our emulator. We can see our image as well as we can see our data item, but it's still, we need to modify our data. So as you can see that this data item is not coming in right where like it should become from the left side, see Nissan asserting the medial end essentially from here. So there isn't instead. But if you look our UI, we will able to see all of the data are coming in the left side. Okay? So for that, as we have illustrated columns, so this one has column has a property called grocery alignment and inherit we will have to write cross XML element or Restart. Now if I do a lot, we will be able to see in this one is here. And now is luggage really bad, like compared to this image icon, compared to this icon and discipline, just it has a little bit of space. But in our letter, we can see we don't have any year, especially so for that we need to use and a space. And also we need to have, we need to add a bigger white for this, you can say 041. Between these takes ten, this icon, we can add a space. So for that we need to use this icebox. Suppose is going to be the white. And we can say it is 5, that'll be good. And now if I run it, now, it's look good. And another problem is that, another problem is that guys, we should increase the font size of this content. So instead of Philippine, We can say it's 18. Novel slug, good rigor. And we can also increase that title size so you can set 22. So now we're just perfect I think. But there is another thing that we can do. So in our way, if we look carefully inside this image, you'll see there's this image has a rounded border. But for our discipline, we don't have this rounded border. And the reason is that we have not added, we have not added any functional default desk. So go to this image in here. So in here, before this network, we can wrap it with a clip with the new widget called clip I react. So clippers react. Ok. So just click on this image network. Left side, you will be able to see these bulk icon and get down. And in here you will have to use this rapidly, which at then you will be able to whatever widget you want to add this easy way if in case you did any mistake to add any widget in your, in your code, then you can easily add it. And this project will help us to add this rounded border, because by default it has a border-radius and just need to use border areas. So bariatric circular and we can say here, 20, now run it. Now vary, go. No, we can see this sounded border here as well. Okay. So. What do you think that this one is m? Then this one, I think. Can we change the Flex four instead of two at t so that it can take more space than the emus. Ya, we can see now this one is perfect and dishonest perfect as well. So we can see our we have this rounded border, MS. And as well as we have these. But if we look carefully, we will be able to see these, this rounded border is not working like it is also haven't background like this. In this, in this whole container is not. So this is our main container where the syllable main-content. Again. So this one is main container. I think it is perfect. If you look into left side, we will see this is perfect, no problem for that. But if we add one more image here, one more item. So at another undocument author ID field in MS, title, at least going to be the second post. Share in our application. And add another field. And this field is going to be content. And narrative should be string. And we can say that this one is going to be our second post. We are ensuring we're insuring the floods. We can set it flooded our development. Okay, now we need to copy one more images so we can randomly identity remains. I'm just adding some random images. So if you have a specific requirement, you can choose another image, whatever you want. No doubt, no problem for that. Okay, so now we can see this. Now download URL competitor, not URL, and just add another field and fill enemies images and pillow. We need to paste this link of images over here. Now safe. Now we will be able to, but here we can see that we have to scroll eat particularly. See we can, we'll have to add this particularly. There isn't instead, but in our application here you can see we can do it horizontally. So how can we solve this? Shrug them inside our list fluted filter, we have not added any correction. So what is container and lists which are builder in here when you use this is correction and this is correlation is going to be exists dot horizontal. Now run it. And now we will be able to scroll it horizontally, but it will take, it will be good if it will have a bit more space k. So can I add margin over here so much in his mercy as instead of wall 5.0.2, like, you know, we're just not working because it is taking an extra space. So we need to increase the margin size over here. Insert of eight at OK, I think aid is good for that. No problem for this one. Okay, run it again. I think we have the same machine. We have the same much in then this one, again is taking a bit more time to load the data from the server. Alright guys, so I think it is enough for this part forever. We will have to solve for we will solve it in our next part. Thank you. 8. Complete LatestPost Part 7: Welcome back once again, my day Sudan. Now in this part we will add a couple of more post and we'll solve some design issue. So as you can see that in our application we have two data item. We will have to post a few more posts so that we can see how the thing is executed work. And if you look at here carefully, you will be able to see that we don't have any space between these two lattice Post item, but it should have some misspell. So the thing is that if we look at our image carefully, then we will be able to see that this post has image, say this one bit more MS, but more. So for that we need to use. So go, go back here in return container and after this white appendices, white 250 in here, we need to use this much in margin is going to be, instead of all we need to use MCC as INSEAD only and we can choose left 10 cause we only need a space from left side. We don't need a stress from top or bottom or right side. So now if I janet, It should be worked perfectly. Alright, so case, so it is not working here. But it should be worked. Okay, let me check it once more times so that we can understand that what mistake we have done. So moved his white to a 100130. Okay, you're just not working anymore, so let me check it one more time. So let's run it again. We are getting a spaces, but we can't see our spaces. And the reason is that if you look at in our code, then I can see that in our main container we have added our color, okay, there. So we can see this whole background color. If I can get this space, we can't see it because we have edited spectrum colours. So we need to cut this background color from here and just need to put it after this white insanity Street and country, not because these written container will contain this, this one. Okay? So our own background color should be inside this, each and every container item. So now if I run it, here we go. Now we can see this space. Right here. We can see this space. And I think we can decrease the white instead of 300 to 300. And care, let me check it one more time. If everything goes well. Okay, now it'll be good. So now we're ready to go. Perfect. And to one thing that in here, instead of using, as Ian said, all we can only use only as insert only and just need to express from top, not from any other part. So just run it. And we will see this but only from top and not null from the left side. So as of now we have only, we have only two. And I think we have added algo comeback here. And inside this clipper react E, As you can see that we have, we can see a much more round border. Instead of using 20, we can use their 15. It will be look good. Now 15 is perfect. Okay, so we are seeing this one a bit bigger. I don't think so. We can decrease the flex size T22. Okay. Now we can see this one. I think 12 flexors is enough because we need a bit more space for our images. That'll be good. Yeah, now it's perfect. Now with perfect guy seems perfect. Okay, so, so now let me add few more getItems so that we can see how the thing is a lot faster to use the images. So for him it's just at some other images here. So copy this, download URL and paste it here, and attach l. And we can add some dummy text from Loren ipsum. So pasted here and add content. Content is going to be, we can add a lot of content here. No problem for that. As must continuously want to connect. So ImageContent and safe. So 11 item, two item and this one is G item. Okay? So 12 and cheap. Right now we have three items and we can scroll it horizontally. So let us post 1-2 and Che, Let me add couple of more. So add document ID field is going to be MS. So IM is just copy and under MS from our database. And guys, one thing that I would like to mention you that it is not mandatory to upload all of the images in your file store. You can upload. You can take any image URL from Google or any other website and just copy the image URL and you can paste it over here. It will wipe, definitely no doubt for that. So just need to whatever you will try it inside this image network. It will show you everything. And the second field is Dido and second file's title, and we need to use this calendar text year. Another texture and content is going to be this one. And done. So we have added for item two, G 1234. Okay, so we have added four item right now we have four post. They can see. And in our next part, what we will do, we will use, we will do. What do you do in the next patch? In the next part, we have done this part. Now, as you can see inside this UA, inside this UI, we will have to do this latest post details. So we will have to do this latest posts details part so that when you click any of these items so that they can redirect to this post digital pace. And we can show them these images and the whole description in our min level, we are only seeing that we are only showing them only one line of Till and she line of main content, but they might turn but our user, Mitanni too, but our user must need to read the whole post, okay, as we were building a new sport LF. Okay, so the next part we will do it. I think it is enough for this part. We have completed all of the required functionality for our discipline. Okay, so this is perfect for now. So thank you for this part and we will, I will come up with new video and new lecture in the next part. Thank you. 9. LatestPost ShowDetails Data Part 8: Hello and welcome back once again. So now in this part, we will too, when user will click this title or you will redirect them to a new place where they will be able to create these whole post, okay, like the whole title and there's a description, okay. If you, if we look in our white, that is the latest post two digits you, I inherit, we will be able to see this. We have a rounded corner images and that is the DC maize and journalist. And we have a circle avatar and these whole job post. Okay, so we need to add this thing in our application as well, when user would click this on so forth that first we need to have a first one it to have a new file where we'll show all of our details, a job posts. So go to this leaf from that file. And Ginger, I wanted to see we need to use these. Okay, we can say that details, details latest post. Let us post. So details lead test post. Okay, now, okay, so this is only file in here. We will have to add our Material dot so we can say import material, judge. And need to add our stateful widget. So at SFO legit and we can say home detests, okay. Instead of saying home details, we should say here. Let just post it us. Alright. Now chance this container and add share scuffle widget that did that contain all four required, which it ok. So now first we need to connect this detest job post with our home layout. So how can we add this one? Foster need to import this package name here. Otherwise, we will not be able to access in this one of them. So first import and I'm sorry, import and we can set these were fun dummies details. Let us postdoc dot ok. This is the main post. Now, scroll down a little bit more, little bit more. And in here. And this is the place where we have all of our, all of our images and all of our content actually scroll inside these lists were builder. So when you sir, will clique in this title, we will redirect them to the digital space, or we can do that when a user will click any of these, feel like emails here, we will send them. So for that, it'll be good. Like the process is same for every, every step. So for this, I will add, a user will click these tattle part. We will send them to the new place where they will be able to see the whole job post, okay, like the whole data, content and images. So the sunny summer invest notice on this one is your title. Okay, so we need to add clickable in this text, okay, this title. So we can't do it directly for that we will have protect health from another widget that is called in Kuwait. So now if I click on this text in the left side, we will be able to see a above and just click on and down. We can see that rapid new widget. And in here we will have to write this in Cowell. Okay, so inside this inkwell, we will have to write this on deaf robotic. So and this entrepreneur parte content, this, I'm sorry. You have done a mistake. Fast way to use this bracket and then this one. Okay, So, so this inkwell and just own it to use a navigator.gov. So we will have cleared here navigator, navigator dot of loadable contexts, dot, push and push taking route. And that is MATLAB based out. So new material pests route. So new material piss shout and this material paste out content to parameter one is for billers when there is going to be the context. And after that inherit we will have to write not in here. So, so in here we will have to write our class name that we want to show. So our class_name is, I'm sorry, our classes. Let us, let us pause to details. Let us post details and we will have to pass our data, show that parameter. So we are able to exist this let us put plus, so we are able to this one. So in hair. So as you can see that just because of we have imported this detailed pays and the top of our file, we are about to this one there, so we're able to access this lattice post from here, from here, and now we need to pass a parameter. So for that first inside this lattice post details, we need to access our documents snapshot. So for that, we will have to, for that we need to import our cloud fires stood. So plowed Ferris topic is and we, and moreover we also need to use, and moreover, we need to use this dot-dot async. So these two families is required here. And now we can access our documents, snapshot C, we can see this tournament stuff should, and we can say snapshot is just a variable name or we can set up just an instance of this Newcomen snapshot class that is provided by flooding. Alright, now in here we need to create a constant of about, let us post creatures so you can see let us post details. And in here we need to write this dot snapshot. And now as we have added this snapshot in our constructor, now if I go to this home.html as an adult, I need to say that. And it says that it required one R commands and are companies that we're getting from our server and then the position of each and every argument, each and every data. So we will have to write the snapshot and index. And this snapshot is coming from this snapshot. As you know that this luxuries containing the whole data as we have added inside this init instead, the snapshot is contained is hold at r from this latest post. And we are saying that for each and every item, for each and every item like this snapshot has a one item. And this one has one item and this one has one item for each and every snapshot that I attend. Whatever you have, just take the whole key like this index position contain this whole data key and it will pass to a world owl. Door detailed pays this hole that item like these images, title, description, and all of these things. Okay? So this is how things work. Now if I run this application and if I click here, it will, it will redirect to the new place. But as of now, we don't have any data in our digital space nationally, we can cities blank space. Once we will add our data, then it will work for polythene, no doubt about decision. Well guys, I think that is enough for this part. We will continue with our next part till that keep watching. Thank you. 10. LatestPost SetImage In DetailsPage Part 9: Welcome back. Once again, my students. Now in this part we are going to set all of our data in our detail space. So as you can see, this is the UI where we'll show all of our data that we're getting from Firebase, Cloud Firestone. So for that first we need to design all of these things. We need to do exact same designs, right? First, need to define a more effort than this image than this one. Okay, So now I am in this details, let us to post.rb file. So as you can see that we have created our scaffold shape. So inside this scaffold, which at first we need to define our navbar. Okay, so Akbar is going to be the new AB bar and title is going to be done new text. Right now in here, let me check what we have written here. We have, let us pause to details. So that takes days. Let Test Post liters. Alright, so now we need to add a background color. So Bergen color is going to be the color. And pseudo acts double f and it just share. We need to copy our colorCode. So discolored committee we have edited previously, but I can easily copied here. And as you can't copy my data at temperature, you can just do normally, watch my video and just knit and just, you can write down these W2, W4, certain scholar who left here in your replication. Now if I do hard-shelled, but then here we go. Now we can see these latest post details. So our app is done. And let me change this. One thing like this one is showing rights wanted to disable this on. So go to this main.out and inheritance. Our debug, a check model banner. We need to use it false. Then should be removed from our application. It not because we need to do, we need to run it so that you can see it. So it has removed. Now if I go to this next piece, you can see it is not here. Alright, so again, go back to this details. Let us poster tart and just need to copy this background color. So this whole data has a background color and it's very difficult to copy this background color as we have very less hospice. I think the scholar is the background color k. So copy these migrant gliding same colors. So our studies are bird, we can, this Bagram colored, that can color is going to be the scholar pseudo acts double F and make sure that you are removing the hash symbol. Now run it. Now here we go, we can see the spectrum colour. Now our first job is to add these images in our application. So for that, now, we need to work with our body tech. So fast antibody take over here. Okay, so ListView has children of widget or types. So L2 has children of widget. So inside this list pool. We need to divide it into two or three container, like we can define it into two container. So this first container contains, so this first container contains a EMS, second container contains this avatar and this whole data. So for that, we need to add a new container so we can comment out it. Her first retainer and SLS. Fast container. Alright, now add a continent over here. So new container is first connect to at the margin. First we need to add the margins. So margin is going to be as hints at all. Not only. So as inset all, we can say 10. And, and if we look at carefully in our application or image, we will see that this image has a rounded border. So the easy way to add this sounded 1A is we can do it in a variety of other ways, but I would lift. But on top of that, I would love to say that using this clip art React is the easiest and the best way. So just generically for React and by default this clipper react continue border-radius. And this one is going to be our border-radius took circular. We just defined you're required radius, whatever you want. And it will give you this shadow. And before that, we need to add a height for our emus. So height is going to say 250.04 white. We can use the mess for him. So why it is going to wither? We can use the media query. So for those of you who don't know how this media query is, media query work. Let me write it first. So medically dot off contexts, dot size, dot white. So what does it means? Now the question is that for those of you who don't know how the media query work. So this mediocre u dot of content or sites does white means, what about space? This image will get in this mobile device. It will take, it will take the whole SPS, OK, literally it'll take the Holy Spirit, whatever space you will get. Okay? So that's why we need to define this, our white. But as you can see that I have defined is high to 50 because the reason is that the reason is that we don't need to, we can't use the full screen for this image because we have to add our description as well there. So I had to define the height. And as we don't have any other options to add in the right side of this image Neff's way I can select these wide media query to adopt contexts are sized, was white. And the same thing Can you use for hide in case if you need to have the holes? Hole is screen like our holy screen for a white, not weight for height. Alright, so now it's time to add our child. So the child, child is going to be new. New image.net in here, we need to use widget, I'm sorry. We need to use this widget so we get taught snapshot. And this snapshot is the snap shot which is connected with our this pile, true, this snapshot index keyword that we have and that we have at it in this media query, in this metaphase route. Okay? Okay, so this snapshot, so the snap shot, shot data. Now in here, we need to add it in a different way. Like in our homepage, we were writing it in this way, like directly snapshot than index, then data, then Title, as we are taking this title directly. So we don't need to mention here index, just collect widget, snapshotted data. And in here, we need to use our, you know, when to use our image field in our fill them whatever we want to show. So for this, we need to show this image. Alright, now in here, we need to, we need to mention our height for our image. So Heidi's quaint little 50. And as well as we need to define this. Okay, we do need to mention this weight as we have added in this media query for the white part. So we need to use this feed is going to box with what govern, and this boxplot cover will give us the exact size of the image. Now if I run it, see, we can see it already here. But if I run it now, let us post. And it'll take it time to load this data from the server. Ok. I think my internet connection is really slow today, so that's why it is taking lot of time. So now go and here we go. And we can see our our MS over here. And we can also see these border-radius, okay? And you can see this border-radius C, we can see this rounded corner, an antenna for, let's say. So you can see this for each and every antenna, we can see that different image. That means this index position is sending the different key for each and every item. And it is showing here according to the key, whatever we are getting when we're clicking for each and every item. Okay? For each and every item. This is how the thing is who work here. So once you load in here, we will be able to see it in her effort. Right? So our first option has been added. Now we need to work on our, now we need to work on our in this part, this title and this description. I think that is enough for this part. We will continue with our next part. Thank you. 11. LatestPost Set AllContent In DetailsPage Part 10: Hello guys, welcome back once again. So now in this part we'll set all of that data in our application. As you can see that you know what we've as part, we have added only aware of images in our retail space. But in this part we let all of the rest of the thing that we have in replication. So for that first we need to add fast address icebox. So new sidewalks and add height, height, we can say 6200 so that we can get any space between these two fields like as you can see that. And now we need to take this background color. So this Bergeron color has different, ok, this one, this colour. You can, you can hear. So before that we need to add our container. So new container. And inside this container we need to use these colors. Color is going to be this color fellow through X double F. And you can, you can write this coat color coroner replication as you can't copy this code from here. Okay? So dishonest our container and we must need to add a margin here. So margin is going to be as instead all 10 on right? And we need to define the height. So height is going to be a media query. Talked of the built context, torch size dot hi. This time we need to use the height for holy screen as we don't have any other option. Option two, see here, okay, so now if I run it, okay, now if I go there and I will be able to see this hole is green and this background color. But as of now we don't have any data there. So we can see any data see, but we can see this background color here and this image is here. So now this container, and after this container will have to write a child and child is going to be one. We can say that new column. Okay, we will have to add a new column. Column is going to be children of widget. And now the question is that why we need to use this new column? Because we will have to that item. One is for this 11 is for a, k1 is for title, and another one is for this display. Okay? So this one is a title actually, like IIT has a largest, larger title there. So we can see it in this way. In the first item of this column, like we have edit here, column there is one. Instead. We'll define it into two parts. This container, this title and this cycle avatar, who will be the first continent and this whole description will be the second container. If you want, you can do it in a two-way. So for example, you can add, we can define different color for this one, but for this project as we have DC weight, so we can follow this on. Alright, so inside this column, just need to define this container. So new container and add child. Child is going to be neutral. Show is going to be chilled in opposite. Another question is that a y rho, because in one row item we have two item. This one is faster item using signature item. Alright, so this row and now is going to be the new Circle of utter. For those of you who don't know how the circle, circle camera here, and that is just for these Sakalava adders for aiding this thing. And that is called a cycle of matter. So new Sakalava TR and this continent child, child is going to have a new text. And text is going to be this widget dot snapshot data, and need to use the title and the position, like the 0 position. So it means that whatever we will have a title and it will appear the faster, faster, faster, faster letter in the circle, Alberta, for example, in here and there is the first award and D is the first letter, okay, that content is that consistent, isn't there? So there's y. This d is if you are here. And the reason is that it counted in area positions who as all you know that all program we know that position gyro is for areas like the asserting point. We have to select the Tutto, like the Arab positions. So if we add a 0, then the phosphorylation will come. If we add one, then second position will come. I will show you how things work. So for that first run it. Okay, so I could see how the things who work this one. So if I change it to one, then it will come and other and edit item like the second one. Go here and the second one. Okay? So we need to we need to change this text color I think we need to use the font size is telling is going to be Texas style. And font size is going to be there. You can say, and I can say font-size, 21st serial there, see if we can change. And after the stakes, there is a couple of other properties that we need. We need to use this background color. Okay, so we need to add it inside this text again, visit that property inside these texts or foreground color. Notice one on you to use this on this here. Okay, so bedroom color is going to be this color or some other color first. So colors and charge in this green color. Now if I run it, we'll see these green text and this text here. I think this size isn't working. If I ate 29, it will increase the font size. Yeah, I do increase the font size, but we don't need to. That must at 21. But I would like to change this background color as we have difference. There's something, something else. Like we'll use this background color here that we have here. Let's see how it looks. I think it will look good. So background color is going to be this one. Instead of this one, choose this color. So colored yellow x double f and share. And Janet. Okay. It's not looking good. Okay. Do one thing that ok, so we will have to add the march in here. So the marching margin is going to be as instead all 10, no, run it. Okay, now we're still working. So, okay, so I did a mistake. So chance just 01 to 0 so that we can see the first position here. In the first position is I0. So K. So this color is done. Good writing. We should go for something else, or they just leave it for now. We can chance it letter and it assigns books. After this. After this cycle, amateur Add a new size box and why it is going to be 5 and add the new text and that'll be what title. So new text. Text is going to be our widget, dot snapshot, snapshot turn data. And this one is going to be data and just need to use this canister. Style is going to be text a stoke and font size is going to be, it didn't 19 k. So we're getting an error. And the reason is that. Okay, so what is the result? Okay, so we need to define the weight of this. Show. We need to define the height of this container so that it can take, Hi, this is going to be, you can say a 150. Now run it. All right. So okay, a here. So as we're not getting our desire and design. So the reason is that, again, we don't need to have height over here. We need to wrap these text with a container so that we can modify heat so rapidly with container. So at Container, okay, now in here we need to define the white. So why it is going to be media query dot, dot, size, dot or weight, not wait, not hide white and divided by one K. So now it'll work. Instead of one or instead of one, we can say 1.3. Yeah, it is working now. So it'll just take any space. So we'll have to give Dao media query you of size two to white and 1.2. That means it will take any space from the right side of this, like 1.3 space from the right side and then it will come down. So this 1.3 will add, will give an, especially from the right side according from the, from the, from the whole weight of this thing. As you can see me deco doo-wop contests highest like the hole size. Then it will create 1. She's bits from the right side. And then it'll shorten this way and got it. And now as we have a role, we can add these cross X is element here. So gross XL and meant dot start. Then it will start from TAF, is at from TAF. And just need to change the text color for here. And I can change the color. Color is going to be these colors dot quite a k. So this is our Dido. And this one is for title. This one is what title? And now we need to have another container. So these ones are fast container. And our serious concern continent will be for our new sized popes. And Heidi is going to be 10. And it's going to be this, and this one is going to be for this takes distalless whole context. Okay? So how can we do this? We can add new text. Alright, and we can say Egypt dot snapshot, dot data. And in here when you do add our description and what was the name of our distribution? Like the whole letter it was content. So we can add here content and just need to modify this text. So they study screen could be takes his towel and font-size, we can say 15. And color is going to read color, weight. And now if I run it, Sherry, go. Now we can see the whole description. Okay? So our cycle overture, our title, and our whole description, whatever it takes, we will have it Olivia. And now we go for this one. Okay. It is working perfectly. And if I go for this one, it is working fine for vc and this title and this one. Okay, so everything is fine. So we have successfully implemented to our latest posts a details feature. So it is finally done. No problem at all. Okay, everything is working perfectly for each and every item. We can see that unique, unique did item, the unique Can data for each interview. So I think we can see a little bit of space between these Sakalava TR and this title. What we have done. So we have Danny space between this 15 years added, den nursing him, run it. And if you do work like in always working lowest look good. So now ears look good. Don't, not from them for that suits long, right? Everything is perfect. And in our next part, we will add to our this carousel slider. It, it will looks really good and it is really, and it is really easy to add in our flooded application. But, and after that, we'll move to our these four battle for our international uses, sports news, local news and politics things. And then when you move to these obvious field that we will have to at in our application. Okay, this gallery and this Newspeak. Alright, guys, one thing that still I'm confused that should we change our circle outer color or we can keep it this way. I think if we added this way, is look good, but in the orange color, it is not matching with our background color. Okay, I will try to find out another color for desal kilometer. If it similar to the scholar, then I will add it in our next part. So for that part, this part, it is enough and I will come up with new video in our next lectures. Thank you for watching. 12. Carousol Slider Part 11: Hello my dear students. Welcome back 1 second. So anywhere profess part, we completed these latest post details feature. Okay? And in this part, I'm going to show you how can we add this carousel slider, okay? So fast for aiding this carousel slider, we need to take and when to take a health from a decade that is called carousel approach. So go to this part of deaf and searched their carousel pro, then you will be here in this space. Okay, so first we need to add this carousel pro decades in our application. So in here you will see all of instruction. So they have a bunch of example over here or you choose, you can add distinct. So fast for aiding the spec is in our application. First and foremost, we need to add these dependencies and the dependent in MS carousel probes. So I'm gonna copy it here and go to the project and open this poverty speeded YML file and upload this cloud fires store. I'm going to paste it here. Now go back to this home dot, dot. Now we need to add the spec is many of you already know that how to add distinct. So go to these tools. And in here you will see the flatter and flatter packages get. Right. If we can see exit code 0, it means we do not have any idiot, okay, we do not have any era. It means it is working perfectly. Okay, now we need to import the spec is here in our replication. Or we can directly acting, we can directly access it here in here as we have added these beggars. So we can add it here. Okay, so import colossal rocket. So Alright, so now this is the end of our first container. That means this is the top of this continent and apprentice container, we will have to use this carousel. So I'm going to add here SI spokes. They can say this size box. And you can say that height 7. And after that, you need to add another container. And we can say that second container, Gardasil slider. And I can say that our second container, Gardasil slider. Okay, now at this container, so new, so tangible. And first we need to define the height upriver containers. So, so this will be the height. So define the height. And we can say that fast at the margin and tin in here in our UI we have a little bit margin from left side and the right side, top and bottom. So we can say that as insert all and marching waters. The margin for our first container, I think for the first continental margin was we have men at any margin. Okay, so I think we have had it, right, so we have not added any margin. Think this eight grading is taking here. So we can add this margin eight. 8, I'm sorry. I need to come here. Inside this, we can use this margin eight, okay? And define the high-tech and say height 200. And after this, what we need to add our child, and this child will be our carousel slider. Okay, so in here you will see lot of example of this curve. So on slider and all of the instruction you will find out here. So we do not need to memorize any of this code that we need to add for this carousel slider. In here you will see the instruction that images network amaze. You can also take the exit SMS. And if we scroll down, we'll see some other options as well. Okay, so it's better to go to this file here in example session. Go to this example. Inside the example, you will be able to see the whole code that we have to write. Okay? So we need to use this carousel directly. This is the main thing. Okay, so first we can add here, so child size spokes and we need to define the height and white. So inside the child we can add centered tech here. Okay, and it can define I think we do not need to add send that tech can legally work with container. The container and we do not need to define the height here because we have already added this height, 200. We need to mention the white. So why it is going to be the media query dot off contest dot size dot i1 to add holy screen as if you look at our UI, you'll see that the whole screen, okay? And after that, we need to use the carousel. Ok, so the child is our carousel. So in here I need to add the child. Child is going to the parasol. And inside this cursor, we will have to write all of the required code. So if you look at here, then we will have to see that. We will see that we need to use this box filled that cover, autoplay animation, all of the, a lot of things. So we can simply copy all of these things from here. Like all of the data that they have edit inside this carousel. And this is the main functionality for our Caruso, and I'm going to copy it in here. Okay. Now let me explain everything what they have added here. So if you look at here fast, they have faster, they have added Bach Suite box. We did cover. We need to use this box without cover to see the exec, image size and auto-play falls in emitted curve. Limited duration is the duration unlike how many second, we, I want to say again, so we want to show this thing dotted size. Then first law, first run this on, and here we go. Okay? So now we can see, now we can see that our slider is here, our sludge is here, but it is not moving automatically. Now the reason is that why it is not moving automatically and inside this auto-play and we have false, we need to true it. Okay, so we need to true it nor run it. Now it'll move automatically. It should move automatically. Okay, so let me check that how many segments they have added to move it. Kay, so autoplay true and up toward the sort of lead true, we need to run this application so that we can see it. And again, let me check it. One thing that show integrated care are true, and if we look at here, we will see that these are our indicator color is in the top right. We need to add it here in the bottom. If you look at our MIS C in the bottom, so forth that and dotted position on interchanged unloaded position. Or we can say that the bottom center, this is the position and duration milliseconds instead of 500 to 600. Ok, now if I run it, if I run it again, hopefully we'll be able to see, okay, now we can see that our daughter is here and it is automatically moving. Ok, c are automatically moving. We cannot say last one because we have added this SMS and we will change the image ok. So it is changing ICD January. So working perfectly. All right, so let me see once again what we have in this. Everything is fine. And before that. So let me explain it again. What we have done here so fast, I edited container and just edit the marching to create an especially between these left and right corner. And after that added another continent where I have added the white and I have not changed. And I have no chance to any white in here because this container is containing 200 height. So therefore it is showing these 200 height. And after that we need to use the childcare. So that is the functionality of cursor slider and just edit all of this line of code is the functionality show and you're gonna collapse shoe this. Then that means if you want to show this integral color, if we add it false, and then this one will remove C. Now we can see we don't owe don't happen integrator color. So we can show this integrity of color. No problem. So you can customize it in your own way, whatever you want. And in this duration, this is the 600 millisecond it will count. And this is the dark size. If you want to increase the dosage size, you can increase no problem for that. No problem for that. Okay? And inside this image, we need to use what image we want to add. Okay, so this is the default images. So I'm going to remove all of this image from here. Alright, so we were in this position. So the thing is that I think instead of visiting these exit asset images, we should use this network image. It will be more faster and we will be able to change our image anytime. Okay, so choose the network in this network emus, and in here we need to use the MSU. Well, now we can see that we have lot of images. C, we can see the laptop images. So rather than using the white color dot indicator colors, dot increased colour seven dot bg color, transparent. Dod indignant coal transfer. Let me change it to green color. There. See what we can see. Okay, so this one is creating a shadow. So we should use forever. It has. We should use this transparent color. And we need to change this color here toward increased color. Dark color here we need to choose gender, depth dot colon dot color is going to be done. Colors, green colors. Okay? See now we can see this dark color is becoming green, but who ate is moving it. Eight color is changing to the red color that we have added here. These are just pretty good and if you want inside this container again, so this continuous continuing this whole data. So if you want, we can use here decoration. Liquidation is going to be the box decoration. And inside this box, diversionary Kenya into smaller areas and moderators taught. Circle_area can see 25. Sarah and I run it. And now we can see this shadow now will be able to see this shadow. Okay, this one is not working here. We should add each year I'm sorry. And we should add it in, in our main container. And it is all this container. Okay? We can see this one will be circular, but we cannot change the image to water areas because this image is not rounding from here and there. Say if they have any decoration size or border-radius and border-radius dot circular. I can say 20. No, they don't have they do not have this one. Ok, we can use this border-radius is taking boolean fellow so we can set true. Alright, now we can see this border-radius, okay? See no considerable already. So I think we do not need to use this border-radius here, different separately because with this slider, by default, it has a property called border areas. Ok, so now we can see we can change all of our data. So our, this part is done. So I think it is taking a user space. Can we change to a 100, to a 170? Okay, now I think it looks good. All right. So guys, let me mention you. Let me explain. Explain it one more time. What we have done over here. So first we have defined a container. That container is defining this whole part of this container. Ok. And after that, let me formulate it. And after that I have added another container where I have added these white because we need to have this whole white and then add to it. Then I have added another challenge and that is containing this carousel. Okay? And inside this carousel we have added a couple, of course, that indicates it's Bach speed autoplay, true animate, carve dot size and color. So if you want, you can chance All of this goat ok, in your own way what we want and update that inside this image area, we need to use all of our images that we want to add in our carousel slider and just copy the image, whatever you want to show. Or if you want, you can use these sediments. But if you are using a settlements, like it is, what I can say for this, I don't think we need to add any asset him is because if we are adding images, then our file size is increasing. So as we have the option to use this network image, so we team as fighting, we can use it here. All right, so this is the end of this part. I think it is really easy, right? 13. Button design Part 12: Hello my dear students, welcome back once again. So in our previous part, we completed this carousel slider and it is working perfectly. No doubt about this issue. No doubt about the issue areas working perfectly. See if we run it, it is working perfectly. No doubt about this issue. This is a replication. Alright? And so we are progressing. Okay, so we have finished our trend, we have finished all let us pause. Definitely have finished our cursorial. Now is time to finish this first button. International news is post news, local news and politics news and upper, that. Move to the section. Okay, so before we jump into our coding section, let me mention you wanting that. Okay, so this container is contained our discursive, Okay? This one is second continent that we have written here, and this one is fast continent. And this whole first container is containing our lattice post-fader. Okay. So if you guys want to format your code, let me mention you. Let me clarify it first, then we'll jump into our touch section. So I'm going to tell you one shortcut keys that you format your code. Okay? So in your keyboard placed control or and all, and L, then this Android Studio will form it your all of your code. Okay? So if I press it control under all than it is for him, is this formatted one line? Okay, so let me show you what I mean. For instance, that one line code is here, one line of code is here, and online colleges here. Okay, so this is not, this is not looking good, okay, so we need to form a discord. So how you do normally, so you can normally use one-by-one, right? There is a shortcut key in Android Studio that it's called. And so you need to press Control aren't Altera and 20 and L altogether. So control ultra EL, Press and see all of the liner formatted. Alright, so now let's move to the, let's move on to the third section. So Todd containers. So before that we need to use a size box. And Heidi can say heights 6. And in here we need to comment out or we can say that that container here. So that later we can understand that what we have written inside this container. So, so int targeted container. All right, so now we need to you at our container. To a container. A container is going to be the container and fostering into margin. So what margin we have added for this container? We have heard it, I guess we can use this March in March in is going to be as inset all 8. And we need to define the height here. And Heidegger says 300. And defend that child and child is going to be there. Like a child is going to be the column. And column has children off widget. Okay, so now the question arises. You may be wondering that why I have selected column, okay, if you look at our button, then we will see this, this one, this one, and this one does. And so we can assume that these two Bhutanese, our first column item and these two item resource second column item. Ok, so incidence column item, we need to use another container. Again said that first container and a container. And inside this container, and inside this container we will have to write. So inside this container we will have to add our, so inside this container we need to add to, we need to add into this container to add row item. So this one will be your fascial item and this nano seconds or row item. So rather than using this container inside this column, inside this container, can directly add this child. So container is containing child. Child is going to the show. And show has these children of widget inside the sinner widget to define our Rhoden wrote them into two parts. So therefore, we need to use expended and select the expanded. This is the best way to divide any row and column and it contained a keyword called Flex and defend the one. And this one will automatically select the weight of this row item. Ok, so child is going to be the, we can say this container and we need to deck when you need to customize this container. Because if we look at this button, then we will see that this button is containing a background color and it also has, and it also has this rounded shoves. Therefore, we need to add these containers so that we can add here our declaration, I guess so decoration is going to be the box decoration. And inside this box, true Christianity use border-radius and border-radius starch circular, we may say 15. And inside this, we need to use this color. The color is going to be the, it uses integer color and 0, x w, f. This is mandatory. What they don't need to add in order to take any hexa court. So I need to take this color code. I am using this color. Cough. Ok, so you may we not be, you will not be able to take this color, use this color code in my Youwei saw, what can you do? You can simply, you can so fascinated to copy this and remove this HoBshare. So you can simply see it entered right by yourself like Judo wax tablet. And this is mandatory and after that to seven to V4. Okay, and I, and I forget to add the height we need to defend the height of this container and this height will contain this pattern. Ok? So Heidi's going to be a 100. Alright? So you may be wondering that why I have not added any white and there is only instead, as I mentioned to you, that we are using this expanded so dishonored automatically select the white. Now if I run it, now, I will see this. Now I will say this button here, okay? But we don't have any data right now and there is only that. We have not added anything. So inside this container, c is constant data and the deductions are prejudice decoration. We need to add child and child is going to read a text. And in here. So let me see. The first one is international news. So in their international news and we need to customize it, we need to change their form, sudden colors. So a style of texture style, font size. So you can select 19.019 and practice font-size to need to use the color and color is going to be the colors to, to fight. We don't need to use any other color, so color's white. Now if we run it, we might see our Ok. So now there is a problem that we cannot see our digs in, inside, like in the center. But if we look at our the way we will see that this takes it inside the center. So therefore, we need to wrap this text using our Ellen meant QR. So just click on the text. Then in the left side, you will be able to see this balsa foam expanded and add with new widget. Click here and in here, add this and add this alignment keyword and select alignment dot and select alignment or center. Actually, this element contain a bunch of options. So from all of them, you can choose this alignment merge Center. And our dx is in here. So now the thing is that as we have, as of now, as we have only one expanded, therefore we can see that this data item is taking the whole row land. Okay? Now if we add an under expanded, then it will reduce. Okay, so let me add it. So add sidewalks, sidewalks and white. We can say that 5, we need to use white because ours, and we'll be here. Okay. And now in here we need to use another expanded and expanded content and flex. We need to add the same size and therefore C, same-size. So therefore I am writing here one, but if you want to add different size of button, then you can choose here 34, whatever you want equity into your input that you will add inside. In this flux, it will clear a space. And now the second one is child. And child is going to be the container. And inside this container, we need to define our height. So height is a 100 pseudo. As I mentioned earlier, we do not need to add any white. And in here now we need to use the decoration. Decoration is going to be the box decoration inside this box. Two crucial we need to define our color. I think we can copy this color from here as we need the same color. So color and he had to use the border. Videos is going to be border-radius, dirt, circular, and is going to be few pinpoint syrup. Now it's time to add our text. So the child is going to be dark text. And for this item, our new sees is forced news, we can say is force news and change. The star is going to be that Texas style and font size is going to be the font-size 19 is 0, and color is going to be the colors dot. Ok, let me forward this quote. If we did any mistake, alright, now to hotter a lot and here ego. But we cannot see properly because we need to wrap it with Ellen. So Widget is going to be aligned. And alignment is going to be the alignment Art Center and our rabid. Alright, so now we can see that it has taken his own await automatically as we have added if we change this one to cheat and it will take a larger space than this one. Okay, So this is how the flexes who work on but doing it the same way. I think if we can take a little bit more space, it will be looking good. See now which look good? See I've even, we can just call it here. And our working is working perfectly. All right, so we have, inside this column, we have done are working with our first column. Now we need to, we need to work with our second column item so that we can add our next to button that is local news and political news. I think that is enough for this patch. I will come off with new videos in the next lecture and the lecture, I'm fairly sure that we will complete this to water and then we're gonna move on to our biggest newsworthy. We'll add these custom degenerate and further thing. 14. Button design complete Part 13: Hello my dear students. Welcome back once again. In this part, I'm going to show you how can we add another second button is pretty similar that we have added. Prefers to button. Ok, so our application is right. So now, so this one is our first container. And after this container we need to end this whole container is contain these two button, okay? And we need to add another container for our next two button. Faster we need to add here or sidewalks, so sized box here and add the height. Height is going to be 6. And container, container is going to be the first to enter margin. Margin is going to be the ass instead, all Ollie's going to agency at all. And we need to use this margin container 8.08. I'm sorry, that we do not need to add here margin as we are already inside a container. So we just need to add in these short Joe container children of widget. And inside the general budget, we need to use these expanded. And we need to add these expanded and add flex one and add the child. Child is going to be the container. And inside this container, we need to use these height of over 100 is 100, and decoration is going to be the box decoration. Inside this works recreation, we need to use this border-radius and border-radius dot circular. And this one is going to be 15. Alright? It's still, we need to add our color here for this one. So I can simply copy this color code as this color code is same for all the button. No need to formulate it. Alright, so this one is our first button. Now if I run it right now we can see this thing is here in the national news and the four for this one, we don't have any texts as of now. Therefore, we cannot see any takes chair. So let me add, oh, let me edit text here. So child is going to be that text. And inside this text we need to use these texts. So what did our average age about local news? So we can add these, we can add this local means, the local news and we must need to customize it. So add these one. I'm sorry. So add this one is titled. The style is going to be like Sister and font size. We need to use malloc and color as all colors is going to be colored. White. Colors white. Now we need to wrap this text with these align, align widget and this container element and alignment is going to be this element two dot, so element dot center. Now if I run it, we might see our text in. Our text is in center, even we can scroll it. Okay, now let me add the second button. So before entering the second button in here, though, before adding the second button in here, we must need to use the size box. So such books and why it is going to be 5. After this size box, I am likely to add after decides books, I am likely to add another expanded and inside this expanded to need to use flex. Flex is one. Giant is going to be the container. And inside this container we need to use the height of over button, that is a 100. And after that, needed to add, the decoration contains mailbox decoration. And the same color we need to add here. So I'm going to copy this color from here. So color and border-radius, border-radius, circular is going to be 15. Now if I run it, we see this button is here, but it's still, we can't, but we don't have any text. So we need to edit text here inside this container. Charlie's going to be the text. Charlie's going to text. And in yellow we need to use these politics. We need to use your politics then. And it is this politics news. And it started is going to be a star, is going to be the text Mr. Davidson has gone to the farm size is going to be a 19-22 0 and color is going to be colored. Life's going to the colors dot white. No, run it. Okay, now we need to add our element here. We need to add our element here. So for editing the Alan men who need to use these element keyword, lemon keyword is going to be alignment to center. Though alignment dot center. And this is what we need to tear. So all is done. So I think our first homepage is done. So this is our homepage to what we had to add in our application. We have already added it here. We are all done with our home-based. Even Again, we have done these DDOS space, the slider, and this button. Now in the next part, we will have to complete a when users click this button, we'll send them to each and every news, news of tion where they will be able to read these, all of the, all of the news and Galleria soil. And when they will click in this View Details button, we will send them to the detail space where they will be able to shoot all of these thing. Alright. So let me explain each one more time so that you guys can understand everything. I do not want to travel you. Alright? So we have to now inside this container, so this is our main tart container that is containing these whole data where I added this margin as insert all eight. That means it is creating margin from all the sides, from the left, from the top, bottom, and the right side as well. And height is 300. He's still, it has some height. And then added the column because this one is fast column with containing these two button and this one is going into battle. And as we have added, as I have added color here. Now we can use container to container. Okay? So this first container designs fast container inside this column. And this fast continent is containing this whole data, these 21 international news and they pushed new. And inside this fast container. I added. That is can we take an i take health from this expended to divide the weight of our button if you want, you can do it minimally, but Dow best way is to use the expanded because it will automatically take the, this according to that device says, okay, maybe, maybe the size of Android and size of the MLA to diverge. So in that case, this expanded will help us a lot. In that case, this expanded will help us a lot. No doubt our decisional knowledge and insight is expanded and these flakes is created and a space then adding the container and height. And this a 100100 height is for this button height. And as well as we have added this declaration box decoration to round these embedding. And then adding these LNG to add this text in the center. Then, as Alice takes the same thing for each and every expended. Alright, and so this one and other container and other show expanded and expanded. Okay, so this is what I wanted to show you in this spot and in our next part will end. In our next part we will move to the move to the digital space, okay, for each and every news item. 15. Create View and Controller File Part 14: Hello my dear students. Welcome back once again. So interruptive as part, we have completed all of your bottom section, but right now we do not have any other any other file to redirect. So we have international news is supposed news, local news and politic news. So when we will click in this button, we should move to the next but next base. Therefore, we need to add for new file. Okay, so for that. So before jumping to the coding sexual, let me show you what we are going to build. Okay, so we have done this layout, this navigation rare, and these latest post and details. If I open this one, then we will see. So this one is let us post features that we have done in our, in our earlier videos. And now we need to move to complete all of this tree, tree you, okay? So when users click in this button, they will move to this dc way where, where they will see this international leaves and a gallery will, when they will go to this gallery, they will see all of the images. And when they will click in a few teachers button, they will move to that and this neater space. Okay, so for that, we need to at four new file. One is four-year national news for his post news, local news, and respectively for politics news as well. So for that first, I would love to create a new packages. We can call it Becky's. We can call it view. Alright. We'd need a few and we also need a controller to control all of our file. And does Pakistan is going to be controller. All shite. So first I would like to create the few file, somebody's dat file. And inside this view, we have a often called local news. Local. All. Alright, so this, so this one will be our endowed fund. So instead of adding all of the files inside these Bu directory, it'll be good if we create one more packets for each and every item. Because inside this local news will have bunch of options. Like we will have our international US and galleries and details, that decision. So for that we can set this local news. So this one is the Pakistan, and now we can send this file to this local Linux file. Ok, so it is not working. I think we have done a mistake. I am going to remove this one. Ok. So there's created again. Okay, so it should be view. So we can rename it here, refactor and machine M. And we can say that view. I can see this view, Sergei. And inside these views. It is better to remove fate. It is taking the previous one. Ok, so now the Becky's is going to be the fuels. So PO's and inside this view we need to use their doubtful and going to meet a local news. Local news. Okay. Alright, so now we need to add one more tart fall is going to be considered. Local. Local news and gallery. So local news gallery to doubtful. And now we can create a PEC is where we will say this local news. Okay? We need to add another package that guess name is sports news. Sports news. And we need to add politics news, politics news. When it four packages for four button. And another one is for internationally. Okay. So now I'm going to Jack and drove for these two file to the incentives. Local news, local inspectors, local news and discipline, and local news. Okay, we need to remove this one and local news gallery. Okay, so what I have done here, let me explain it again. So first I have created a package that its name is Views and Amazon is controller. So inside this cuz I have created another four packages and the Emmys, respectively, near miss international news, local news, politic mnemonics pushed news. And inside this local news, I have created two file that is called local all news. And this one B, this one, the space below, all nice where they will wear. Our user will be able to see all of the news and local news gallery. For local news, we have and we have an option that is called the gallery and gallery section. That means this one. And we also need to create a new file that is called that D just by. So for each and every frame, US News offshore, you'll have nice G5. So inside the spec is we will create these file. So now we need to create and doubtful or we can say local news details base, right? So our local news is done. Now let's move to the international news dot file and we can say international all news. We need to one more file that is international news and gallery. You should be w. And the last one is news international news post details. Ok. Alright, and our two is done. Now let's move to the politics news, where dq dot fall against cities. Politics, all news. And then the second one is politics Gallery. And the third one is politics. Does no, it's time to add, is pushed new. So doubtful is great to be. Poor. All use bush gallery and sparse data. Okay, so we have created all offer required fault dell that we have to add in our project. Okay, so let me extend it one more time. So I have created if becasue, that is views inside his views I have created of international news, local news, politic, new ns, put new speakers. And inside these, each and every phase I have edit 2.5a where we, where we will work so fast twenties international news. That will be our Lord where we will add all of our news like this email is title content view details and views. And for this one, for each and every item we have editing this tufa. Okay, now let's move on to the controller. So we will have four controller. This controller will help us to control our Deb bug, okay? So where we will add all of the step burn. So inside this will create for file, you can see the international news. So indonesia news to doubt fall. Then I'm going to add a sports sports news. Don't doubt fall. Then we will have to add politics names, politics, news. And we need to use these local news locally. So in this part, we have added to all of our Dutch fall that we need to add in our application. Okay, so I think that is enough for this patch. In our next part, we will start to working with our navigation drawer and depth. 16. Internationa news TabController Part 15: Hello my dear students. Welcome back once again. In our fevers part, we have added all of our request file that we need to have in our project now is time to jump into our coding section. Okay, so first we need to add our distemper in our application. Okay, so for hitting this tab bar, we need to go to this controller file. Inside this controller we have 451 is international news, local links, politics news and sports news. For each and every phylogeny, we must need to have a tab bar. Okay, so first move into the international news in year faster we will add to our Deb, ok. So for adding a jumper, the first unity and put our material dirt, import material data. Now we need to use our stateful widget and need to define our class name. So we can say that our class time is international. International news or right, justice container to scuffle to jet. Okay, so scuffle widget need to use our app for Apple is going to be the ABA. And inside is a bar. We need to define our, as. We can see, that there is international news. So for each and every file that will have to change the title. So the title is going to be a text. And text is going to be internationally. So we have added, so we have added our title that is text into national and we need to use international news. And after that, we need to define our background color, color, color is color, and we need to take the fellow, I'm sorry, x double f. And now we need to take the color from here. So I will use this color cough, I think is simpler. So you will not be able to use this UAN color course. So what you will have to do, you can simply write down this code like you would have put I don't discourse to 72 before eight. In order to get this, You're in this background color. Okay? Alright, so now our app, Belize city, after this background color, we will have to write tower, will have, will have to write the bottom. So this bottom keyword is important, is mandatory to add tab bar in our, Okay, so this bottom is going to be a tab bar. Okay? And it takes couple of parameter, one is deaths and another one is called controller. So for working with tab bar, we need to import, we need to take a health from a class. We need to take a health from a class and className is dead bark, tab bar controller, death controller, I'm sorry. And we need to create an instance of this class. You can say this or you can say this controller. And in here we need to add one q and it is called single ticker provider mixing. So make sure that you are adding this one. If you are not adding this one, you will get ear. Okay? And now we need to import our adjusted. And inside this inner state. We need to create a. So control is going to be new tab control. And in here, this step, this step controllers contains two parameters. One is length and another one is if you sing and just semicolon. So land, land thes We need to lend, let means we need one for this one and other one is in-gallery, okay, so, uh, length will be two. So this length is defined that how many deaf do you need in your replication? If unit three, you can select your chief in it, 40% have 456, whatever you want. Eternal depends on you. And we need to add her true the spacing. Ok. If i which single ticker? I think we have done a mistake here with single. It should be worked here. The argument Boolean cannot pass in the parameter. It should be working with this way. So, okay, if there's any problem, then we will solve it letter and after that we need to use and dispose. Well, we also need to write this query, also need to write def controller.js miss. So controller dot. Okay, it is required to, to add. So now in here inside this AB bar and inside this bottom temper, it takes couple of parameter. One is called controller and we need to write here. Controller will need to write here this controller that is called disk controller, okay, that we have created the instance of this tab controller. And it takes a parameter that is called tariffs or widget inside the steps of which we need to write all of our tests that we need to have in our application. And after that, we need to use defind like integrator color. And we can see these colors dot. We can say colors dot, blue and gray color and indicator of weight. Indicator wait 5. Okay. Alright, so jabber and now inside the steps icon, we need to add to all of our, all of our tests icon. So for aiding this thing, first we need to import all of our. So first we need to import all of our files that we want to show. So in this international news, we want to show. These international news and international galleries. Ok, so we need to import distinct here. So we can say here, import, import packages, flutter, abuse, and after disputes, we need to use international news. And I need to use this International New International, honest. And another one is import. Becky's flutter, fuse and international news and international news gallery. And international news and international news. I'm sorry, international news singularity. Okay, so international news and gallery. And after each and every packet we need to add, as we can say, it like it like a variable. We need to add a instance of each n for each and every packets. Or we can set the variable and whatever you want. You can say all news. And this one is put as some Gallery. So we will have to use this old news and all Gallery inside our deaf controller. Okay? So remember that you were adding these old news and gallery. Now after this, we need to reject our body where we will use depth controller, not defcon tonight is called tab bar view and it takes two parameters. One is children and another one is controller. And controller is going to be our controller. This controller is our controller, alright? And upper disk controller on it to actually let off widget. In here, we will have to, now, using this, isn't this all news and gallery, we will be able to access all of the class name, okay? That in all of the glass them here. But right now we do not have any clause inside this international news. Okay, so we need to add our class now here, import material DOD. And if you add stateful widget. And in here we can say this, international news. Okay? Alright. And for international gallery we can say important materials chart and need to add heuristic for widget. And we can say this international news and gallery. Ok, so now inside this, now go back to this international news controller where we're adding our temper. So nobody is going to be the, we can say that all news. See this only dot now we can use. Now we can access this class. There is colder international news, okay? And for Gallery, we can see international news and gallery. Okay? So that is why we have added this. This. As all news and ask gallery after after the fact isn't M. Okay, so let me explain it one more time. What we have done here is very easy guys. There's very easy. So fast 20 to import our Becky's Nim where our file is, look at it. And I felt that we need to take a health from our TAP controller, that is called f controller. And I put that wanted to use this inital state and inside this initial state owner to define our TAP controllers, the controller is going to a new tough controller where we need to define our land T2 and if using two, ok. We also need to use this disposed to where we need to use our controller dot and dispose. And inside there were scuffled widget. We have added a simple Akbar where a bird contains a title background. And if we want to add a tab bar, we need to take help from this bottom keyword. Therefore, I have added this bottom keyword and this bottom keep. Bottom property contains the depth. And inside this temple field, we need to add this controller and indicative color in the gutter width. It means the how our color will look for our indicator and integral wit. And inside the stairs, I forget to add our deaf. Okay, so we need to add here our delegates. There is new depth into it contained one icon. Icon is going to be the icon and it's going to be the icons, icons dot. We can say that. What you can say, that we can say this had length, whatever it is. And second parameter, continent takes text is going to be, again said that international news. Okay, and we need to add another one. New Dev. Dev is going to be the David's going to dipole. Icon is going to be the icon. Where do we need to use? Icons? Taught what I can say. We can say this. Ms. Okay, it'll be good as a just gallery and need to add that takes text is going to be done. And gallery. Right, so we are getting an error. Let me as you MOOC distinct previously, it was here, it was required may be they have updated their system. No, it is not. It is not working. Single ticker for modern maximum int. Okay, just live it, what it is. If we need to update it, we will update it. No problem for that. But if we run it, we will not be able to move to this international news ok. And because we have not added any clique of Sean inside these international news. So now go back to this. Now go back to this home dot dot, where we have added all of our button. So we need to find out where is our, where is our international news? So this one is our international news. Okay, so go through this home-based and find out where he saw International takes ok. And this text is that this takes, and now we need to add it clickable. We cannot directly add click off shown in these texts. So therefore we need to wrap in this text with another widget and Just click on the text icon. In the left side, you will be able to see yourself icon and then add energy gap with new whichever Vietnamese in Cowell. Okay? And in this END coil helps us to add on dev option. Okay? So and if option. So now when user will click this button, we will send them to this controller where we have add-in that temperature. And therefore we need to add this package name in this file. So how can we add edge? So you can go through this wave. Import is flatter and is going to be in earnest. Okay, I'm sorry. First we need to go to this controller. And I put this controller, we have it internet. I'll try it. Now we can access this thing from here. Where we were. I think we were over here a little bit more down. Okay, so we were here. Now we need to add our neighborhood. And then we get to a god of that contain a context. Context dot push, pushes code to with our new material best shout context. And in here we need to use this international news. Okay? Let me former discourse to control on ultra El Corte is formatted perfectly. C, we need to use dishonor, navigated of AF contest, push new medical best route to build contexts and international news. We are getting these international news from here because we have added this thing. Because we have added, we have imported this spec is in here. Now if I run this application, hopefully we'll be able to move to this international news. Now if I click to this international news and we got an era. Ok. So the problem is that this depth controller lend to, and if you sync to disease getting the problem document to dicker provider, Okay. So as it was showing the error, so therefore we are getting this thing. So can I remove this one here? Alright, so now I think we can remove it to missing his regret if fishing is repaired and why it is not working. You see later scaling problem, previously in this problem was not happened. So click here and again it is giving this. Okay, so let me check. What is the reason we are getting the zeros. All right, so I team. Let me find out what acellular here. If I hover over my mouse over here, then it shows that the argument I boolean cannot be assigned to the pediment epileptic and for omega. So it means that instead of using true, we should add here that this C, You don't have gone. Now it should work perfectly. Let me, let me run it again. Okay, so here is our replication till now would not have any Eudora replication. Now if I click here, here we go. Now we are here and we can go down here, c. And we can scroll down, scroll down, and scroll down. Okay, so now we can go to this international news. As far as we can go to this gallery, we can go to this international news and, and Gallienus, so does sim, where we will also have to add all of the tin for sports news, local news and politics news. I think is enough for this part. I will come off with more failures in next part. 17. LocalNews Tab Controller Part 16: Hello my dear students. Welcome back once again. Now in this part, we'll our work with our sports news. You know what we've asked part. We walk to it to international news. So we have successfully added tower jabber for international news, news and in-gallery. Okay, now it's time to add your stamp to work with local lives. Okay, it's the same thing we need to hear. The first we need to import our Material dot so important managerial Dodge and start following it. We always need to work in and inside of this is that for Widget, because it gives us an opportunity to take action with our each and every widget. Now, age is going to be the local news. Chance, the container, container to scuffle widget. Okay, so before jumping into the main coding, sexual, Let me add all of the packages here. So Becky's just flat out this term. We will work with local news rate. So therefore we need to add to our local owners and local and local Ollie's. So fast today to go to these views directory. After this fields, we need to go to this local news, local news and local news and local newsletters, local news owners. And as you can say. All right. Okay. So import Becky's flutter, fuse and upper disputes when you could use this local local news. And inside this local news, we have a file that is called local news gallery. Again, say it as Gallery. So we have added our two input file, not inside this scaffold, which add, we need to add our app bar, right? Everybody's going to be a bird. It's a dessert bar. We should add our title so that we can see our best. I don't take it, it's going to be local news. Again, we need to use our background color. And background color is going to be the color. I think we need to send men grid color for each and every, every temper. So therefore, I'm going to this international news controller where we have added tower background color. So I'm going to copy this color code from here. Again, the same color. Ok, so we have added our background color, not your stamp. To add our bottom, we need to add this bottom two. Work with Deborah and it contains two parameter. One is depths, non-actual. Two, it takes a bunch of parameters so fast to create an instance of what damper controller over here, I'm going to add our tab bar controller. So Deborah controller is going to, with a controller that something is innate estate investors inside this init. Instead, we need to add our controller and controller is going to be the new dab controller. And land is going to do an MVC is going to be this. For that, we need to. Add these weak single daycare provider instead m6 min, okay? And it is asking for a semicolon, okay, let's give it a semicolon. And now we need to add our dispense and dispose. It is important to dispose our deaf of taking each and every action. So Controller is going to be done dispose. Alright, so we are done with all this functionality. Now let's move on to this session. In unit two, it takes a controller and controller is going to be the controller. And controller we need to add to our indicator of color. And you're gonna color is going to be that colors total_weight, colors to2, it collapsed dot blue-gray. So this color is this color, okay? See, in this color, okay? And which indicative wedges. And this 5 is four and the weight of this integral color, okay? And it takes a mandatory, mandatory parameter that is called Tips for widget and incentive budget. We need to add our all of the deaf. So we can say this. We can satisfy depth and it contains parameter fast twenties icon. Icon isn't going to be. So icon is going to be Icons and taught. You had lain. And text is going to be local news. And after that, we need to add, okay, so we have done a mistake here. We need to use this icon is going to be the icon. And inside this icon, we need to add this and constant dot. If you had line. Now it should work perfectly. And other dev is going to be that deaf and is going to be icon. Icon is going to be icon. Icons dot images. And text is going to be Gallery. So our Egbert bar upper part is done. Now let's move on to that body section. Body is going to be that temper few. Body is going to be the damned birth body is going to be this deborah few. And inside the standby fuel, it takes two parameter. One is called controller. And the controller is our controller. That is the instance of what damp controller over here. And it take a children of widget inside the channel widget we need to take health of our I haven't yet. Yes, I added. So all news dot. Ok. So do not have any classes inside our local orderings and local galleries, and therefore, we need to add this year. So fast import is material dad. And as the stateful widget against it is local news. Local news. Giovanni is going to be that is CAFO to which it is scuffle legit. Inside the scuffle logic, we will have to add all of the code. And it's going to local honest gallery. Import is going to be the managerial tart. And instead for legit is going, is tit for logit, local news, local news and Gallery. Alright. So too has done, now is template, local owners. Local owners. Now we can access this file from here. And for the gallery, it will give us the class name that is local all news gallery. So we are done with this part. Let me follow me that quote. If there is any year, obviously living alone has been formatted with. If we do not know how to format your Android Studio code, just press control chart L, then it'll ferment. You're caught in a right way. Okay? So now, if I do watch a lot, we will not be able to go to this local news because we have not, we have not added our Gleick of shown in this local news. So go to this home dot Dart and update this international, international news. We have the is pushed news and after this, this portion as we have it locally. So in here we need dad or so before that, we need to import our controller here. So import is going to be the flutter Peck is, so clutter. Deck is flutter end's going to be the controller and local news. And look on, Let me add all of the code, all of that file, and we will have to add the politics news as well. So import, import flutter and controller and politics news. Import letter is going to be the controller and it's going to either push news. Ok. So now go back here. So in this part I want to add all of the click event for each and every, for each and every button. So we have international news. We have adage. It. Now it's time to add in a sports news. So click on the text and the left side of both icon and sharp with new widget. And we can say integral. And it contains the entrepreneur buddy. And inside did onset property when it dress navigator dot of context dot Bush is going to be the new material best shout and you only use the context. And integral we need to use is Porsche news for it's a class name of this one. So we do not have any class for inside it is post news. Okay, so go back to this soil inside this controller and go to these sports news and a class. So import is going to be Material dot. And at a stateful widget, we can say sports news is pushed news. Alright, now, same thing for politics news. So import material, judge. And to add a stateful widget here. And this one is going to be our Olympics News. Alright. So again, and go back to this home.html. Now I think we should see is pushed news control until all. Then it will give us the formatted. So it's Porsche News. And I'm going to add these local news here. And Jap, wait, wait, inkwell and rapid with inkwell. And in here when it is on depth and here inside his own death, we need to use this navigator dot of context dot push is going to be the new material pays shout. And we do use this. Context is fun. It's going to be the local names, right? And we have another one that is for politics needs the same thing we need to do with the politics news through rapid with Egypt. And it's going to be the inkwell and it continues on to properly do add, eat glucose. Inside this onto f, we need to use these navigator dot dot push is going to be the new material best shout. Context is going to be done. Politics news. I'll shut. So we are almost done. So we have had it. Click event option for each and every button again now if I do hoBshare lot. Okay, so for international news we have had at the stepper. Now it is working perfectly for local news. We have added this, Debra, it is working perfectly. But for a sports news, our click event is working, but we do not have any data. Therefore we can see this black screen and for politics names, this click event is working, but we cannot see any data because we have not added any data yet. So I think that is enough for this part. I will continue with it. So that is enough for this part. I will come up with new features in the next part. 18. Sports News Tab Controller Part 17: Hello my dear students. Welcome back once again, in our favor as part, we have completed temper options for international news and for local news. Okay, so now in this part we will complete this is post news and these localness. Okay? Alright, so we are done with this home part and local news is condon. Ok, so now it's time to work with work with what we have done with our international and local news. Now time to work with is pushed news. Okay, so this is our container. And inside this container, fast need to remove this container and add these as CAFO jet. So inside the scuffle budget, we need to use our app bar and bar is going to be dow f bar. And it contains a title that I'm sorry, that it is going to be text. Text. And in here we can see this is portion used as bush news. Okay, and now we need to add a background color. So as we need semicolon color, so can, so that, so now we can copy this. We're gonna collect from our international news. And inside this app bar, we need to use these important to work with tapper. And the stepper contains two parameter not to actually, it takes a couple of more parameters. Before that. Inside these sports news, we need to create an instance of our tab bar controller. So temperature controller is going to be the controller. And we need to use these industries. So we single ticket forwarder first, Anytus debt and inside DC needed state, we need to use these. And inside this unit is test. We would need to use, what do I need to use? We need to create a unit to use. Our controller is going to be the new controller. Knew deaf controller land is going to be the two and we are seeing is going to be the this. All right. So now we need to add these nice pause here. And just need to use the controller control vouchers and dispose case. So we have added these innate estate and these dispose this controller and is disposed. Okay, now we're ready to go now inside this bottom tab bar controller, and we need to use the Stef controller that is required and upper debt, we need to use our indicator width, that is 5, or you can choose more or less whatever you want. And last but not least, we need to use our indicator color, I'm sorry. So integral to color is going to be Colors. Colors dot blue-gray. And I'm going to add this depths, which is important. So inside this tab widget, this is the place where we define what icon and text we're going to show in our temper. Ok, so it take it Deaf. First element that is icon. Icon is going to be these icon. And inside this icon we need to use our icons so I can start. You add lime. And it takes a, another anti takes a text and this is going to, again said is is portioning is Porsche news. And the second tip is going to be our second tip is going to be our in-gallery option is like going is going to be these icons. So icons dot EMS, and text is gonna be Gallery. Alright, so we're ready to go. So if I am not shown, it should work. Here you go. Okay, our temporaries working, but we cannot call it lucky you cannot move with these silicate. And the reason is that we have not added our body here. And we have no to add it to our what? We have not edit our class name here. So for a spores, for a sports news. So we are done with Indonesia news and local news and for his Porsche news we have created or the file but who do not have any data here. So we need to peer class here. So first wanting to use Material dot and add instead for which we can say, suppose all news and the same thing for resource gallery. Import is going to be much all touch and need to add a stateful widget. We can say that a spores and Gallery. Alright, now we're done. Now come back here in, inside these sports news. Now we need to import our class them here, screened porch, flutter. And then I need to use these views. And inside these views we have another effect here that is CO is forced news and inside is post news. We have our sports news. All news. And as you can say, all news. Tried to use camelCase. What? It looks good. Import Becky's back is flutter views and It's Porsche News and the sun are going to be S for single lidar Dart as Gallery. Okay. Now, we need to import our body. Body contain a temper. Temper if you not ten by these temporaries knitting Sita were at barn, but instead are a body if you want to show our data inside in a voting and we need to use the stepper view. Each contains two parameters. One is our controller, that is the instance of our controller, okay? And our children up widget. And now in here we need to take help from this object. That is, as it is all news dot sports news. I'm sorry. And now we need to use gallery, dispersed gallery. Okay, so if I'm not shown this time, we should replace, we should stop it again. Okay. It is working perfectly, guys 80, so working perfectly. So our resident who had done right. So that is enough for this part. I will come off new videos in the next lecture. 19. Politics News Tab Controller Part 18: Hello my dear students. Welcome back once again. So in this part, we have, in the previous part, we have finished our international news is post news and local news. Deborah Johnson. In this part, I'm going to show you how to work with politics news. So for that, first, go to this politics news inside this impute decades, where we have added a tree classes. From this cheek classes. We're going to work with politics openings and polish scullery. So we do not have any class name over here. So therefore I'm going to add this class year. So fast, need to add this material, judge, and add a stateful widget. Alright, and anywhere we need to define our class them, I think we can say, bully takes news here and just remove this content out to scaffold widget. Or we can jazzy letter. No problem. Ok, and the same thing for politics and gallery. Import material damage and its neutral legit. And I guess it is politics and gallery. So remove this container and had a scuffle judge, inside this scaffold widget we need to add. So we have added distance. Now go back to this controller and inside this controller and go to this politics needs to attach anywhere. We need to add our tab. For that. First need to add this particular importance. All of these classes that we want to add in a temper. So flutter. Use app.use views. We need to go through this. Politics namespace, politics news, Becky's and appendix politic newspapers. We have politics. I'm sorry, not politics needs to detail. And it is going to politicians at a gallery and we can call it as, I'm sorry, apprentice clone. We'd do use this as a gallery. Now when you import becuase of flutter and we can set these bills and politics news and after attach our Bellamy's politics news. Not that details news is going to be this. Where is the name of this team? It should be Gallery, right? Politics, politics, news too. And this one is politics new study gallery. Politics, news dot olives. Our site up and he says we need to use all news. Okay, so now we need to remove this container and we need to add our scuffle widget and inside you scaffold, which it will have to add all of the code that we need to have. So first need to define the adverse party screamed over damper and he's added up barometer. That idea that it is going to, the text and text is going to be done. Instead is Poli takes after that need to use the background color. So go to this international news where we have added or background color as we need some background color. So I can compute from that file and now need to use our so before adding this proton, let me create fast the controller. So depth controller is going to be the controller. And inside this inner state, we need to add our controller. Untold is going to be the new deaf controller. And you find the land to and the singable is going to be at this. And in here we need to add with single ticker provider. So we're almost done here and come here. And inside this app bar, we need to use this bottom that contain these temper and this tempeh takes couple of parameters and the mandatory is depth dot now and another one is a controller. We need to define our controller here. And we also need to add inhibitor color. Color is going to be these colors, dot and blue-gray. And last but not least, we need to add here individual wet at 0. And the depth and insight is Deb widget. We need to define our deaf icon and text. It contains the stuff. So Dave is going to be this icon, icon is going to be this icon colour. So icon, and it contains these icons. So icons dot. If you've had length and text is gonna be our politics names, politics, news. And under tab when you to use, and this is going to be our icon. Icon is going to be this icon. And in here we need to use these icons. Dot view had claimed, I'm sorry, not few had lent. It should be the image and that text is going to be our gallery. So we are almost done. Now let's move into who or what is the value we need to add our temper view. This temporary few contain two parameters. One is children and another one is so Controller is going to be this controller. And what I can say, this one is children. And in here, we need to add our children. It means we need to add our className. What class we want to show inside our debit body so fast and we're gonna show all news dot politics news that we have created inside this, this file here. And our gallery, and galleries can be politics news gallery. Right? Now if I run it, it should work if I'm not wrong. So now if I click on this post news, so it is working is pushed news and gallery. And if I click on politics news, it is also working. And if I worked for international news is also working. And if I want the local news, it is also working. So it seems we have done all of the words for each and every field. Now in our next part, we'll start adding data in our international news filled and the gallery news thought, Okay, so their seat for this part. It has a become a longer videos. Therefore, I'm thinking that I should stop this video here and we will continue with our next. But thank you so much. 20. Internationl news FirestoreFunction Part 19: Hello my dear students, welcome back once again. So we have completed all of this tab bar options now is time to add data in our UA. Okay? So in this part, I'm going, I started working with this international news where we will have to get all of this data from our from our faster. So as of now we have only one collection that is let us post collection and dishonest, disposed to gain and nothing else. And now when you do work for international news and need to work for a sports news, local news and politics news. Alright, so if we look at these images like that, you will see that we have for us that we will have to tack from our first tour. Then we have a title, we have a content, we have the number of views and disputed as buttons. So when you click in disability Bhutan, they will move to this posterior space where they will be able to read the whole post. Okay, so let's get started. So first we need to copy that background color. Okay, so first we need to work. So we have finished our work with this. We are getting an error inside this politics. I don't know where we are getting is an OK. So we have not added semicolon here. So we do not have any task in our controller because this controller is controlling our temper that we have finished in our last part. Alright, so now we need to work inside this international news and inside this international onlys fall in order to get all of this data in here. So for working with this Fest 20 to import our required fires to file, can say Import flood fire stir that you already added. Two, we have installed viral story in our application, in our project, and we also need to import our Dutch. Okay, so here is some R. And now in this part I'm going to show you something special, like in our latest post, what is home? I have I have shown you that to get data from Firebase server this way using esteem subscription, list documented collection effort. And this is the only one-way and there is a couple of other swear to get data from Forrester. And in this part, I'm going to show you the defendant will defend with to get data from fire thyristor. And this one is, this one will be done best way. Ok? So therefore I think, therefore I am thinking to show you this width. Ok. So go to this international news. And now in here, first, let me add that firestorm so fast you need to use this feature. Okay, so now we need to use this and get all, both. Just create a class here. Alright. Okay, so feature and get on post. And it must be a sink. Okay, now inside this file, so what I'm doing here, I'm just creating a new function or new method, whatever you wanted to say, both of them are correct. So let's say the function. So we are, I have created a function that is the type of future and that function name is get all post. You can add your own name. And inside this function, I'm going to use, I'm going to write all of the functionality for thyristor. So fast to create a variable so far because Ferris told it will contain these fires store files dot-dot incidence. This is the first line of code that we need to have and not wanting to take help from this firestorm. Okay, so for that flattering, to do where to create, when to add query snapshot. And it is going to be the stub is cannot be equal to width. Now we need to use this firestorm dot collection in your unit to add our collection M. We can see this. We can say enter national. All news. Okay. And dot get documents right. Now let me former discord control entre L. Okay, so good snapshot, snapshot a wet know this fire strategic or instance over fivers, Firestone instance, that collection in your unidimensional, our collection in whatever we want, and then add this ghetto commerce. And now we need to return our snapshot. So written our snap dot documents, make sure that you're editing this document, okay, so our functionality is done using this only three line. Of course, we will be able to get data from a server, how cool it is. Okay, so our fun future functionality is done. Alright, now inside this scaffold, which at, so now we need to write our scaffold widget. And inside the scuffle legit in here, we do not need to add any Uber as we are, as we have this embryo here. So we do not need to use any upper, we can direct. It started working with bodyfat. And now in here, I need to take health from this feature builder. Ok. So previously for our lattice, but we were using with extreme subscription. And in the spot, I'm going to show you how to use this feature Rhonda to get data from files to end this on then best, best ways. Okay? And it takes two parameters. One is feature and this feature contents in this feature method that we have created and where we have added all of our record functionality to get data from Firestone. Therefore, we need to add it here. Our method name is function Emmys, get, get all post, right. Sorry. So wanted to copy this one, GET or post. All right. So we're getting an ear over here. And the reason is that I have added this function inside this international news, but it should be have insect this international news that ok. So therefore we are getting this era. Now. I'm going to guard this function from here and paste it here. Now it should work perfectly. See this Edo has gone. Now this was no, let me explain it one thing. So what I have done it. So inside this international news exists. Inside this, we need to use this feature builder, this future function that is called Ghetto post. And inside these GET or post function, we need to get all of our required functionality to get data from firestorm. And inside these scaffolds yet we need to add body as we have all the d, our tab bar. Therefore, we do not need to use any upper. And after this feature takes a builder and it contains two parameter foster. One is context, and the second parameter is our snapshot. Okay? You can add any name, whatever you want here, and add this curly brace and inside this curly brace to be formal discord here. And inside this curly brace. Okay, so body feature folder. And inside this kind of risk, we need to add all of the functionality. So first, we need to photo need to do, first we need to add a condition here. We need to make sure that. So if snapshot dot data dot, snapshotted punishment instead, Calico connection instead dot unwitting. It means if we do not have any data, it means if snapshot conditioning studies waiting, that means if we do not have any data, in that case, we will show them our message that data is loaning. Ok. Return is going to be, you can say center to the center text. Inside the center, i'd, I did. Giant child is going to be a taste and a data loading and, and modify it a little bit more. Say, style is going to predict their style and font size is going to be 18 sudo. And as I'll change, the color, color is going to be colored white. So colors, colors, dots, white. So this is our center. I need to wear tear semicolon over here. So if snapshot that connection instead ecological connection is centered waiting, it means if we do not have any data, then we'll show them that data is loaded once and once data we load it, then we will show them else. And inside this else condition, we will have to write our functionality that what we are going to show. Let me run this one fast. Okay, so if I go here and then in here we will see this written new container wide 0, height 0. So future bulldog dynamic, which I will again. So this is giving us a lot of, you know, the reason. Instead, we do not have any data frightened and therefore we are getting this year. So let me explain it one more time. What do we have done so far in here? So first, we need to create a feature or functionality function, that name that I have given them east and get old post and only do the async keyword Firestone viral Solar instance. So corridor snapshot is going to be snapshotted wet files to that collection and get documents and we need to return our snapshot. So it returns snapshot document. Now add decisions order over here and need to use this feature and add these bills snapshot. Now we just edited condition here. And after that in here, we will have to write all over where you could function on D, what we want to add here. Okay? So I think that is enough for this part. You know, we're next part. We will continue with this project. Thank you. 21. RefreshIndicator and ExtraFeatures Part 20: Hello, my name is, students are welcome back once again. Now in this part, I'm going to show you how. I'm going to show you. So I'm gonna show you how can we add these flutter slighter wall decades in our project. Okay, so we're going to add this, this packaging replication and we will implement it in here. So when you will move to this base is removed to the space when they will swipe left or right. And we will show them this level action and so that they can take any action. Ok, it is very easy to implement. So you just need to go to this pub doc deaf folder, deaf site and just tried to flutters liveable. Okay, then you will be here, and in here you will be able to find out all of the instructions. So first we need to add these dependencies here. So flutter spider would abundances. So copy it here and go to these buffers per dollar YML file and upload this curse old Pro just added here. Right? Now, go back to this file here and flutter and 20 to use flutter packets gates in order to get the in-order to install this Becky's in our project. If we can see 0, it means we do not have any ears. And this PEC is, has successfully installed in our application. Now we need to import this package here and add it here. All right, so we're almost ready to go. Okay, so we will take help from here if we need. So in this documentation, they have written everything, whatever they had to write to extend. What we are going to get from this back is OK. OK. So now let's move on here when we will need it to you that it here. So last part, we have added our future builder, our if condition and our ILS condition. And now inside this else condition passed only to add a refresh indicator so that our user can refresh this new data and they can see the new debt okay, for aiding in our efficiently catered to written is going to be the refresh indicator. And the indicator. And remember that we need to wrap this refresh indicator with all of the data. Ok, so it means first we need to add a refreshing the ghetto. And inside this if indicator, whatever we will write here, it will be able to refresh, okay, therefore, we need to return this if indicator and inside this if Indiegogo to you at all list per pillar to get our data from thyristor. So now it shows that it, that that parameter child is required and that parameter on refreshes frequent. It means it takes two required. Two parameter. One is on refresh. It means how long we want to refresh and what we want to refresh, okay, therefore, we need to create a file. We need to create not file, we need to create a function. So in here. We had to create a feature. We can say it null. And we can say dysfunction lemons on refresh. You can see any name, whatever you want. Right now in here we need to use SE. Okay, so to add these refreshing Ecuador here, first 22's this async, then add your wet and future. Future don't delight. And if you look at this thing, you will be able to see the diffuser DO delight. It contained the duration, duration that yeah, so delight in here who need create duration and nuclear the second, we can say that three seconds. Okay? So now the question is that what does it means? It means when we will refresh this indicator, it will take against to refresh our whole data. Now after that, we need to add our set listed here. And inside the steady-state, we need to add our, our functional like hist function. We want to refresh, We going to refresh this and get on post that contains all of our Firestone deltas. Okay, therefore we need to, I'm going to add these Nim cube. So ghetto post, it means whatever. It'll find inside this ghetto post that is containing all of our data that we will get from a firestorm. It will refresh and now come here inside it on fresh or need to add our method name called on refresh that we have added here. Alright. And now it takes another parameter that is called challenge. And inside discharge we need to use our ListView dot will lead to get our data. Now you already know this thing. How are things working here? So this q-dot builder, so it contains two parameter, one item count, that is going to be our snapshot, dot data, dot lead. Okay, and it takes another permanent, it is called item builder. And it contains two parameters. One is contexts and adolescent, index nitinol position. Right? Now let me formulate the court control to L. Okay. So now, before jumping to our more details coding sections, let me clarify. If fitting, what would I have done here so that you guys can clear it very slowly, so fast inside his body. I added a feature builder and this teacher will there contains two parameters. One is future and other one is inverter. And this feature is containing this in GET or post, where we added all of the functionalities that we need to we should have in order to get data from plugged firestorm. Ok, now this get o post your future. It means from this ghetto post or taking help from this ket o post, we're going to get our data. And it contained a builder and it contains this context and the snapshot. In here you can name it any name you want. Now, we added, now I added a simple condition so that we can show our users test. Data is loading. So snapshotted connection instead, ecological condition instead of waiting, it means if your data has not arrived, it arrived yet. It means it is loading. Sometimes. It depends on the internet connection. And therefore I have added here this end data loading rather than showing a blank screen. And ILS, if data is already in our application, then we show them our data. Therefore, I added here a refresh indicator. Once did ice here if they want to refresh that data so that they can see distinct. For adding a refresh indicator, we need to distribute any ketotic two parameter. One is on refresh and other one is chunk. And this on refresh function is continuing this feature to delight and duration segments. It means that how long, how long dystrophin indicator will take two, or refresh that data. It will take three seconds if you want, you can increase it or either you can decrease it. Now suddenly is going to be that get out boast. So child is going through the list view dot builder, right? And inside this liquid are builder. Now we need to add our slight double, okay? And one thing that I need to mention it again so that it does connect clear, like if you are using refreshing togehter and make sure that you wrap efficient dictator with the all of the fear like this one should be, should be on the top because it will refresh only the data that he will get inside his insight is parameter or we can say this in this bracket, okay? So therefore, I added this refresh indicator. I am directly returning in this refresh and togehter. Right? Now, if we look at our slider will, then we will see a lot of instruction. We will find a lot of instruction here. Let me see what we can find out here. So it is saying that first we need to wrap distinct with slight double. After that we need to have actions, okay? Then we need to have the child, then we need to use deductions. Okay, so fast to need to wrap this thing with a slight double. So after these lists without builder, we need to use this slide level. We need to use return level inside the digital slant of all. We need to add a lot of things though. It is giving us show us there's the pedometer action punished regret and up NMDA challenges regret. It means it required, it required a two parameters. So first one is this one and they have a couple of other texts that we do not need to have replication. And therefore I'm not going to add to all of this thing as it is showing us that it needs that I'm in to action Ben and parameter challenge. So therefore I'm going to add these actions, okay? So actions, and inside these actions, right? So it takes and inside detection and it, it needs another. Then it is called Child. And inside the child. We will design our 22. Design All News UI Part 21: Hello my daily students to welcome back once again. So in the last part, I add edge and these actions and this icon style lectures. But as we do not have any data as of now, therefore, we are not able to see this thing. So now in the last part, I was here in Charles container. Now in this part, I'm going to add these UIC and I will try to get data from our server, LHC hamas we can get okay, so first so it's a discharged container inside this child container. First need to define the height. Hi, let's say a 170. We do not need to define any white. So these huddle with this height, okay, now what did, we should have a border-radius and background-color. So add a border-radius. So need to add declaration. Aggression is going to be the inbox decoration. And he said this doctor has shown you do squatter areas is going to be the border-radius touch circular. We can suggest pointed pseudo, And we also need to add our color. Color is going to really scholar 0, x double f. And Tony to copy this color. Good. This one, I think this is the similar to our bird or temper color. However, it is, you can just read it by yourself. It's a container and the coalition, right? So our height is standard, Christian is done. I think we also need to add a margin. So much in is going to be as instead all we can say 6, and that'll be good. Now we need to edit child and child. I'm going to add to shore. Shore is going to be the children of widget, not the question arrays is. Many of you may be wondering that why I'm going to add a row rather than using the column. And the reason is that if you look at our UI, we will see that we have a image. And after that we have these decks so we can divide it into two row, and first row will contain this one, this EMS and the singers role continuing this whole data. But again, therefore I am going to use row, okay? So now I'm going to use these expanded. This is the best way to divide a row or column and it will be responsible. It means that according to the diverse size, it'll take ESA space. No doubt our decision. So therefore, I always like to use expands and expands take two parameters. One is flakes and this flex one it means how, like, how will a homeless White We are going to add for this, but for this row item, and it is automatically select echoed into these fluxes. If you want, you can add here two g, 4-5-6, whatever you want. Now when you do adage and our child only be a gripper react. I amazing clipper reactive because this image has a rounded, it means we need to use water areas so there is an easier way to use proletariat that is called Deeper react. And it has a, by default a border-radius features. And it's going to be the water ridges are circular and I guess it is 15. Sudo. Alright, yes, Android. And now we need to add our childhood child is going to be this image.net. And then we need to take help of our snapshot. So the snapshot is our snapshot. This snapshot that we added here. So snapshot data, now we need to pass our index, position and dot data. We can set us. Right? So let me formatted. So expanded. Okay, now we need to define the weight of our expanded. And it will use the high disclaimed it with a 170. And don't forget to use this. It is going to be the boxplot delicate. Alright? And after this expended, emphasized works and mentioned on white to white is going to be a team 5. And this y into this weight will be this wide leg from this image to this content and see there's the fewest base, there's a few spaces. And that is just because of this sidewalks. Now this one is our fast expanded and we need to have an under expanded so that we can get all of this data expanded. And it contained the same thing. So flexible for this expanded, we need a little bit more space compared to these images. Therefore, I'm going to add two here. And child is going to be a scholar. And a column. Column is going to the children or widget. And the question is that why I am using column over here? If you look at this, you wait, we will see that we have one title. We have one Dido, and then we have one content, and then we also have this one and this one. So for this, it is all of the data are in a column. Therefore we need to use the air column. So column and inside this column, I would love to add to pedometer, foster one lake to container and fast continental content is 1 second continental content dishonor. We can directly use the decks. Whatever you want. I think it'll look, it'll be more more organized. And we can come in here the first container. First container, okay? And we will have to write your letter luggage. So inside this continent, we also need to add a child and is going to be this column. Column is going to the children up widget. And this column we need to have because we need to take this one and this one. And for, for this container, for this column is for the whole data like this one will be the first container and the cell with the second container. Inside this container. To use our digs and digs, it is going to be Nash showed data index. I'm going to add Dido. We need to, we need to customize it. So therefore we need to use the system. Okay, so I have been a mistake. It should be obtained this text. So it's going to be that Texas style and form size 90 and color color stood quite so. Colors dot white. It'll look good. No doubt about this issue. And after that, size boats and they can say this height. But when CEO and I'm sorry, after that, after this text, we also need to have another size was because we need to add our content here. So size box, height at 0. And text snapshot data is going to be the index dot data and content. Now we need to use, okay, so I have done a mistake here. I have used detail on it should be this one. I'm sorry for that. Dido. And it's going to the content and the style is going to without deck system. And insensitive instability is the firm size is going to do 19. And it has a color. Color is going to be the colors. Colors dot white. Instead of using these 19 for this content, we can choose tipping 0. Ok, so our these two parties done. Right? Now we need to work in here. So for that for do we need to do. So inside it's expanded, we need to add another container. So after this icebox, add another container. And inside this container will enter the child. Child is going to the shop and show has children of widget. But again, we need to add here row, because if we look at here and then we will see that in these days in a usual way. So this data is in a row. And in here we need to vote on it to add, we need to add fast container. I can comment out here is going to be the first container. And I'm going to add a second container. Second, second container. Alright? So fast container and the second container. First container and second kinda insight is fast container. We need to add a row again. Show and Chilean off widget. So a fast-growing ROIC, right, m is going to be our icon. Icon is going to be our icons dot Shimon, red-eye, and color is color. I think it is. And departments, if I'm not shown. Yeah, it is difference. Okay, so what performed it? So Icon galleries and dv icon. If we need to change the size of this icon, we will do with letter. And we need to have another option that is our 45 give few. So we will get this data from our server and therefore, we need to add heat here. So first airless icebox and white is 5. Dx dt is going to be the snapshot. And George data is going to be index dot data. And I can say fuse shouldn't change the color of this feels no, we should not chance dual burden molybdenum column, but we need to distinguish a distinct that is called fuse. All right, so our first container for this show is done. And so what this part is done. And now we need to add our second container. So containers, right? So this second container is containing a border-radius and takes together. So for that, we use the decoration, decoration, box decoration and INSEAD smokestack oceanic to age it. Border-radius. So border-radius start circular. You can say 20. And I mentioned the color colored, these colors dot blue-gray. And now need to add a child. Child is going to be the text. And you can see these few details. But just 4p monetise, it is muted us. And if you look at here, we will see this districts is inside this inside this round circles, so it is better to okay, I forget to change the text color. So it's tallies Texas style, font size, 20, galleries, dollar dot white. And now we need to use this text Ellen here and add alignment. Ellen main.xml. So I think we have finished all of our UI design. Now it's time to get the data from the server. So let me explain it again. What do we have done here so far? Okay, it seems we have written a lot of, lot of course, in one videos then I think this video is becoming longer and longer. Okay, let me explain a little bit more of the data. We'll stop this video and we'll continue it for the next video. So I'll put that in here. I added a container that can, in this continent is continuing this whole item for each and every item. And I define the height of this container. They did a 170 and added the decoration. And then edit the row. Because in here we can see it in tutorial that EMS and the sticks and uses the expanded did expended and give us the opportunity to defy our row and column in a responsive way. I'm seeing egoless person where there is only that. We are not mentioning here, white because it will automatically take each the weight according to that defy size. Therefore, I am using these expanded over here and added the gleeful react. I am, I used clipper react here because it gives and built-in border-radius offshores. Therefore, I am using eat, so it means it becomes my life easier because if I am not using this team, then I will have to design. I will have to use books, decorous, shown, decorate emails and many other things to learn this MS. Alright. No need to use this. Now edit this image.net and these image to attract attribute we need to use to get data from the server. It can be from your fighters tour or APA, or it can be anything but a very ok, then you find the height and white. After that, Nissan is another expanded and Flex is two. Because discontent sizes a little bit larger than the CMS. And define it into an added the column and first define it into two container and fast container is containing these tidal and discontent. So column texts have short index data title and it stylish. And for the content and the second contact lovable second container is containing this one and this one again. So container row inside this container added another show because these two bodies in a row, therefore I have added the strobe, okay? And added diagonal and change the color and change the color here. Alright, and the for the second container I just rounded, rounded view of this view details. So I think that is enough for this part. We will continue with our next. 23. GetData from Server Part 22: Welcome back guys. And inner profess part. We have designed all of our required UA and in this part is timed to get data from the server so fast on this project. And if I run it, now, our reputation is here. And if I go to this international news where we are working and now we can see our ear has gone, but we do not have any data over here. Now, if I pull it, then you'll see this pull to refresh. Indicator is showing here. Right now is still we need to solve a lot of options, okay? So no worries, we will solve one by one. So first we need to post our fast only to post some data over here, right? Okay, so for that, we need to copy our collections, our collection Emmys international news. I'm gonna copy this international news. So go back here and clicking is that collision it means we need to, we are going to create one more new collection, international news next and clicker in RTD. And we need to use the field and Dido and the Fenon fellow. So our first field is MS. So copy this emus and remember one thing that this field should be this semi splitting. If you miss, if you make any mistake to add that correctly spleen, Then you will call it the annual budget is not going to work for you. And I have already added edit couple of images in my file store that I have shown you in our prefers, but like when we were working on our latest post feature. Okay, so I'm gonna use the same images here. There is no o, there is no meanings to add new images here. As it takes it a bit more time, as it takes a bit more time. So I'm gonna click any of these images here. And in here we will find out, so in here. So in here, if I click any of these immensely, We'll see you may send peaking this file local shown and copy this. Not the file location. What should we do? Yeah, we need to click on File digger shown then access token and access token and media. So where is the download URL? I think this one is our download URL. Maybe they have a chance though. Title. So click on here is the location and pasted here. Add another field that is called title. Let me check if I am writing the same content. So title and I can say that we are hosting our reposting our very first news and next week to use our content and go to this Lauren, if somebody an idiot or whatever you want, for example, I am using these Lauren. Lauren, if some data they discovered field. We need to take care of the coverage. And the last one is fuse. And infuses this piece. I can say that 52 k is now safe k, So our data is here. Now we are in international news. As I said, that if we refresh our, our way, then our update data should come here. So if I refresh it here, pull to refresh. Then we should see our data here. Sherry Goal. Now guys see, we can see our post here, right? But it seems that our image is not a working here. I don't know where it is not working. I think we have done a mistake to copy our MAC. Well, let me check for anadromous KM, sorry that we should copy this Xist doc and guys nowadays tourists location, I should copy this clique to copy download URL. You get they have changed it. So click here and come here and I can edit it. And control a GMO and pasted here. And if I update it, okay, now if I refresh it again, pull to refresh it again, then it should come up. Now. K, I think it is taking a lot of time. Here we go. Finally, we can see our EMS. It means our pull to refresh is working perfectly and our data is coming from server. But it is look very awful. And if we look in this way, you will see, we will see this. This one is so good. Okay? But in here we can see is very messy. So we need to modify it, know what is first, we need to change the content. So if you look at here, we will see that maximum. We can see four-line for content and for one landfill for our title. It means we need to mention here how many how many lines our title is going to be and how many lines our content is gonna be. Okay, therefore, we need to use your apprentice title in here. We need to use maximum lines and for title I'm going to use makes him less than one. So after this title, comma used as maximum as one. And for our content I'm going to add maximum lines. How many lines it has in here, in here it has three. So I'm gonna choose shape. Now if I run it, it looks a little bit good, isn't it? Yes, it is. But still, it is looking fairly bad, guys. It is looking really bad. Okay. And I don't know, what should I do now? What do we need to do? Okay, so now we need to add a little bit more space from this content. So we need to use a little bit more space. So this one is our first container has finished here. Okay, so for a, so delta k, So this one, okay, So this continent is continuing our views and our views Tejas again. So this size box, so we need to use, I think it has a Huge amount of space. I think 20 will be good. Not 20. It takes a little bit more, maybe tardy. Right now, Tarde is fine. Now still we are facing, we are getting the 0 foster need to change the color of our 50 to confuse. So this views and this one is a text. And after this inherent, We need to customize it. So add a style. A style is going to be this deck system and font size 14 and calories. It colors, maybe colors. Colors dot luca, if I'm not wrong. Yes, the scholar is on blue-gray. Okay, so it looks little bit code, but this one, this beauty does is looking really awful. So, and the reason is that we have not added any space. Okay, first we need to add our view details in the right corner. Okay, so as we have used our row inside, inside this, okay, so this is continents or not in this row, we need to add industrial. You'll need to use gross excess element, gross axial and main.out. I'm sorry, not gross external moment. It should be many excellent man is going to be the meanings environmental space better. Now if I run it and hear it go. Our View Details is in a riot site and it has a little bit of space, the joining these two. Now. Now what should we do? Now? It's time to add bedding here. So inside this esto, we need to wrap it with some paintings of the context and add the bedding. Fading eight, I think now it looks good. And I think I have given a bit more bit more border-radius. So instead of using 2015, it will look good. Okay, now it is looking good, no doubt our decision. Okay. So it has a little bit, I think we need to take a little bit of marching from the right side. That will be good, isn't it? Yes, So therefore k, So from here we need to use a marching again said this. And I'm sorry, that much in so much indoors. As insert only, only ripe site. Reagan said that 5, I can add a bit more space. It'll look much better. It'll look much better. I'm sorry. We should use this one. So as we can see that our this one and this one is look perfect now is still, I am facing, I think that we should have a little bit of space for this title and for this content, okay? And it can increase a bit more size for this content. So where is our content? So our content and the font size is 1515 to 17. And we need to have a bit more space between these images and this whole content. Therefore, I am going to increase this white five to ten. Now, let's see how it looks. Yeah, now it's looking good. But we can edit bit more space between these two filled. So five at six, I think we need to decrease the font size for this content 16, and increase that font size of this Dido. Right? Now it looks good. I think we can take one more line here. Right? Country Take one more line here. Okay, I think it'll, it'll look bad if we add it. So it looks fairly good. Content too popular and is long. Okay, so I'm gonna change this color of this text of this fuel. So go back to here inside the views. And can I use the graphical? Yes, it is little bit good, but I use a white than how, how, how we do look. I think white is good. So I will still with white. Now back here. If I go here, I will not be will appeal to see because we have not walked here yet. But if I go to this international news, and here we go, see our refreshing decorators working perfectly. And to noun, the one thing is that, that I have not added it here, the background color. Okay? So we need to take the background color, so I'm going to copy this color code of the spectrum color. Okay? So companies color-code. And anywhere, we need to add these background-color. Anywhere in this file, like inside is a scuffle widget, not anywhere inside this scaffold widget, we can use this background color. So we can say background color to color x double f pasted here and just remove this hash again, or you can simply write 222240, Erica k. So it is taking a bit more time to load the data from the first term because now he didn't and dispute is not good and therefore, we're facing these issues and have it all good. Okay, in detail is learning. And we can see our image is here. I should check the emus Oxfam schemas of shows they tried. So immense. Heidi's under 17 and inbox declaration, whatever it is, 15. Okay, now one thing that if I swapped left, then we can see these archivists here showing. And now the question is that why we are showing this thing? We are. Now the question is why we are seeing these things? So we are seeing is these things. Do you remember that? At the beginning of our videos, when we started working here, we have added the slider bar lines are decidable. We're working all of distinct. Okay, and we added this icon, slight action archive. And therefore we are, we can see this option here if we want to add more options than we can add it, or if you want to chance the scholar capstone archive to delete or anything, whatever you want you can edit here. So first chance the color blue to difference and shine it. And you can see defaulted. Okay, then you will click, it'll remove. And it will be for each and every option, okay, in the next part, we will modify it and I will show you that. And another question is that if you want to add in the right side and what should we do? So for adding a live site, we need to use this secondary one. It has a property that is called secondary actions and insights widget we need to use the same line of code is so easy guys. Just need to run it. And if I swap it and then we will see this archive here. And this one is here. Let me change the gut takes to delete. Delete data is loading. Ok. I don't provide is taking a lot of times. If a serf, right? And I can see Dylan peak here and the set archives here. So if you want, you can modify it in your own waste. No doubt about there is no problem for this. Or if you want, you can change the icon, the lead icon. Okay, so in our next part, I will show you how can we, how can we perform this until adoption? And I think we don't need to have any options here. I just wanted to show you how can we add distinct here. And therefore, I added this one here. I think it'll be looked good rather than using the parentheses, if I use this blue-green k, o and after guys, that's it for this part, we will continue with from our Next button. 24. GetInternationalNews Post Part 23: Hello my day students and welcome back once again. So anywhere profess part we have added all of this functionality. So file. Now in this part I'm going to show you. So in this part I'm, I want to finish this part, I want to finish this international news options, okay? And then we will move to our gallery sections. Okay, so our refresh indicator is working perfectly. Just whenever we are refreshing about data is loading. And now I need to work with that to let functionality. It means if you want to delete this and data from this URL, and they can do it this way, and it has a bunch of features. So I'm going to show you all of the steam. Okay, so I think that we do not need to use these actions suggest as we are only working for the right side. Okay, so we can comment on it here. Okay? No.org, you can remove it here. Undefined names again. I am sorry. It should not be this way. Okay, it contained this whole data, so I should add it this way. Now it should work fine. Now if I run it, say dishonest working, but in this on the left side, it hasn't gone. Now, let us go to this. Becky's in here. We will find out a lot of a lot of instruction on how to use these things. So it has another, some other property to dismiss, to dismiss though, to dismiss that data and one of these gold. Okay. So if we want to dismiss our size, then how can I do this thing, right? Okay, so I think we should find out this option here, but I cannot see it here where it is. Oculars scroll it slowly so that we can see so we can see this Nissan dismissible. Slight dismissible. Okay. So dismissible, slight slider bowl dismissal. We need to use this property in order to delete this item when user will refresh it. So we can use it up at this one. We can shine, we can write this code. We can say this dismissible is going to be the body it is. It is lateral dismissible. Ok, and inside each child. And inside the chart, we need to use these. Why it is called what is called is called slight and travel dismissible. Okay. So slight slight chair dismissal. Sled. Let me copy this one is not showing here. Done. Okay. So we need to use this dismissal and sleight of all dismissal to dismiss our item. Okay. It is not working. It is not working. Let me read to whatever we are getting. A key must be provided. A sled dismissible is okay, so APK is important. So therefore we need to add here our key and that is going to be our index is showing and you don't let me check the code here. Okay, so if we go to this example like the example file, I'm sorry. There should be off Shawn to show this. They do not have it here. I don't know why they don't have. Anyhow, we need to use this index position or for index position, I think we need to use it this way. Okay, it is not working, so we need to find out some other ways. Alright, so it'll work in this way, like before they do need to use the value of D. And this fellow key is index ok. It is mandatory like otherwise, it'll get confused that whiskey We're going to until remove. So now our user has gone. And now if I refresh it in lash site, we can see, so if I click here, it will not do let our data, but if I refresh it this way, okay, then our data remove. And again, if I, again, if I refresh it, our data should come and I refresh it. I want data has gone. Now and make sure to implement the on-disk mishandled and implemented is double angle. Let me show what either we're getting we're not getting a okay, we're getting an error. A dismissal edible rigidness is still part of the tree. Make sure to implement the on dismissible handler and implement immediately removed. Thus, likable widget from the application wants that handler has fired. Okay, so he is showing us some solution and not out. Okay, so now there is another options to add these custom alert dialog in order to show that we want to remove, eat or not. Alright. I think for now we are over here. And before I move to this next part, let me, let me add a few more item, pee more data in here inside our international news. So first one is our image. And just need to read about this thing. Again, go to the CMS access download URL pasted here. Our title is going to be second. Shop post here. Content is here. And copy and copy your content and pasted here. And view fuses 50 k. If I refresh this one and it should come off. Now we have two data. Second job post and our fascia purpose. Why this title is, come here. Ok, we will solve it better. Nowhere is. So if I refresh it, Java data is loading. And now if I swap it, right, so dismissible is not working properly here. Waiting to check whether we are getting the 0. If I go here. Ok, so it is not giving an either, each and every day in our, this part is done. So this way you can implement your citable and if you want to, you can add some condition like in here you can, you can give a one or you can say in here, inside this slider will dismiss. You can give some of some alert dialogue. You don't have to protect your user to direct. The one thing that I want to mention you, that one thing that I wanted to mention to you that when you were removed over and over you moving your data from your UI, removing from your database. So when, again, when you will refresh your data, you will be able to see your data is here. Okay? So I just wanted to show you this thing that so if you want to, if you do not want to enable this, if you do not want to AMO this thing, you can simply remove this indispensable, okay? If you won't use disposable, it'll be gone. And we can add the condition like when you click on this delete button demo, you'll remove it. Let me show you how we are distinct. So we think we can use this on tape property here and inside this anti property, we can add, we can add these dismissible. Okay, so we cannot use it here at o, you will have to take some other property to add here because this disposable is under stable keynote, under these actions suggest and therefore we are not able to use it here. Okay, so they have some other options here. If you read carefully, like if you want to use the dismissal with a, with a, with a dollar books in that case, you can use these dismissal edibles. So let me copy this and paste it here. Okay, so if I run it. So now if I want to remove it here, it will show us an entire work like item over della debt if you want to, okay, then it will do let. Then it will, then it'll delight. If you do not want to remove it, then you don't want. Ok, I think we are getting this, you know, just because of we have not added this one. Let me check it here again. Okay. If not definitely skipping this one. Okay, still we are getting this hero. I don't know why we are getting this Euro. We will solve it. We will have to look or you'll have to read the documentation in order to solve this issue. Okay, so that is what I wanted to show you. But for this project, we do not need to have this dismissal or any of this thing. So this normal dismissal or we find for us No, not our issue fin case we wanted to let and if even though if you want, you can add some condition here, like if you were reading, Let me add to one more icon here. And if you want to go back, if you want to move to, if you want to read, can say I can say. Like you said, there's more information. More information and blue gray rather than using purple color. And if I use this one, then you will see, ok, so I cannot use longer text here because as it's white is not shy. So you can see Gillette and more to item again, see if you want to add CHI. I think we can also add S0, no problem for that. So at one more. And srand here. See, we can see cheap. So you don't need to have CO2, we need to have one. And we are happy with that. Okay, so now, yes, everything is fine. Now, as you can see that I still we are facing an UI issues. So there is only stat now over here inside our column. For our title and description inside this column, we need to use these one way to use this cross-sectional and men is going to be close accidental and math.sqrt. Now it will start from beginning C. You're has gone. Now one thing that if you want to change this refresh indicative color, you can do this. So comeback here inside this refresh and togehter and these different indicator has some other property that is called background color or semantics level. Background color. We can choose colors, dot, part book. Let's see how it will look. If we choose powerful, see that color is purple. Green will be good. Just some green is good, but we need to change the foreground color. So like the only color and all the collateral before the colors of the indicator. So right here we can go, here, you can see it is working here, perfect DNA. Our delete option is working also, and this one is also working. So all functionality is done. And I will add a couple of more of Sean's, couple of more posts here. So let us few more post. Id field is going to be immersed. And I will copy some anonymous copy images such as did here at fault. Post content. We can copy some Lauren in some content. Then you can see 600. Now let me refresh it. See we have three post now and we can just scroll it. And so, and this one is working for each and every, each and every item. I'll try cache so easy to use. We have to both system. We have a lot of options to add using these flutter. Now that Dow last item you miss and fellow is going to be, let me add another fatal, another image here, anonymous, pasted here and detail. For the international news here. I'm going to add the content. And continuous. You can copy any content, whatever we want. And as long as we have our excuse for 89, fuse, let me refresh it. It should a beta where a data data loading. And here we go. So we have successfully implemented our way over here and we also implemented our desorption here. Okay. So a dismissal edible widget is, is to part of the CCI makes sure to implement the on dismiss handler and to implement you move that slider widget on dismiss handler. So we need to is saying that we need to implement onlys ms handler. So what is on dismiss handler? We denote added it here. Let me check it here on dismiss what it calls. Okay, so there might be something to add in this spot in this sled correction action panel. If I get any solution for this, I will add it later. I think that is enough for this part. Next part we will start working with our gallery section. Once you're done with the gallery, will start working with a few details. 25. Int news PostDetails Part 24: Hello my dear students. Welcome back once again. So in order to give us part, they completed our international news. Hey, now, when a user will click on this View details, we should send them to a new place where we will show the details data. So I am talking about this base that is called the International post detail space. So I'm going to show you how can we set this data inside this detailed post. And after that, we will move to the gallery part, okay? And this way we will have to, we'll have to continue with our localness where we have already added that temper. Okay, so let's move on to this international news. And I think that we have already, inside this view, we have already created a file called international, international news posted details. Ok, this is the file in here and we will have to write all of the code. Ok, so first we need to add import material charge and we need to add our stateful widget. So astute for logit and now we need to define our class name. Over here, we can say, we can sell our international news. We can say this way, international pose returns. Okay, so now we need to change this container to scuff follow jet. And inside this cough, legit. So let me check what we have in our upper. So first we need to add our app bar that is called the Internet dollar post details. So Akbar is going to be the upper container. Tidal dot L is going to be a text. And inside the states where it doesn't say inter national. I'll try it. Now. We need to define a background color. So we need to have the assembler gone color, and there it is, background color. Okay, so we can go to this or home dot dot where previously we added our amber color if I'm not drunk. So this color is going to be discolored. And I'm going to paste it over here. I'll try to sew. Our appetite is done. But as effect click on this beauty tears, we ought to be able to go to these international news posts to diapers. And the reason is that we have not added our onto property yet. Therefore we need to add it here. Okay, so let me check very sort of view details. So this is our View Details. This is the views. And after that, gary goes. So this container is containing these pure details. Ok, so we can do it two-way either. Either we can add this inkwell click event inside this beauty just so, so when user will click these beautiful sticks, I will send them to the retail space and we can take the whole container so that when users click any of these rounded view details, beauty just corner. By encoding the stag and the background color, they will be able to move to the next press. Ok. I didn't didn't listen all with a good, otherwise you will have to click inside the stakes. So rather than clicking in said on the text. It is always better to add plague on this whole batch that is called the background color. Ok? So therefore, we need to add Glick have only two duplicative and okay, so we can, at, can we add click event to this container? So we can add our inkwell over here. And now we can add this onto their property. Are inside this onto property, we need to add our navigator. So before that, first we need to import this import this file in here. So let's import, so input, flutter, Becker's flutter and economy. And it is inside these views and electorial fuse than international news. Then international news posts, details, international news, all news, international news supposed to details. Ok. Now we will be able to get this data. So what can I do? So over here we need to add our navigator, navigator dot of the double contests, dot, push. New material, pest, shout. And these contain a context. Soon you've tried, don't hear contexts or if you want, you can add any kind of variables, whatever we want. And after this that we need to add this disk bracket. And in here we need to define our className, and that is our international post details. Okay, now I can format these sticks. So here you go. So inkwell on teff, navigator dot off contests that push new Metropolis Chart Builder that is contained, that is continued context. Therefore, I have added context over here and this arrow symbol and then our class them. So where we want to go, we want to go in this class, okay? In this club that is called integer post details. Ok. So therefore, I had to write in desert post details. Now using this parameter before that in here, we need to import our Firestone or Firestone, and it'll be worked. And inside this class name, we need to create a constructor before that. First created documents, snapshot. And snapshotting this document will help us to get the data from these international pace. And it will get the data according to the key, because this whole data containing a key, unique key, this one is containing q0 and this one is containing n. So for each and every data item it has an keep. Okay, so when a user, software user would click this button, will take both the data and then we will set it inside this, inside this international news postage us. Therefore, we need to use here. Constructor and anywhere we can pass it here. So this dot snapshot him. Now anywhere, it will ask you a parameter because in here we have added constructor. So now we will pass our snapshot here, snapshot dot getter, and we just need to pass the, our index position. It will be work. So for each and every item will have an index position. So snapshot dot data, this is gonna be index-based. Okay? So for each and every item that has an index position or an unique key, using these Trudy's unit q, you'll send them to the space. Now let's run this application once again. Let's see if it is a work. So this is how international news. And now if I click this View Details and here we go, we can see this international news. But as of now, we do not have any data's. Therefore, we need to add all of these UI design of a here. And let me show you for each and every item, like let's say effect click here. Then we can go for each and every item. We can go to this and details space C, we can go to this and retail space. No problem for that, right? Okay, so we can go there and we'll try it. Now. Now moving towards this posteriors file, now moving towards this post-stimulus fund in here, we need to add all of the details, all of the dissent. Okay? So if we look at our UI, we will see that first we have our first we have MS than we have a, then we have our circular avatar, then the whole title that 40 KV, then the content. So first, ok, so at Modi, Modi is going to be there. I'm going to use this list so that we can install it. So body is released field and our first item is hour. Okay, so first I'm going to be a, I guess it is fast container is going to add a new container. And inside this container, we need to define our height. And so we can say that a 150 for this image. If we need, we can change it letter to defend the margin. Margin is going to be as insert all. We can say 6. And now we need to use what I want you to use. We can say italic VP much in is going to be asked and said, oh, and in here we need to define a child. And child is going to make paper clip art. So I am using clip algebraic over here because by default it has and it has a border-radius option. So I can easily use this border-radius property, okay? So modernities to subpolar, I can say 10. If we look at our images, then we will see that it has a small rounded border for the left side, right side, and on the whole site. Okay. And inside this clip or react, it contains our child. And in here we need to use our EMS network. And in here we need to use our widget, which had our snapshot. And this snapshot is the snapshot, okay? And we need to use her decision because we are setting our data that we're getting from this space. This space. Therefore, we need to use this widget and then the snapshot without taking half of this widget, we ought to be able to use this snapshot, okay, and update the snapshot we need to use data. And now in here, when you do enter filename and go back here, and remember that you will have to write the exit SAM them again. You need to write the exactly the same spilling. If you do any mistakes, then it will, it will want to work for you, okay? So you can paste it here, right? A 150. And in here, we also need to define the height of the CMS. So you can say a 150, I think you just the military, but we can defend it. And obviously we need to use this feed that is going to be speeded cover. Now if I click here, it is taking a little bit more times than native speed is not good. So I think we have done a mistake here. Let's remove it and let's run it again. Okay, it was, it was working perfectly letting now I have done a mistake here. Now eat a lot of work. I think we need to use synthetic uart here. Okay, without the citizen working and with this it is working because I don't think we need to use this x1 dot data here where they needed to live on. And even if we, if we use it, it will be if even if we use it, you don't create any problems. Okay, so I think we need to increase the height of this. Ms. I think 250 will be good. Do hard shell up here, so I think it has not taken this 250. I need to go and run it again. So international news and click any of these item. Unless a what-if, what four-fifths against it is taking a little bit time. Okay, so if we look at this image, we can see that this image has bigger space, so I think it is. Okay, so I have done a mistake like in here I have this, I have defined the container, Heidi's a 150, and therefore, it can not be creative space to 50. So when you purchase it here as well, okay, now if I run it, it will be bigger. I think. I'll try it. Okay, so it is not showing ergonomics perfect. Now it's time to add our title and our circular Alberta. Now if we look at this way, we can see that it has a Bergen color, but as of now or you do not have any background colors over here. Okay, we will add it to our next, but I think it is enough for this part. So I will come up with new videos in the next part. Thank you. 26. Int news PostDetails Part 25: Hello my day students who will come back to once again. So we have added this image in our, in our digital space. Okay? Now we still, we need to add, we need to work on a lot of new things. So for instance, fast 20 to add our background color than the tidal description and many other things I team with dynamism. Instead of seeing international news in the Deborah, I should say, international news and details. International news. Details, again, it'll be good international status. So if you look at this way, we can see that it has a vacant colored and therefore I'm going to copy this Bergen color. So this one is the background-color writing. So I need to copy this drug on color. You want to be able to use this color coef, in my way. But the thing is that you can use this. You can write as you will see here. So judo wax tablet. And simply you can just, I'll just type due to, due to 4-0 in your code, then it will become the same color. Now if I do hard-shelled and it is not taking here, I don't know. I think we need to run it again. Then it will be able to do these things international news and viewed it as yes, discolored has changed. Now it's time to add this one. Okay, so if we look at here, you can see this, this one is inside the card and it also has a different colored in the Scollon discolored assembly. Okay, so now we have worked with our first container that is continuing our images. And it has, it has little bit of space between these images and the content. So I'm going to add this size box here. Size box, and Heidi is going to be 7. And after that, we need to add our after that, we need to add our container and so forth. This container, we can defend the height using media query dot off context, dot size, dot height, so that it can take the whole space whatever it needs. Ok. And so we'll be able to scroll it, no doubt. And inside this container, we need to add a marching band. Marching is going to be as instead of all, this is 6 Sudo, Make sure that you are adding the same Typhoid, some amount percent margin, then it wouldn't looks good. See, we can just call it. Okay, so now we need to use our card. So child is going to be the card. And inside discard who need to use the elevation, elevation is going to be ten times 0. And inside this card we need to use. What I don't need to use, we need to use. So first add guard elevation. Let me run it. If we can see that any changes see we can see the card. You're gonna consider space and we need to change the color. And we need to use in these colors. So I'm going to copy this color code from here. I'm sorry. Okay. So this colon Cordova, This one. Copy these colorCode. And in here we need to add the background color color. Color is going to be done. Scholars. Not color, color and cheeto, double f. And Janet. I don't know why these hot artillery is but working here, using every time I have to run it. That's not good. So when the national news new details, okay, this, again, this takes has not chance. I think we need to use this color inside discard f2 as. And the reason is that for this card, card view by default contain these white color. So if you want to change this color, we need to add this color over here. Okay, so hard trilogies are working. Okay, so we can see this one. And if you look at here, we can, again, we can do one thing that we can add a little bit of border here, like for the stuff left and tough, tough, right? We don't need to add water in this side. So how can we do it in our array? I don't think we have any border, but I'm going to show you how can we do this for the yogis can learn it. So inside this container, this container contains a table that is near miss decoration and this decoration container box decoration. So inside this box decoration, we need to defend the color as well. This is the main requirement. So we can define the color and it has a border-radius property and a border-radius dot. We can say what I just taught. Only. Then Barr, Bottom line, we need to use duff left, I can say 20. It wasn't the slaves, so we need to use the border-radius. Okay, so let me take you Trudeau diamonds trick here somewhat ideas. Only. So it will take disjoint circular. So first, let me show you again so that you can understand it. So it will use the border-radius moderators containing this box. What are it is only we need to know the question is that when we need to use a bada registered only if we if you want to specify any specific, specific corner, then in that case, you need to use a border-radius and don't only otherwise you can choose to deregulate border-radius to circular or a modern area stood all always, it will create the same, same border-radius for all the site. But if you are, if you are selecting only, then you need to define it here in whisper of his part, you want to use this border-radius for instance, we need to use what ideas in tough left side and upload this top-left side. We need to use this radiator circular then at 20. Okay, now if I do hoBshare lot, now, here we go. Now we can see a little bit of round corner here. And now we also need to use a dove right? Where we need to write these new to say yes to circular, it is 20 is 0. And now we can see this border, margaritas, okay? Okay, let's add a little bit more. Let say 40. Okay, so there is another issue. We can use this one here. But for discard, it contains, as we are using discard few. So eight is also, it also need to have a chef. We can use this shelf here and it continues share is going to be rounded, rectangular border. Actually we don't need to use this shift here as we have defined our border-radius over here. And it is working perfectly. And therefore we do not need to use this Chevy Volt inside this card. Okay? Now I think it looks good. Now. We need to add our this one. So therefore fast I will look at here, we will see this. We have one column or second column item and third column item. So I'm gonna add child column. Okay? And inside this column we need to use cilia, an object, okay? And inside this, ALL of which it, now we need to define our container. So this one will be the first 1 first container dishonest to say, you know, I taught one. Okay? And you need to define the container. We can comment out here. First container. And the container. And inside this container, we need to add a marching. We can say much in, oh, I'm sorry, who should add as insert all fat coin is 0. And after that we need to add here it child and child is going to be absorbed. Real continuity, Leonov, which it. Okay, so so now the question is that why I am adding row, I'm running, Oh, I'm adding row. Because if we look at this, if we look at this first column item week, we will see that it contains one. Rounded, and that is the circular voter and the whole Dido. Therefore, we need to define a row so that we can add this one in a one column. All right, so now the first one is clustered all the Sackler voter. So new circular levator. Okay, so News alkaline water, it continue. Child shall be widget. Dot snapshot. And our title name was detail, if I'm not wrong. So Dido and the fast physician. Okay. And the first position, and we can choose the background color and color is going to be collaged. Dot, I will chose an blue-gray though. It has a deep worries, but I don't like I don't think this color looks good and therefore I'm gonna change this color and I have faded blue crit. And for the foreground color foreground color means that text color. The foreground color should be white. And it'll look at the sonnet. Okay, is doing is not a subtype for dipole, which we haven't got it. And that is that we should not. Okay, so we have done a mistake. We have added this thing directly. Instead of using it takes so tight. So Charles should be taken in statistics, we need to use widget, snapshot title dot. Okay, now it should work. Now here we go. Now we can see we got a text for me and distinct, so TAR international. So see if we go to this target international post than the first one is T0. And it count as an array. So fast position is 0, therefore, we have added 0. If we add them it will. The A's. Maybe you all know that how this area is the work. Now, if I go to this one, then we will see these four because the first position, this is the position of 0 of array and it is full. And for the second job post we will see as and for this w position of weird physician that isn't tableau. Okay, so our, so our circular avatar is working perfectly. Now, is time to add our text. So add new size box and a white, it's going to be 6. Another text. And text is going to be widget dot snapshot that don't. And it still is going to really takes a step. I'm going to add font size from Sally's 20 and change the color of this font size color is going to be colors dot, right? Ok, so if I have not done any mistake over here, it should work perfectly her ego. Now if I click here and we can see for the international news here, but Let me check this. If we can see the whole one. Can. Yes, it is working perfectly. But I think we can use this one here. Growth is alignment crows experimental is just so that it can start from the beginning and see it is from beginning. Ok. No problem. And if we want, we can define the height for this. For this one, we can say if 50.04 instead, if sometimes our, our software instead if sometimes our land is, our land is 405 line and in that case, it will kill a problem. So it will be the wise thing. If we don't use any iodine, it'll automatically take the height. Okay? Now it's time to use our, now it's time to use our phew. Okay, so it has 45 kilo ohm. Alright, so up to this container, first continental, we need to use second test aimed and I use this icebox. Height is going to be, we can say 10. And our new text dot snapshot, dell. And in here we need to use this abuse. Then I use this pews and status going to retake the style and we need to change the font size, or you can say 20, and change the color. Colors, DOT. Departments. Now run it and hear it go. Replicate. And we need to use, we need to add this distinct here. Replicate, fuse. And it will show this peptic refuse. All right, so we can also record any leader that is called fill desert deadline to 41 prose text. So the text, OK, we should not use this in here. We need to use it up dot this bracket. And in here we need to sell fields. Now we can citizenship to give views. We can add an SPCA or it will create any space. And now you can see this, this one is started from this meal site. So instead of median said it should come from the left side. Again, if we look at our picture and we will see so we are using a column here if I'm not wrong. Yes. So insulin scholar monitor use corrosive element, closely filament or restart and Janet. And here we go. We can see it and I think we need to add. Okay, I should wrap it with a container so that we can use the, I am sorry, so that we can use the margin. And the margin, margin is going to be acids at all. And if I'm not wrong, we have added six for each and every point in a okay, so for the title, I should change it to six. Now. It looks good. Okay, now, it's time to add. Now it's time to add our digital stakes. So eddy size box, we need to use the height and height is going to be concerned 10. And I plug that into different the container. And inside this container first define the margin. Margin is as instead all that is 6. Channel is going to be our text. And text is which it dot snapshot. And it is going to be our content, but 20 to check it. Okay, so our container was, this one is content. Content. And they start, let's tally sticks a style, font size. It didn't 0, and color, color is white. Now run it. Okay, so here we go. Now we can see, now I can see the whole text. So we have completed our digital space so far. Now let me go through some other post. We can see second job posterior 50 CEOs and job details. And this one, we are posting our very first post where for the very first post, 52 give fuse. So ION to all of the postage, all of the pores. And each and every item is working perfectly. Okay. None if I do a lot like the lake pull to refresh it is working perfectly. Okay, so for each and every item, we are getting unique data in our digital space where we're getting our title Sakalava turn our few salt content as well as our images. So we have done good job suffer. Okay, so I think it is enough for this part. We will continue with our next part, 18, most probably next part two, we'll work with our gallery. So there's a port is part. Thank you. 27. Int News Gallery Part 26: Welcome back once again. In this part, I'm going to show you how can you work with in-gallery options, okay, so in our previous part, we have completed all of the required features that we were supposed to down in this application. See weekly had turned our international news details. And now in this part, I'm going to show you how can we add Gallery option where we will showcase our images that we are getting from, from here, like all of the images that we have inside this international news. Or if you want, you can add separate images as well. You just need to create a separate database in your a firestorm. But for this application we don't need to use another database as we have a couple of images in our international news. So if a user wanted to see all of the images that we have, international news, and then we will show them here. And therefore, I'm going to show you how can we add all of the mess. And one thing, remember that we will have to use the same database name inside of our gallery as we will get the same humus from here. And in here I will also show you a bunch of other features like how can we implement, how can we use, we are going to use a stock and some other stops. Okay, so let's move on to the codec cutting sections. So we have done with international news and international post details and home done. And now we need to open our need to open our international gala, international news and gallery. Okay. All right. So first I'm going to, I'm going to remove this container and add a scaffold widget. So inside this scaffold, which at first we need to use, we do not need to use any upper As we are inside a tab bar, and therefore we don't need to use any EPA. But if we look at our UI, we will see that it has a background color. So I'm going to copy this bank on collecting the assembler can color. Okay. We were using this background color for each and every part. So copy this one. And in here we need to use the background color is going to be colored and cheeto FFF here. Now let's do hot shall lot, Sherry got. Okay, so we can see the background color. Now, we need to create our database here. So first we need to use this. So let me add Firebase. We need to import this fire vest. So file store and we need to import here dot-dot async future. We can say all images. And over here we need to use this async. And remember that if you do not use this dark given dark indoor SEM, you won't be able to use this one. It will give an error. And therefore you need to use this async. Now in here, we need to create our thyristor. So for virus Joe is going to be Firestone dot instance dot. We need to use our query snapshot. We can say that snap is a cultural your weight, our thyristor dot collection. And any year this collection nim is our database name. But as you'll take these international images, so it means we will have to take the Assembly database as we will take the image from this database. So let's move on to the international news. And in here we have defined our database name. And now my database name is international wholeness. So I'm gonna copy this database name and in here. And if you want, you can get them suffer it. Create a separate database and then you will have to add images as we need to add the semi-major axis in here. And therefore, I'm not going to create any more database. And we need to use the get documents. Okay. Let be formatted. Note we need to return. So written is going to be the snaffle and taught and documents. Remember that you need to use in this dopamine. So our future is, our method is steady. Now in here, we need to use our and before that we also need to create another function and other future function for our refresh indicative, okay, so future, and it'll return now. And we can say and get refresh. I think you already know how to use this refreshing togehter like pull to refresh. I meant this one. Like river bullet, then it'll refresh it. And definitely it need to have an async you watch and tune it to use this keyword and a future don't delight. Some definition and decoration is going to be, I'm sorry, not decoration. It is. It is second only to use a team, two seconds only better. Now it will continue set instead, it means when it will refresh the data with one we want to show again, like this, dysfunction is containing the whole debt and that it will get from database. So we will show this data here. Okay, so that upper refreshing, it can load our whole database and again show the update data. Ok. Many of the application we have used to this pull to refresh, for instance, Facebook, Instagram, Twitter, and many of our popular application. It has this pull to refresh functionality. So whenever we pull it and refresh it, it shows us different types of news. Therefore, I'm going to add distinct so that if, if we update our database and after that, if we refresh it, then we will be able to see the object one. So our future functionality and the efficiency ridden. Now we need to add our body. Body is going to be future builder. Feature builder contained two parameter. One is future and another one is Builder. So first one is future and future contender. Get all, get all emus, turn em for a function. And it contains our pyramid are another parameter that is called builder. And we'll continue context. Or if you want, you can use any name. And second one is snapshot. Okay, let me formulate it. Alright, so body, future bolder, future ghetto lemmas, and we are ready to go. Now in here, we can add an if condition, if our snapshot that connection. Instead it political connection instead that unwitting. It means if we don't have any data, then we can show them a progress indicator and therefore we need to return this written. You can say Center. And he's at the center. We need to add a child. Child will be the progress indicator. Okay. So if it has okay. Let me show what is called what was the progress indicator thing? Okay. I think it was this one circular progress indicator. If I am not shown, let me check it here. We have edit distance. Ok. It is circular frequency integrator. And it has, I think yes, and different atmosphere are willing to get over if I'm not strong. Progress indicator. Surplus programming at all, linear Fergus IndieGoGo refresh triggers in the gutters, cool cooler, linear refresh. And a bunch of options have. Bunch of options are one option have so I'm gonna choose this alcohol represent letter. And so after this if condition on it, to use the if condition eels, it means if we have our data in our application, I'm going to show then and the data. So first we need to use this refrigerant getter because inside this integral, we need to add all of our data that we want to show in your application so that when is it always refers is that are they can show the whole data. So refilling it contains one parameter that is actually it takes couple of more parameters. So for instance, it has background color, color, notification, predictor, and onthe refresh and these on refreshing Easter is Tao is Tao mandatory? And we have added for this on refresh. So refresh and now need to add our child. And before that, let me edit here. And Charlie's going to be least q-dot builder. So let's be dot builder and this list view dot builder contains two parameter. One is item count. So item count is going to be Snapshot dot data, dot Glenn. And I didn't do learn this content context. And our index position. Let me format is one control shift L, okay? It has formatted calculate, ok, so instead it lists q-dot builder. We will have to show all of our data, all of our images. So if you look at an image as we will see that. This image has a rounded corner. Apart from that, on the top of this image, we are showing this message that is called the international. So it is a little bit tricky to add distinct, so therefore we need to use, it's dark here. Okay? So first I'm going to add 1000 unintuitive ton, container, OK, return container. And inside this container does need to add the marching margin is going to be assets at all. We can say 10.410 actually weakens and say 6. And child. And John is going to be, I think we need to define the height here as well. So we can define the height and highly, slightly and it 1-0, or don't need to mention any white, it will take automatically the whole white and upper debt. We need to add the child. And in here, we need to use the stack. And it's backed by default contented children on widget and interpreted language. It, we need to use our all of the functionality. So our first one will be our container, little container, image container. And child is going to be image.network, so which it not widget when if they use Snapshot done data. And in here we need to use the mess. I'm sorry, we don't need to use direct learning to use the index here. Index dot, dot data. Man, anyway, we'll need to use TMS. And in here we need to define the height of this image. And Heidi is going to be 200 sudo and food is going to be done box pitt.gov. Alright, so let's see if we can see our output gallery. Again, the golden era and what a theatre has no instance getter and okay, so we have done a mistake to write Deschooling, land, alien GTPase, lend. All ENG DAs. Here you go. Now we can see our image even weekend Do we can perform our refreshing the getter. Here we go. We can see we can see all of our images, but it is not a well formatted. It is creating a problem. We need to solve all of the zeros. I don't know why. I can't see the fast doing mess here. Okay, I can see, and it is taking a little bit more time setting the image size is little bit. Little bit hi. Okay, so this one is our phosphorus. A lot, all of the mess. Ok, so it is working perfectly and now we need to perform another one. So I put this container, we need to add position to position and only use this position to, because in this position will give us an opportunity to add. This takes on top of this image. Therefore, we need to use this position and we would have to visit of 40 and left 30. I'm sorry, 30. And child is going to be Charlie's going to the container. And inside this container, we will add a decoration. And before that, we need to add the high, gentle White. And I'm gonna descend this one. Lake in this one. Okay. So we can say height 50 and a y, it is gonna be 200. And need to have the decoration box, decoration, border-radius, border-radius dot. Only. If you look at this one, it has a customer's border-radius like discipline and discipline like bottom left and top right. As and bottom left. We will need to soccer and things. You can say 20.04, top-right. Register circular 20. I am not shown. It will work. If I'm not shown a to work, but we need to define the color over here. So color, color is going to be colored. So collaged, blue-gray. So we have all of the images. So we have a one you miss one to 40 months. Okay? No problem. And DC mesh size is shorter and therefore it cannot cover the whole, whole white. Now I'm going to run it. And for each and every image on the top of each and every image we can see in this one, ok. It is taking a little bit time because maintenance condition is slow. I think. Now we need to add the now we need to add the texture. So at child-like inside this container, okay. The child, and the child is going to be text. And in here we need to say, we can say international news. Okay, now here we need to use the style. The style is going to be text Estelle and font size is going to be 20. I'm going to call our color is going to be the colors dot, dot white and colored or to white. And we need to use, we need to take health of Alan meant so that we can see what takes in the middle. So text, add new jet. And I'm going to use these element and is going to be done. Ellen meant alignment is going to be the alignment centers. All right, now it is working perfectly. But for the images we cannot see any, any water areas. And the reason is that we have not added people react for this image. So click on the image.net and then click on the icon. Rapid new widget, that is called leap. I react. And it gives us an eater, gives us an opportunity to use border-radius. And what I read yesterday, circular. And we can say 20. Now run it. Now. It should give us and rank-order rounded corner border image. Okay. So we have done almost. Let me see other MSS. Okay, so the or we cannot load the misses because of this slow internet connection writing. And it is taking a lot of time. If you know, if you go to this one, we cannot load the image right now. So we have done all of Tao property. Let me, let me explain the whole process again so that you guys can understand it so faster. We have added to our future bolder in our body tech. And this feature bundle contains a future and that is get all the mess where we have written all of our adequate caught to get data from Firebase database. Then it contains another parameter that is called builder and this Bueller content two-parameter foster one is contexts and second, honest, snapshot. And G. Now we need to use snapshotted connection status called conditioners to total wetting. It means if it, if we do not have any data, are if a replication can't lot anymore and data sham server, then we will show them your circular progress indicator. And despite we, we despite we have added refresh indicator. It means if you want to see the update news, then we can pull and pull and refresh our database so that the update new skin shoe. And for discipline indicator, we need to use the on refresh Q1 and the child is going to list q-dot builder. And this list will contain two parameter fast-tracked item count. It means like how many data we want to get from our database. And in here we need, we have edit, snapshot data dot lend it means we need to, we need to take all of the data that we have in our database. So take the whole length of data and show it in this array. Okay? And this item builder content, parameter, fast twenties contexts and secondary index position, ok, for each and every index, we have designed this whole thing faster. We have designed our stock. We need to use this stuck here because on the top of each and every image we have added, we have added these international news steak, okay, therefore we need to use this one. Ok, if we look at our image, you can see in this image is rounded. Now, instead of using 20, we can use 15. So investor network and MS. And four, respectively, we have added our emails and then respectively we have added to our blue gray color. And I and our text on the top of each and every miss. So this image, so why it is little bit, a little bit short compared to, compared to all of under images. And therefore we can't see the whole image here. And the solution instead, I think we can define the white in here like nice continuous containing the whole data for each and every item, we have defined the height GM debt, but we have not defined any white yet through C yet. Media query taught of context and dirt, size dot white. I think you'd want to model work as in this image sizes. And as this image sizes shuttered than any other images. And therefore we can't see these hemisphere. Cholesterol. Wait a few more seconds so that we can see. I hope you understand. So I think we have successfully completed our international news and respectively, we will have to work on all of our, all of our filter, all of our news. Phil, for instance, put news, vocation news and positiveness. So I think that is enough for this part. We will continue with row next part. Thank you. 28. Sports news getallPost Part 27: Welcome back. Once again. In this part, we will start working on our is post news. Okay, as you can see that we complicate our tab bar functionality for sports news and gallo news inside these sports news categories. Inside this sport news category. Okay, in our proof has part, we have successfully finished all of the functionality for our international news, for instance. And the all of the data pull to refresh and details and the gallery as well. Okay, so we have done everything with international news now is time to work on it is post news, ok. And respectively, we will have to work with local news and politics news. Okay? So the first and foremost, we need to open our international and do costimulation news, local news and open this is forced news. So the first and foremost we need to work with is pours all news dot, dot fall. In here, we will show all of or most news that we have added in our international news. Like we will have the similar tabu data, one emus, one emus, and then title on ten View and the filter just okay. So we'll try to use the same size of hygiene and white so that it looks good. So before jumping to the Us section, first, we need to implement our firestorm. So for that, we need to use here. We need to import thyristor, and then we need to import dot-dot async. Alright, now in here we need to add tower future. So feature, I can say Git is post news. Okay, now addressing and I'm going to share. Alright, so in here we need to add all of this functionality. So I'm going to add this R bar is going to be file store is firestorm dot instance. Then we need to use query snapshot is going to be done snuff. And in here we need to use a wit. And these Firestone Dart collection and we can say is pushed and use. As of now, we do not have any database. That name is as post news. So we will have to create this database in a word firestorm. And we'll need to use good documenters. Alright, let me former coach and upper debt, we need to do redundant. So written so written this snuff dot documents, make sure that you have added snapshot document otherwise it onto work. And another important thing we need to use that is future null. And when you do use them gets refresh. Also it will take async. And in here we need to add a wet and a future dot delight. And in here we need to add the duration like How many seconds? In how many things we want to show our data. So duration is going to be seconds. So you can sell cheeseburgers is the maximum. And these future don't get refresh contains another function that is called city-state. And in here we need to define our AND gate is post news so that when its role and to pull to refresh so that they can, and they can see the update data. So when Israel pull, pull to refresh, then this function that contains the whole data that we'll get Chemosh servers, so it'll open it or refresh that hold data, whole database, and it will give us the update output. Ok, so now we have done with our major functionalities. Now in here, we need to add our scuffle Egypt. So scaffold widget. And we don't need to use any upper, but we must need to add a background color. Okay. So I'm gonna open this international news, all news as we need the similar design so that we can understand what background color we have used. So I'm gonna copy this pumpkin color. So open this international news that we completed in our previous spot. Spot. We did add this one. So as posts news and I'm going to add the spectrum colour inside this scaffold widget. Okay, this is the first and foremost thing. And if I go there and if I refresh, see color has changed. Alright, now we need to add our body tag here. Somebody is going to be future vulgar. And future will look contains two parameters. One is feature and another one is Builder. And our future will be is pushed news gets pushed news. And and that is going to be context. And I'm going to add this snapshot. Snapshot. And now in here we need to add this one. So body future builder. And in here we need to use snapshot. Okay, now we did if snapshot definition is third equal, equal connection is state total witting. Alright? So if we, if there is no data, then we will show them and circular progress indicator, so written first at the center and inside the Center on it to two child, child is going to be new circular progress indicator, alright. And eels, it means if there is a data, then we will set all of the data in a way. And therefore we need to add our list few dot builder and it do written, written list few dot builder and integer semicolon. And this list q-dot builder contains two parameters. First one is item count. That is our length of our data, like how many data? So we want to get it from a word. That is, we need the whole data and therefore I'm going to add snapshot data dot Len. Okay? And it takes another element and that is Item Linder slide $10 billion contained the first parameter context and second honest, OK, index position. I'll write. Alright, so this is the basic thing. And I have done a mistake over here, as I said, that we need to use this refresh indicator in here that I have added. Inside this international lives like this one. Ok, so for adding a efficiently getter, We need to rev our whole list feudal builder in this refresh Integra, therefore, only to add refreshing negative here. So we need to return refresh indicator and is just an indicator to take on refresh attribute and this is going to be get refresh, okay? And it has a couple of others, a couple of other properties, for instance, color and background color, but as of now we don't need to change. It, will change it later knowledge sonnet. Now, if I go to his post news, see you can see the progress indicator and we can also see the refresh indicator as we do not have any data. And therefore we cannot see any dead. Okay, not we need to design our UA according to, according to this one. And as we have added, like we need to use the same thing. So let me check the height and weight, how much Haydn and white we have added. Okay, that one important thing is that if you look at this international news, if we refresh it to, we have this and delete option. That means we need to use this site level in our application as well. Ok, so therefore, we need to add our wanting to return our citable fast. Then we need to use or a container and our container height is a 170. And what are the ideas and show? And another thing is that. All right, so first, do add this refreshing. To add the slider ball features we need to import this important slavery and library name might be sled apple.tar, if I'm not wrong. And it might have another one that is called. I don't know. I think we have edited or see if we get any more erosion than we will update it. No problem, no problems for that. So now inside this lists which are builder, we need to return. We need to return a slight double, okay? And this letter will take couple of parameters. First one is it takes, the first parameter, takes in a key and a fellow. Ok. So key. And it takes the fellow Pierre Louis grain lobby our index because for each and every index position it will take, it will show us the Show us is delayed option on whatever option we want to add, okay? And second parameter we need to use actions, that is this Ladro elections. I'm gonna copy it here as we have added in our international news. And we also need to use secondary actions, okay? So we need to use secondary option here. So it contains two type of actions. One is normal electrons and that will often from the left side and the sanded option that alone from the right side. And in here, we need to add all of his functionality that we have read already. It is Icons, directions. So I'm going to add it here. Okay. It shows that it needs child property. Definitely, we will add it and we need to add these dismissible dismissible so that if you want and they can delete it or if they want, they can GMO feed so that dismissal slider will dismiss child. Slider will dismiss though it was it was giving us some either, but it is not the measure issues. We will solve it letter. But we need to learn how can we implement this functionality. So okay, and now we need to add our chat. And inside the child that, that will continue container and inside this continent, we will have to design all of our part like discipline. I came, I assume that it contains two. It contains 17 shuttle height. I want to add the same height that we added in the international news. Let me check. So high towards a 170 and we have not added any much insofar here. Okay. Oh, watching yeah, we have added margin that is six and bookstore corrosion is 10. Okay. No problem. So Heidi 270. And now in here we need to use the decoration is inbox decoration. So decoration is box decoration and border-radius is going to be border-radius stirred circular. I'm going to say I think I have added ten here, so 10, okay. So container digression, border-radius, and only to use the same color. So for inertia news we added color, this one. Okay, so color, this one. So we are done now we also need to add the marching. So much money is going to be as INSEAD, all 6. So our R, This doesn't Pakistan like this whole decent part is done if I'm not wrong. Ok, so now inside this container we need to create another child and it will contain a show because I'm sorry. So child will be ashore. And Joel has children of push it. So because now the question instead of Y, destroy, as we need to add this image on the left side, then it will contain this whole, whole texts that, and therefore we need to divide it into short and fast one. All we no longer need to divide it using these expanded and this is the ETS to weigh and the best way. Okay. And it can it content of flakes on one. We need to child and maternal child and child will be clippers react. And inside this clip earlier to reduce quality ideas and moderator start circular tipping 0 if I'm not wrong. And in here we need to use child. Children will emit Start Network where we need to add snapshot data, linear. We need to use index, dot data. And only her. We can say email. And we can define the height. Hand hygiene is going to be a 170. Sara. I'll write Social and this one is expended. Okay, should work. Let me check how much height we add it in our international news so that i index box widget cover, but it is appealing. It is perfect. So we have added 170170 here and in here a 170, but I did forget to add the fit. That is boxplot dot cover. Alright, so we have successfully edit our image of Sean and designed our container and divided it into many different parts. Okay. So let me explain it one more time so that you guys can understand what I have written here so far. So inside this body, I added a future builder and feature is continued, contains and get support news. So Builder context snapshot. And to inherit, I have added a condition just to add this Sackler professor indicator. If in case you do not have any data in our database or ED50 takes a few more times to load the data sometimes for the better internet connection, 8.5 is not sometimes authentic offense. So therefore we should use the circular progress indicator. And is it means if we have data, then we need to get all of the data from our database. So we need to use a pull to refresh indicator, but to using the pull to defile indicator only to wrap our whole letter with a refresh indicator and it contained one parameter for on refresh and second perimeters for Child where we have added our ListView that we learned. And it contains two parameter. First one is item count, secondaries item buildup, and we are adding the sled double to add this intellect functionalities when he did a little slide it from right to left. And it contains a very lucky and it has the actions provided where we need to define the button size, okay? And then we need to define our container that will contain the whole data it missed the whole for each and every item actually. Literally the, each and every item contains this continent that is a 170, okay, marginalia 70 and decoration ten and the color and for the row we need to destroy, we need to define our expended. So for fast expanded, we need to add our images. And for second expanded, we will add all of our data. I'll show it. So and I've talked to in this lesson, this lesson has become a little bit bigger and therefore, I'm going to close these. I'm going to stop this video here and I will continue from the next, but thank you. 29. Sports news UIDesign Part 28: Hello my dear students. Welcome back. Once again, intimal prefers, But we were over here. We can predate fast expanded, that is for our image. Okay, now we need to work for our title and contain these views and these one. So after this expended, who need to add a size box, size box, and need to add the height and height is going to be, we can save 10. Alright? And now defined that exponent that, I'm sorry, we don't need to add the height. We need to use the white for this expanded to what is going to be 10. We need to add an under expanded here. And for this expanded, we need to choose flakes to and then introduce the child. And in here, we need to choose the child column. Column contains children up widget, and this whole column will contain the whole data, okay? And inside this column, we need to divide it into two container. And he's confessed continental will contain a, another column so they can comment on it here. We can call your first container. And now we need to add container in here. Inside this container, we need to define a child and we need to call it column. Okay, children up widget and wanting to add close Fs element is closed. This is elemental dot-dot-dot. Okay, so if I'm not Sean and inside this column, so we need to add two texts to one is for tidal and another one is four. So if we look at our international news, we will see that our first one is for title and second honest port. But content so we can stratosphere. So text, text is going to be Snapshot dot data. That is going to be the index dot. Snapshot data, index the data. And I'm gonna say it, Dido. And need to format it and need to add is type, study, scream to b, takes a stone and font size. Let me check how much sponsors we added for international news. It is 20. So it is 20, I'll shade. So now we need to change our color galleries. So color is colored light. So this one is for our first one. Let me see, we need to use the size box. And one thing I forgot to mention here, like, we need to define the mixing on lines four titled mixing online is one. Ok, so now we need to add another sidewalks size box. And this time we do have the height and Heidelberg 6. And after this size box, we need to add another text for our content. First one was for our detail and this one will be for our contents. So snapshot data, and I'm going to add here. Next, data analysts on is going to be that content. Now in yellow, we need to add style is going to reduce the style. And font size is going to be 20, and color is white. So according to our international news, I think we have designed it perfectly if we have not done, okay, so i have any mistake for the content. We don't need to add 20. It should be 16, so that we can see a little bit smaller font. And two, we need to define the maximum life. So maximum lines should be cheap right? Now. So our, and this part is done. Now we need to work with our, this one C. So we need to define and under height and then we need to define that container for it. So we need to define our container here. So this one is our first container. And after this fast container, we need to edge size, box, size box, and hide is going to be 30. In here. We need to add the container. I'm sorry. We need to add the container and inherit and you need to add for this container, container and this continental continuous show. So fast we need to add a child. And in here we need to add a show. Because if you look at here, we will see this. We have an icon, then we have our fuse, then we have a beauty does so dishonored contain another show and isn't coriander or any. And this whole one will contain a total drone that isn't distro and children is going to be this one. Now we need to add a container here, container and reduce child. Charlie's going to show row is going to generate off widget and inside the Chilean opposite, we need to add. We need to add our icon. C, we need to add our icon. So our icon deportations need to use this takes me to use this icon and icon is going to like on. So I can, I can, he's going to icon and it will take these icons so I can start removed Fette I. And we need to use the color. Color is color start. Deep, Lawrence. I think I have done a mistake. Let me check what we have added here. So it was directly icons dot this one. So we need to remove this one. And I'm sorry, we should add this year in scientists icon. And the color is going to be scholars dot. So we have done with our icon. We don't need to chins hour. You don't need to change our font size for this icon. So instead destroys, that is children. And we are done with this, I call it indicates. So this one is here. Again. Now we declare decide swaps. So such box. And you do, why do white? You can say 5. And I put this, we need to add a semicolon here. And after this one we need to add what you can enter. We can deduct edit text. So we can directly. So we're getting a needle here. I don't know what we are getting here. Ok, in here there should be an here. We are getting a lot of weird here and let me solve followed this year. So I'm going to cut this one and unknown material we are getting here. And what mistake we have done here so far. So we were here, let me do control jet, control jet so that we can get the okay. So deal that it was correct node which was not the correct. So let me do control state control. Again, we were correct. Deal that happened the tsunami, Juliano budget. Okay, so now we need to add or icon. And that contains these icons. So i dot Shechem of ICANN and the color is going to be the collaged color start. Debra's. Okay, now we need to use the size box. So size box and white. And add another vertex for our view. So text is going to be Snapshot dot data, index, snapshot data node index.js and data. And I'm going to write here. So snapshotting dot knitr index needed seals will do is this. Whatever we are getting here. So we have done a mistake here writing. So we need to use that text here. So inside this text we need to use the snapshot dot data, and then I need to use the index dot data. And in here we need to add tower pills. Alright, now we need to add they start and then he started going to be the text Esther and reduce the font size. So let me see. Let me check what was our form says here. It was 14 and it was colors too wet. So I've got this text and in here we need to add up to this takes do we need to use here fuse and form size will be 14 and need to use the color and color reader. Dot white. If I'm not shrunk. Alright, so we have added all of these things so far. But if I run it, we want to be able to see any data inside our is pushed news. There isn't. Instead, we have not added any data in your database. Therefore, we cannot see any data. But still we have to done our declaration. But okay, so container is going to be this row, Nikon and fuse font-size. And this one is the fascial IDM and second Joy item movie. This 1. Second show item will be this one where we added all of this team. So I'm gonna copy these things. So instead of copy these team, we can do by our hand, like we can do, we can do by writing the port so that he can understand you and you can practice. So first need to define the container. And inside this container, we need to add marching. And you need to use marching munching is going to be as insert only, and it will be only from the right side and it will attend 0.05. and cut that much in. We can add and append it much in. We need to use this one. We need to use the decoration. And now we will add the declaration 15 and in blue gray. And as well as we will add some padding. Ok, so we will have and decoration. Decoration is going to be inbox decoration and border-radius. Border-radius dot circular. And I'm going to save you pinpoint pseudo. We must need to add the background color to color is color started blue-green, color, starch, and glucose. Now we need to define our child. And when it produced this element, elemental dot Ellen main.js Center. And after that, we need to use our child and definitely our child will be text and text in here we will have to write a snapshot dot data and any girly to add. But when you do it in here, snapshotted data, we need to add. Really, we don't need to use here any snapshot because it will be a default decks and it would be real details. Field leaders. And I should change the font size of this. Beauty just sort. So takes its toll. And font size is going to be this one. So font-size 20 and color white, Francis 20-20, sudo, and color is going to be colors dot white. All right, so if I am not shown, we have added all of the future, but we need to add the padding. I think we can wrap this text using the bedding. So at bedding and by default it will give us 8. Now if we run it, we won't be able to see anything saw. I have done all of that descend part so far. And in our next part, we will do the post, will add these database in a wildfires tour, and we will try to add some posts so that we can see our debt over here. I think that is enough for this part. We will continue with our next, but see you in the next lecture. Thank you. 30. Getall SportsNews Part 29: Welcome back once again. In our previous part, we have done all of the UI design now is time to post some data so that we can see our data is working or not. So now let's move to our fires to database. And I'm gonna open this database. And before that we need to copy our database name from here, because this is the new soil database name. And in here we need to create a new collection. So we have two collections so far. Now I'm gonna append another collection that'll be is pushed news. And in here, faster, click on AAD ID so that it can fit an ID. And in here, we need to use our let me check what filled we have, we have MS. And one thing that you need to mention that image, you should have the right spilling issue to any spelling mistake. Even if, even though if you do any space here, then it will give you a neater. Now I'm going to copy some images, image location that we added professionally in our stories. And we will, and I will visit it inside this fills so that we can get this image. So it is taking a little bit time. There is no file, but there should be some file. If I'm not Sean. Okay. There is no images inside our stories. And I'm not sure who I am seeing this one. So let me check it one more time. So for the international news. Okay, so we added this one, right? So I think I need to go this way through stories. And then what happened here? We must need to have, we must have some images in our database. Here you go see, we can see the story isomers here. Okay, so we can go here project overview, and now we can go to the database. And if we can't see any images here, I don't know why. K a cutting we have not added. I think we have not added any images here. Okay. Therefore, we can't see any images. So we will upload or we can take some images from big Jill's. Let me check in our database what we edit. So in our database, in our prefers post that we were that we're getting from database. We have added first term, we will service. I think I can copy this image here for now and we will change it later. Then for industrial use, our collection is our collision M was, is pushed news. We can write it here. This portion news is pushed news. If I'm not sure, I have written the tritone and of ID and image. And here need to vet the value, that is the mist and field plus 20 solar tidal. And I'm gonna say this. First news. And battlefield is few. Let me check it. Have ready then. Capital letter a, smarter for the few. I have again, smaller than it is to fuse. And it should be 56 k. And for the content. And Jenna and can say that we are, like I said, it, though, based football here. I'm going to save it. So we have successfully kilowatt hour is pushed news and so far we have only one post. Let me refresh it, pull to refresh. And I hope we will be able to see our data. Here we go and we got an error. And it is, it shows that Leno default null non-point ISTE mastery 402 it takes to Egypt. So it's t must be provided a text widget. So we might done any mistake here. So for the text, the text, so we have added the title and content, the index to the content. And for the row. So take snapshot fuse. And for this text, I think I have done the right one so far. So why we are getting this Euro? Okay, so let me, okay, I think we have paternity and therefore we cannot see it. So now sports news, okay, provided to a Muslim widget. So it's t must be provided to, it takes to budget. So I think we have done the right one, though. We have done a mistake over here in our post failed as I told you that we cannot miss, we cannot we cannot use a defense filling in our database. We always need to write the same spring that we will add in our code and therefore, we are getting this error. So we need to chance it can do let it here and agenda field title. And we can say first spores. So now add. So now if I do refresh it, now this time I might see that result. Hagar. Now we can see our data. We edit our data and we can see it here. And still we need to the state, we need to do some modification. For instance, we need to add a space between these two filled. Okay, so scroll down here and inside this beauty does we need to, okay, so this beauty dose is, I'm sorry, in here. So this beauty dels is containing. So this beauty tells. Ok, so in here, in these videos is inside this show. If I'm not shown, so like this I control and this show, not this one. I should use this one like the main container and this show, okay? So in here we need to use gross Exelon men cross axial and main.out. Not crows actually should be the main accidental mentor. So many Perelman, many theorems, windowless space between. Now if I run it, now we can see dishonest here, but we cannot see our images. Let me check if I have done any mistake here. So data in is to network high walkscore dot cover, but we cannot see any images setting. Again, there is a internet problem, therefore, we can now see the images. And yes, this is happening for each and every of shuns. Ok, we should not worry about it, just need to see if it is working perfectly or not. So 56 K, I think we have added different size. 50, just 20. And for our dispute, font size was 14. So it seems 14, though now less smoke. Today's porcelain news where we will add font size and in here we need to cast our fuse and this text and change the font size. I can say 15. And oceanic taken. Now I think it will look good. Here we go. Now it looks good. Ok, so as of now we have only one post and therefore we can see this one. Okay? I will add a couple of other posts here and we will be able to see all of the data here. And I think that is enough for this part. We will continue with from our next part. Thank you. 31. Sports news detailsPage Part 30: Hello, my name is, students are welcome back once again. As you can see, now, we have couple of pores in our dispersed news and if I refresh it, and we will see our whole data is refreshing. Okay, so now in this part, I'm going to show you how can we sent data to the beauty space when user only click on this beauty does. Okay, I think we have done it with our international news so far. We have done it. So now I'm going to show you how can we add this thing inside this is post news. Okay, so it is working perfectly. Alright, so now let's jump into the coding section. And inside this is post news. We have one that is called spores and details. And over here you need to write all of the code that we have written similarly inside our international news. Both details, ok, we will have to write the all of the same course. Okay, so now festooning to virus, first meeting portable material type. And now we need to import our Firestone. And I think we might need our dark protesting, so it is always safer to add dark dot async. Now need to define our class_name. So stateful legit and I'm gonna say spores and detailed. So so I'm going to say class name is exposed, details external stateful widget. And to know in here, first we need to remove this container and need to add a scuffle to check. So faster nuclear day scuffle legit. And inside this scaffold widget, we need to add Akbar. And let's go here. And let's check what we have in our international news going into assemblies. Yes, we have an APA. So therefore I'm going to add an effort and everybody's going to be Amber. I'm sorry. So Akbar contain a ABA and inside is where we need to write down our title that l is going to be a text. And inside this takes we need to shine a sport, sports news and details. And we need to add some color. So I'm going to move forward to this international news posts ridges, and let me check, what do we have. Alright, so I'm gonna copy this background color. To copy this background-color and paste it over here. Okay, so now our app very steady and anywhere we need to add our knot in here, I think in here we need to use, we need to create a, but we need to use the data snapshot. So we need to use I'm sorry, not data's not sure. It should be documents snapshot. Document snapshot is going to snapshot. And in here we need to use when you create a constructor for our supposed to just news is supposed to just news is going to be this snapshot. Okay? So we are done here and now go back to this international news. And in here, we need to add a click event inside our, inside our view details. Ok. So therefore I'm going to find out very sour as opposed to just view details. So anywhere we have our visitors and I'm going to add clickable this whole container so that when users click in this whole rounded, rounded border water, then we will send them with a little space. And therefore we need to wrap it with an Inca world, which is give us an opportunity to use click Kevin. So I'm gonna click on that, on that container and in the left side you will be able to see, well. So I click on this well and drop-down. And anybody who will see rep with new Azure and tower widget enemies in Cowell. So this inkwell provide an attribute that is caught on tape and throw this in Ontario. We can we can pass our data. Okay, this is a process and if you want to go there first 20 to import our posterior space over here. So important, we need to use flutter. Becky's flutter views then is pushed news. Then supposed news, then is post news as opposed to only details. Okay, so just import the space here. And now in here. Inside this on method neutral, right, our navigator, navigator dot off, that is a bill contexts dot push. And that is continue router, similar say new material pests route. And this builder contain a context. And in here after that, we need to write 4x plus nine. That is supposed to details, that is supposed to tells, OK, and it will take a parameter C. It is asking for a parameter C, it is asking for a parameter because in here we have created a constructor for this exposed neutral scalars. Therefore, it is asking here, we must need to add an argument here. So before adding an argument, let me formulate the code. So please control ultra l. Then you will see our code has been formatted. And now in here we can add our snapshot dot data and our index. So we need to take the whole data for each and every index position. For instance, this item has one key, this one has a wonky and the soil has one key. If we select snapshot dot data dot index, it means it will take the index position of this container, then we will send them to the next base. Ok, it is really easy. Hope you understand. Now let's run this application. Hopefully we'll be able to say, okay, now click on this post news, and now we're in course news, no effect. Click here. Now, here it go. Now we are in is postnatal space. As of now, we do not have any data and therefore we couldn't see any data here. And now it's time to work in here is suppose a digital news, okay, so as I mentioned earlier, that we need similar data that we have in our international news. So we can take help from this so that it can, so that we can reduce our time. Ok. So now inside this is post news international news poll status. We can see that we have added a background color. So we also need to have a background color in our sports details. Therefore, I'm going to copy this here. And inside this scaffold, this AB bar, it should, you can business background-color anywhere inside this scuffle legit, as long as it is inside this scaffold widget, you will not get any error. Ok, so now run it. Now if I go back to this is post news and go to this details space and hear it go. Our color has been changed. Now we need to add our body list view, and then we need to add our images and whatever we have to add. Okay, so now it's time to work with our body tag. So at body and I'm going to add a list because we need to have an SCO option and this list will give us an opportunity to add list two option. So children of widget and interdisciplinary budget faster we need to add a container and that will be about our image. So I'm going to copy this container from here because we need to have the same court, so it does not make any sense to write. Again, I'm going to copy this code here. And inside this container list pill, I'm going to paste it here. So in here we can see that container high 250 margin as insert all 6 judo and child is going to be clipper react border-radius and child widget, snapshot widget. One thing that I would like to mention you that and in here, I have written the images. I think we have written the same name image here. So whatever you write C, we are sending this image, okay? So this is our exposed all news where user would click videos. Then we need to add, we need to get this image in our developers, okay, and make sure that you are writing the same name, okay, then Egypt under snapshot. And this snapshot is our, the snapshot that we have created over here. And we are passing through this constructor again now if I run it, and here we go. Now we can see this image here. Now if I go here and you can see in this car, and if I go here, you can see the CMS means our image is working perfectly. Ok, so we are done with our first container, not we need to write it size box here. So such books, I just going to I think 6 will be good. And appendicitis box, we need to have a container. So we need to have a container that will contain the whole data. Okay? And these are normally the second container. And inside the second container, we need to add all of these things. Okay? So I think we're going to write all of this court or we can copy this code. I think if you copy the second container directly, it will be, it will work perfectly because we need to reach some line of code and I will explain you everything. So copy this thing. Okay. So I publicize books, copies, and is projectiles come here and paste. Yep. So we have added another container. So this one also, this one is our spoken up accessible decides or second container and where we have to defend our height and Heidi's media query dot cores of contest node size toward height, because we need the whole height and margin den and decoration. We have decorated it with the color and just edit some decoration here. Now we have defined a car and inside this car, we have added all of this data. So for card, it contains innovation ten colors and column. So fast Columbus containing two parameter and therefore, therefore we had to write a row. And fast Geodata is containing the circular theatre and the second-order this continent idea. Let me make sure that we have an intercept is spilling. So in here we have added tidal, and in here we have an a title as well. Okay. And in here we also have a title for Dido, and this one is for our fuse. And after that we have another container where we have returned to our content. Now run it. And if I click here, here we go. Now we can see all of our data. Font-family guys, ED so far is that ED super easy? Right? So second principle, spores and ten key fuse and our content. For each and every item we can see that unique data, so no peak here. And then you can see while cricket drinking 5K views and our data of you understand it. And if I click here, then you will see what is learned some and then give fuse. Okay? So for each and every data we can see unique data. So our post news on View Details pause of Sean is completed. Now in our next part, we will start with working in our gallery section so that we can see all of the images over here. Alright, so we have done for this part. So thank you for this part. We will continue with our next, but see you in the next lecture. Thank you. 32. Sports news gallery Part 31: Welcome back once again. In this part, I'm going to show you how can we work with is post news to gallery part. And I think it already, we have done it in our international news. And as you can see that in Indonesia news we have these images and Indonesia news and India is post news. We need to have the similar design so that we can show our images in a, inside a gala additive. And therefore we need to work on it in this lecture. So now I need to open is post Nielsen Gallery in here. Okay, so first I need to import our material dirt. So import match l dot, i'm sorry, we already have material dirt. Therefore we need to use firestorm. And we need to add important dark fluorescing. So dot-dot asking, all right, so now I am going to remove this container first and then I'm going to add is cough all legit. And I'm going to add this couple legit. And as, as you can see that we are working inside a div and therefore we do not need to add any airport. We can do regularly sort of working from one body part, but before that we need to add our background color. So I'm gonna open this international Nuzi Gallery where we have done all of this work previously. And I need to see that what weapon color we have used. So we have used this purple color. So I'm gonna copy this Bergman color, and I'm gonna paste it here. So you can simply copy it from your international gallery news or you can write it in this way. Now let me do hot reload. Now we can see this one is okay. So now we're ready to go. Now in here, I'm going to write this method for this fiber database. So future, I'm gonna say you get all these schemas. And in here we need to use these async keyword. And remember that if you do not try this endorsing, you won't be able to access this async keyword. And it is important and it is crucial, it is crucial to add are inside these fisher. So now we need to create a variable of our fire Esther for thyristor. And I'm going to add this firestorm for instance, or Firestone dot instance. Alright, here it would need to add greatest snapshot. I'm going to add the snapshot is a cultural curator snapshot. Snapshot is a cultural. And our firestorm dot collection. And in here we need to add the same database name, okay? So files to that collection. So go back to this is post news. Only us where we have added all of our images and we need to check out that what is our collection and follower sports, because we will show here these semi misses. That means we will have to access the same database from this is post news. If you want, you can use suffer database. But for this project, we do not need to have. By database for gallery images, we are using this gallery images so that user can easily see all of the images that have, that already have in the job post. Okay, therefore, I'm going to show you, so it is not a real world project. Just I want to show you how can you learn flood on their friend's gonna go distinct. But when he will work with real or project, then you might need to add some extra functionalities. So this is the different things. Okay? So when you do the same database, and therefore I'm going to copy these Nim. And remember that if you do any spelling mistake, you are not gonna get this image from server. So therefore, you need to add the semi spooling and I've talked to add get documented over. Let me formatted. Right now what we need to return our not, we need to return our snapshot, snapshot dot and documenters. So this Chilean up quote will help us to get the data and upper this future. We need to create another, another feature method that is little b, our four efficiently getter. So future now again say and get refresh. And it will also take async keyword. And in here first we need to add a wet is going to be Firestone. I'm sorry, not fires two. It should be future. So future and delay feature dot delight. And I'm going to say duration nutrition is going to be the same again, so you can say three seconds. Okay? So these two, this one and a quarter will help us to add the refresh indicative. Let me run it again and go back to this gallery and inhere in any or if I do, OK, now we know we cannot do this because we have not added instruction in any negative yet. And in here, inside this refresh and you get what we need to take health from our set S dead at inside the set is still, I'm going to, I'm going to call this, get all is post images. So get all is partially miss and there is only stare 20 years I will refer to space. This, this method will call over here and it'll take the update data from our database. Okay, let's say. So now we have five data in our sports news. And after that we have posted five or six more beta. So therefore, when user and refresh disappears, when they will pull to refresh it, then this database we'll call again and they will show, then they will be able to show rest of five or 60 debates. It means it will update your database. And according to your efficiently ghetto, ok, it means whenever he will reflect your data, for instance, if you were refreshing your database, if refuting your UA this way, then your data will refresh. Okay, so for each and every refresh, you will be able to see them. And if you do any update in your database, alright? And it is really easy to use. Now we are done with all of this basic functionality, no less or move on to the body part. So inside this body part, first we need to as Fisher builder. And as all of you will know that the future will there contains two parameters. First one is future and our future is going to be our end get, get all. It's forcing us where we have written all of our functionalities. And therefore I'm going to call it get all, especially mess. And our second parameter is Builder. And let me formulate it. And inside this button, Linder and this builder, and this builder itself contains two parameters. One is contexts. And another one is love shot. Okay, now I'm going to add so I think it's really You can add your any debt out whatever you want, or you can mess this data here. So inside this builder, now we need to add a condition. Now we need to add a if condition. So if snapshot, it means this snapshot dot connectionist it equal, equal connection is turned up to which it means if we do not have any data in our database and if our user is requesting to get data. So this way then we must need to show them some progress, progress indicators so that they can understand that data. There might be a data and that is loading from our server. So each and every application we often see this progress indicator. So therefore, I'm going to show you how going to do this thing. So if snapshot connect stirred ecological connections to the waiting, then we're gonna show them progress indicator inside our in the middle of what you are. And therefore, I'm going to use this center widget. And inside the center which it, we can add a child and the child is going to be circular progress indicator. One line of code will help us do show, does circular indicator see? We can see, but as of now we do not have any data here. And it is giving us an error. It says they're never return null, return null and bla, bla, bla and many other things because we have not added anything. So if there is an error, then we will show them circular progress indicator eels. It means if we have n data and our net connection experience good enough, then we must need to show them some data, right? And an eels we need to return. So return, we need to add refresh indicator. So we need to add refrigerant liquid or because insight is represented or whatever we will have, we will be able to refresh to our a to the health of this refresh and a getter this future door July. Okay. Now this refrigerant ketotic two parameters itself. So first one is refreshed indicator that is on refresh and that is our refreshing together. Let us aren't gets refresh. Okay? And the second parameter is child. There is mandatory and our child is going to be listed on builder. And inside this list, we build a list with a builder and we need to add, but don't need to add, is that this literal pillar, fast parameter will be our item count. And in here we need to add snapshot dot and theta dot. And an item builder incidents Adam Miller, We need to write in interrupt here or context. Context and our index position. All right, so now inside this index position, now we need to write all of our code that we want to show. So before that, let me run it so that let's say, so now we come to the any error here, okay, now if I refresh it, now we can see this referred in the ghetto. And after taking the different integrator, we can see this progress indicator. And the reason is that inside this gets refresh. We have written our biggest numbering, our, our, our function M here. Alright, so now it's time to design our array. Okay, so if we look at our International USA gallery, then we will be able to see that inside the list we will learn we have ridden a container, okay? And this continuous containing the whole data. Okay, so first we need to write all of these things like marching and height. We need to differentiate on it and I want to wait. Ok, so first two, neutral agentic container and a container. And inside this container, we need to define the height. Height is 300. So highly is going to be three hundred twenty zero. And let me check the margin. Hamas was margin. So marginal was six and white. Watching is going to be acids at all. Mars instead. Instead of 6. Inside this, we need to add a child and a child will be a stuck. So a stock, and they start calling our children at which atoms. So inside the Chilean of widget when Internet all of the court. So, so now the question arise why I am using a stack, the WTO Mr. E's we can add we can add to Data on the on the, on the, on the top of the EMS or wherever we want. So therefore, we need to use a stock. Okay. And our first item is, our first item is containing a container and that is our image. So I'm going to copy this here, or we can write it here. So border-radius is 15 anyways dent on their di index dot data.gov where we have to write here. So I think I can copy it here. Alright, so we need to take this image. So I'm gonna copy this container here. So copy this one. And inside this stock, we need to do is to check. So first we need to define a container and add the keeper react and border-radius 15. And Charlie's him is neutron wrote MS and Snapchat or integral ydA, MS. And highest gendered and fixed more than walks bit.ly. Remember that you are using the same name that you have edit inside your resource openings. Okay, so now if I run it, now inside this gallery, again, there's Indonesian news. We need to go to these sports news. And here we go. Now we can see all of the images, but we cannot see any takes on top of this image. And therefore we need to take help of our of our position. Ok, this is called the position tech. And inside this position tech, we need to add a tough left, right child container and Ellen that I have mentioned to you in our professors, but therefore, I'm not going to mention it each and every line here. And I'm going to copy this position from here. Copy this, and it's paused on gallery, no data. And after that I'm going to present here. Okay. Let me mention you. Let me explain it again so that you guys can understand it clearly. So we need to take a position and this position, Thank you for us an opportunity to or replace r. What do add our data on top of in any field or any mess. And we are seeing here that got 40, it means it will get an especially from top 40, then left 30, then adding a container and we define the height and weight and decoration for the decorator. Background on this text and text is international news Texas term waterway discourse. Ok, so when you do use this one, and now let me do hot reload. And here we go. Now we can see in this international news. So instead of being Indonesian news, we should see here is post news, because eight is pushed news and we can add a little bit more space from top soil instead of 40, we can say 80. Okay. So here we go. So let me run it again. Right? So it is a dinner, okay. So it's pushed news. So we are done with our Goliath, but so far, so we have solved all of these problems for this post news and in our next part, so we have completed our international news or is post news and our latest post. Okay, our sliding, our slider and to now next part we will have to work with politics news and local news and, and, okay, so if we can done it and then our evolution and we're ready to go or verso and F dot for this part. I will continue it from our Next button. 33. Local news getallPost Part 32: Welcome back once again. In this part, we will start to working with all localness, where we will work with local news, all data, and then we will move through the gallery. Okay, so for that, first we need to, and I would like to mention one thing before jump into the coding section that, that UAT x1 is going to be the similar with international news as well as similar with the portioning. So we might take some quotes from here and just neatly pasted here. Now, let's move on to this local news, local news here. So in here, in these, inside this. So I think we have edit already scuffle widget. So inside is just create a class. And I have, I have shown you everything how to create a class here. And inside the scuffle legit, faster, we need to add the background color so we can take health from here. That is our is pushed news, so it's persona news. So I'm gonna copy this background color. So cooperative spectrum colour here and go back here and paste dispersion color inside this discover widget, as long as you are posting this background color inside this is Kuffler widget. It can be anywhere than it is to redefine. Okay, no. Before that, we need to, we need to create our first import. All of these packages for Astronaut dot dot is same, okay? And in here the thing is that first we need to create our future function Fisher method. So future is going to think at all local news, okay? Get all local news and I need to add here. And I think here. I'll try it. Now inside this missing, now we need to use this bar. Bar is going to fit a stone. Fire history is going to be Firestone. I think dog instance. And now we need to use this query snapshot is going to be the snapshot is in wet. First collection and I'm gonna say local news or tried to now dot and get documents. Okay, and now we need to return our snapshot, snapshot dot documents. Alright, I think we're done here. And we also need to add our feature function for a worker on refreshing the getter. So efficient now, and I'm going to say and get refresh. And it, it can be any name, whatever you want. But I always referred to at similar types of name so that, so that so that it can become easier to understand what we are going to do. I mean that it is always better to write some meaningful name as a function or variable, whatever it is. Okay? And inside this sketch refresh now we need to use it wet and faster. I'm sorry, not fire is true. We need to add Future dot delight. And any ironic that duration and inside the durational returned to segment. And I'm going to say cheap. Right now. We need to add another is called satisfied and inside the steady state, we need to add. Get our local lives so that 2000 energy-efficient and we can get this data. Now it's time to, instead of working with our body, but so where we will have pulleys and all of this body. So first need to add the official bolder and bolder contains two parameters. One is feature and another one is item build up. So feature is going to be ghetto locally miss. Gotta look on news and build our is going, going to be context and then index. Okay, so inside this index now we need to add, I'm sorry, we don't need to add an index. I should add here snapshot. And now in here I'm going to add a condition. So if snapshot connection is stepping got connection instead, co-equal connectionist state generating. It means if we have not any data, if, if, if we have no data in our application or if there is any anything wrong, then we can show them in Fergus, progress of circular progress indicator. So return and I'm going to enter sentinel so that we can see this progress indicator in the center. And I'm going to say this child is going to be circular progress indicator. Alright. Just to, to now add the column and now eels. It means if we already have the data, then we need to get all of this data. So for that we need to return so fast return refresh indicator. So if an indicator and inside dystrophin indicator, we need to write all of this. Got. So refunding it'll take to mandatory parameters. One is on refrigerators and get refresh. And another one is Child, where we will have pride, our list q-dot Hilda Solis. So let's put ought to be alert takes two parameters itself. Therefore, I'm going to add all of these two parameters. First one is item count and need to write a snapshot and data and Katlyn. And then when you do use this item builder, and in here, we need to add our context, context, and then only to use this index fret. So our code is formatted known. And now in here, we need to add all of our UI. So I'm going to check what we have written here so that it can look a little bit each year. I think we need to fast on it to add our citable as we are going to show the refresh indicated here. Ok, and therefore we need to wrap it with citable. So now we need to return here. So written slit level. And this level contains two parameter itself. First one is phosphine to add the key, and key has a value parameter. And Berlucchi, and these Berlucchi contain a parameter that is going to be able to index. That means we need to mention the index position so that it kinda stand for each and every index position only to do, we need to take our actions and eat has another mandatory attribute that is call r. Now we can, we need to write down here this action abandoned them. This is the name of the action and we need to add it here. So actual pen here, and then only to add the secondary. And this one, the secondary widget and adolescent is visible. So we can copy this here. And I'm going to paste it over here. Ok, so this secondary sections where we, where we are going to show deal adoptions and colors and blue-gray if you want, you can change the color. Let's say for this only parlance, we can set the purple whatever he wants, no doubt about these issues. And this dismisser follow will do the delete function. I'll just from the US. It'll not delete data from database. It will just electron that you weigh. Alright? Now this know this slit, it will says that it needs a required pyramid entities called child. So in here, I'm going to add this child and child will get content out. So let me explain it one more time before jumping to the more sections of so we have edit our sled level and then feel lucky than action bent only to use detection Penn. Because this uppercase and that we are using the discourse livable has this system like they have a couple of other actions. So we can use either dishonor nor did not, or, or some other or some others. So I'm gonna choose this slide scalable production pen and this second directions and give us an opportunity to add this button. And the distance will dismiss right now inside this container. Okay, now we need to define only to write all of this got, so we can write this court one by one r we can take, we can copy all of this code. So first 00 as we need does similar die from data. And therefore I'm going to copy all of this code because it does not make any sense to write sim for each and every time. Okay, so we need to copy this container, okay? And then we interface it instead of localness. So I'm gonna copy this news here. Okay, so this container updated dismissible, We need to copy this container and these whole lattes containing the whole thing. Therefore, I'm gonna copy it now up in our own. Okay, as we have copied this combinatorial apprentice dispensable, We need to paste this data. Okay? Now we've got an IDO. Let me take it where we're going to need a okay, so no problem for depth. So we're getting an either just for this navigator, TIM. Okay, so let me remove this navigator can now we do not have any universe here. And one thing, and before that let me form and all of the code. Okay. So let me explain it. I think I don't need to explain it. And though I want to spend one more time so that you can understand because we need the same agenda that we have done in our sports news and inside this as partners, i have explained and fitting whatever I had to explain it to you. Okay. Alright. So we have edit, we have a container that is height a 170. And these height means these container highest. Okay? So each and every point is going in the whole data and edit our border recursion. And we have divided it integral so that we can divide it into two part and fascial item is expended nearest containing the GCMS. Again the CMS clipper react image network and okay, and the thickened or IDM is containing a column. And inside this column we have a container and he says continent, we have a column where we have added our title and container. So after this container, we need to add another container and that is continuing this show. And inside this short, we are ending our abuse and operating hours. Isn't beauty justice where we have edit all of these thing. Okay. So now if I run it and if I go back to this local news, then we will not be able to see anything, but we can see the sufficiently ghetto and there isn't. Instead we do not have any datas. Okay, so I'm gonna change the background color of this local news of view details. So inside this box decoration, we need to change this color and blue-gray in deeper and see if it looks good. So d bar. Now we will not be able to see this data because there isn't. Instead we do not, we have not created to our database yet. Therefore, I'm going to copy our database name. You just look on news and go back to our database. And in here we need to add a new collection. Our collision is local news and create ID. And the moment that the same thing here, we need to write the filename and willing to these things. So you miss phil images and I'm gonna copy him or some image Laplacian from here, from my image, from the image that we stored in our first term. And the location will be this one. Bleak copy to download URL computed here. And I'm going to paste it here. Our second one is our title. So copy this title. And I'm going to write it fast. Local news over here. And next one is contained. And I'm going to copy some content from Loren ipsum. We always learn if some to copy some dummy text. And last one is for our few cycles. And this one is abuse. And we can say characteristic scale. So we have our debt for item. Let me check how many data we have. I think we have four data, sulfur. So one emus, one by delta x and this one. Okay, So we can now post it. Now go back here. Now if I come to this local news, and here we go. And we have successfully defended our localness part. And we can see our net text here, okay? And here we go. And we can, even though we can see our images here. So our data is correctly working and we can see the changes of our background color for this beauty does. Okay. So now I'm gonna pause to oh, one more here. So copyright here, auto ID field is going to be missed. And I'm going to choose some different images here. And I'm going to paste it here. Means that it is going to be ideal. Then we can say it is here and then we do as content. And content is going to be this one. And view is going to be 896 K. And I'm gonna save it here. And now if I refresh it over here, then we will be able to see our database will be updated and our URI will be updated as well. And here we go. Now we can see our second data here. And EDs are working perfectly. And it is working perfectly. So for first time, it is taking a little bit more time to load the image or images here. And here we go. This is the remains and this is our E medicine. Right? So our databases are working perfectly and we have successfully implemented these loose end part as well. Alright, so now we've sent off for this, but this video is already has become a little bit longer and therefore I'm gonna close it here and in our next part will continue this and view details are shown for this local news. Thank you for watching. 34. Local news postDetails Part 33: Welcome back once again. In our previous part, we completed on now called Local News options. Now in this part I'm going to show you how can we add in this imbue details property for this local lists? So we already have these local news, local news status, but T2 would not have any data for here. Therefore, first I'm going to add the class name. So fast import material dot. Then we need to add here import our firestorm. Without these firestorm, we cannot do anything. So if you want to work with firestorm, we must need to import our Firestone Library. And then we need to add our dot-dot essay. Alright? No, first and foremost, we need to create our budget where we will have to mention our class_name. So I'm going to say local news details. Alright, it'll automatically add whatever it should be. It will be automatically added forever. It should we, for instance, so here and here again. So we do not need to think about it. And Nas just need two and faster. We need to add to your documents snapshot, two snapshot. And now we need to create a constructor or forward plus. So constructor, local, all news, local news Cindy dealt and need to add this undocked snapshot. Okay, so we need to pass the setup for this pedometer. And now inside this local on news, we need to add this navigator dot on push in here. But before that, we need to import our weekly, import our plus them here. So flutter. So Becky's flutter, so need to use a fused, then it will use the local news class and upturn, then need to use local unless local leaders, local olives and local Leslie GPS. I just added this finding here so that we can access this class from here. Now is scroll down and go back here. And inside this inkwell, we need to add our navigator, navigator dot of data build context. Dot push is going to be new material pairs shout. And inside the video-based shout, we need to add our context. And then at, and then afterward class name, that is our local details news. And it will ask for a parameter. So let me formulate this. E1. E2 will ask for a parameter, and that parameter is our snapshot dot data. Militia. So now we are ready to go. Now it looks we are ready to go. Okay, and remember that we have added the same Nim inside our views and inside of a container. Wherever we have to write lake filled Nim. And you need to write the same Nim inside here, inside our digital space again. So what we have fuse field and a diverse field of views. And then we have content and the intent, we have content and we have detailed and we have image as well. Now, inside this Lacan Institute space, we need to design all distinct. So I guess first we'll need to define our scuffled widget so that a scuffle legit and inside this scaffold which we need to add our effort and blood contains a upper and detail is going to be text. And our data analytics tool be local news. Didn't spend local news. Detail space, local news and digital space. And I'm going to add the background colors so we will have to write down the assembler green color. Therefore, I'm gonna open this is pores because okay. Where we have already done all of the court. And I'm gonna copy this background color from here. So copy the spectrum colour and paste it over here. Okay, now let's run it. And we are in local news now if I click here, then here we go. We are in local newsletter space. If am the truck. Yes, we're over here. Okay. Now, yes. Unless we also need to add a background color, so copy is perpendicular from here and paste it here. Run it. If we run it, we will be able to see it here. Ok, so now inside this portion you just need to edit list few nano what you miss. Okay? So first I'm going to add the somebody deck here. Somebody list, few dot list view and Chilean dot widget. So instead of just for what, we need to add our container where that is not fast continent and is fast communists continuing our MS. Okay, so I'm gonna copy this fast container here so that it can make our life a little bit more easier. Okay? So this container is Hades to 50. It will be able to mysite and marching and clipper react border-radius and image to network. As I told you earlier, we need to add the Sami misnamed that we have edit localness in case if you change your images, your database field name, then you will have to write the same Nim according to, according to your local news that A1, that is your database limit, not database. That is really diverse field name. Okay? So we have a disseminate, therefore, we should not change it here. And now if I run it, you'll be able to see this MSE. We can see that humans. And even though if I go here and we will be able to see, defend Amos again is taking a little bit time to load the data, but it is working perfectly for show. And after that first 2020 sides. So let me add AES S-box. So sidewalks and need to add height and height is going to be 6. If I'm not wrong, I guess expansion. And after that we need to have another container. So this is the remains. And now if I go here, you can see this image here. Okay, so now I've done this, I spoke, so we need to add another container and they will continue to hold data. So therefore, I'm going to copy this whole container to make our life a little bit more easier. And I'm going to be astute here. Okay? So this container is continuing over. This container is continuing our All you ended up like for instance, we have fast in it to add the container, hide our machine and decoration and our card fuel inside discard view, we have to add a column and this column is continuing to continue. First, one is continuing to bear a row, and one is for Sakalava tr, and another one is full text, and a second one is for our views, and third one is for our main content. Okay, now if I run it, share it, go, run it. Here we go. Now we can see our data over here, but we got an error. So we need to work on it. And we've got an eager for the largest size of white. So therefore, we need to mention our white inside our container. Okay, So this continuous continuing the whole white straight. And therefore, when you do add it right here, so white is going to be a media query. Media query. It shot off the disability context, George size and total weight. And two need to add 1.5 so that it can create 1.5.0. I don't know how in whose ratio it decay, but it takes a space setting. So 1.5, which is going to working solely to do okay, just walking by fully for this one, but it is not working for me for this one. So what we do acquitted of contest, which is 0.10.5. Okay. Let me Johnny taking okay. So local news and Dido's. Okay. We're not getting it here and it is not working here. So therefore, I'm not going to add. So if I do it this way, it is not working. So what about this white 350, I'm sorry. Local news details age is not a working. Ok, so we are getting an arrow here. And it most probably for the height of the CMS. And why it is going to retrieve 50 or 50. But it is not working anymore. All right. All right. So I think these technologies containing in this container that is inside the card view, and therefore I think it is better to add or white over here. So white media query dot off context, dot size, dot white. And I'm gonna say 1.5. And I'm going to remove this way it from here, because this is our main container. Now if I run it and here we can see these white here, but 80 sticking correctly, but it's still about getting you either. And the reason is that we need to define the high desktop. So Heidi, it'll be a media query, dot off context, dot size, dot height. And we can say that 1.5 Cyril Hazard. Okay, so it is not working. So I think we should, we should define the height in this way. And it went to 0. And instead of seeing these 1.5, we can say these 0.5. it'll give aid is uniform if I went into it. So whatever we're getting where let me check for international user is post news. If we're getting any year. No, we are not getting any odor from here. Okay. So I can perfectly for his post news and what about those international news and AD? So working perfectly. So this row item and this container is continuing these data. Take snapshot to text and circle_area hotter. So we do at the height and weight. So we just working for international news, but eight is not working for local news. Alright, I think we have, we have done a little bit mistake because we have rapid with this cycle levator. Therefore it is not working. So I'm going to remove all of these Weight and Height and Mercy We are in here now. So this title, so let's add this tidal inside a container. So add a new jet and we can say these container. And in here define the height and weight for this one. So we can say height is a hundred twenty zero and a y is mid-January dot of contest dot, size dot and weight 1.5.0. Now Hiroko, so our problem has been solved. And instead of single 1.5.0, instead of saying 1.5 judah, we can say one country. Then it will create a little bit more space. Here you go. I'll tried so all data ISO working perfectly. As of now, we do not have any problem. So local news and our international, yours as well. Alright, so we have implemented our local news news portal and I'll call on local news and didn't spill options. And all are working perfectly. And in our next part, we will work with our local news or gallery options. So I think that is enough for this part. We will continue with some more next. 35. Local news gallery Part 34: Well, welcome back once again. In this part, I'm going to show you how can you work with and gallery. But for local news. Therefore, we need to work with our with our local news, with our local new scullery. Ok. So inside this logo on his gallery, we have glass. Okay. And now in your faster, we need to import our foster energy input of a firestorm. And then we need to import or direct addressing. I'll change so fast, less clear here. And as we will take the same database from our local orderliness and therefore would not need to create any suffer database. So go to this local onRestart and I'm gonna copy this feature from here because we need to sum and we also need to use this deficient decoders. So therefore, I'm gonna copy all of this to functionality here and then paste it here. Okay, you do not have any Ido so far. Now we need to remove this container and add a scuffle legit incidents couple legit. We'll need to add all of these things. First. So first ofs or long, I'm gonna open this is person gallery so that I can take it easily. And we need to add this background color. So we'll go to this gallery or wherever or whatever you want that we have done previously and copy it a background color. I'm sorry. So copy that background color. And the stewardship. And I've got that. We need to add our digital builder and they need to read all of the steam. Okay, so I think I can simply copy these full feature builder because I can copy this full body. So go to this possibility and copy these whole future builder. So copy this whole feature border and come here and visit here. So we've got to Juanita and the interest that you get all this Proximus here and our metonym should be good. So chance to future Nim feature functionality, Nim. Ok. So all has gone rate as Oliver has gone, now run it. So our local news and go here and see, we can see though the R&D lit off from here and go to this gallery. And in here we can see this is post new sticks. So I need to change this to local news. So chances to local news. Look on news, and it will be good. I think if we can change the blue-gray tool, the porous it will be looking at, it will be look good. And see, we can see the image here. Now run it. And here you go. You can see this orange color and it looks good. And anywhere for this one we can see a is 20 months and there is only stare at this. Image sizes by default is smaller and therefore we cannot see it larger. But if we can add the legitimates, then definitely we will be able to see these n. As you can see that we are able to do a refresh. We can do refresh even though our progress indicator is also working. So I want to local news and gallery party Stan here. So we have added our federal builder and it's that we learn. So all of these things are same. Just we need to use these, get local news and Buehler is billers snapshot. And inside this eels efficiently ghetto on refresh and list, we don't build land container and just does n distinct. So continuity is 200. And as INSEAD, old and historic container and worried emails and position of left and continuity is height February tribute, Aboriginal box degradation. And he said I'm going to be this element. Ok, so we have done our look on uninspired Sofa doll. So we get all of the images from all of the data from our server. And then we can see it in view details. And then we can see the Galleria slot. Alright, so old data. So all task has been completed for local news boarding, Denniston news, as well as for sports news. Therefore, I'm going to move on to politics. Thinks, I think it is enough for this part, but we'll compute our politics things. Thank you for watching. 36. Politics news getallPost Part 35: Hello, my days credential. Welcome back once again. So we have completed these three functions cheapest so far, dielectric news. International news is post news and local news. And in this part I'm gonna show you how can we work with political lives, okay, so we will take help from all of our previous of shows that we have worked. So it's partners has been completed. Local news and politics names. So first we need to work with politics only store tart. And as you can see that we have added this is Kafala widget. Okay, so before that I also need to add these files to hear. So import Firestone. And we also need to import our dark dot, dot dot s. And we also need to import our spreadable, okay, flooded sled, apple.tar. So fast when you hear it, we need to create our own database and we will take help from our future. And the way I'm going to create a method or function, whatever you want to say, you can say and the future get, get all politics poster. And in here we need to add the variable. First row is going to be Firestone. We can see it fires to adopt instance. And I'm going to say that it is going to show is your weight. And I'm gonna say this first dot collection, politics, news and, and tie and, and to add get documented. Now in India wanted to return this thing, return snapshot, dot document and inherent wanting to eat up the snapshot two documents, although slower, database functionality has been completed, now we need to add more functionality for our efficiently ghetto. So future is going to be null and we can say this and get refresh. I'm sorry. Okay, refresh. And in here we need to add a async keyword. So in wet feature, dot delight and I'm going to add this derision and electron is going to be second. She's going to read it. And now we need to add a steady-state. And inside the steady-state, we need protect health for get all politics post. Okay, so now inside this scaffold, which it, we need to add all of our UI design. So we need the similar type of data. So that is all digital images and content and the fuse and as well as this one. So therefore I can copy easily any of these openings. So therefore I'm going to copy this whole body part. Don't local ordinance or you can choose from international news or sports all news as well. Okay. So in this body tag is containing the whole data. So we can easily copy it here and then you can basically here it would only to write the same code, each and every damn. So it will, it will make our life a little bit easier. Similar copy this body tech that is containing this future and share ego. So dino, this body like the whole future will their coat. I'm gonna copy C. And now, No, get back towards this politics on news. And inside this scaffold which we need to add, we need to paste it. Alright, so we are here now that we got and we got to year. So one inner is for our navigator. Then I'm gonna remove it here. Okay? And, and under Hillary is four and our function M, Okay, so linear we can see our future is kept on local news. But in here we have it in our enemies, get all politics news. So we need to use it yet. So I need to change it here. Alright, no problem. Tsunami just working perfectly but we, but I forget to add a background color so we need to copy the American cholesterol. So background-color copy here. And basically chair. So you can paste this bug and color any fair incentives is coupled widget, as long as it is inside this scaffold, Egypt, you will not have to face any problems. Okay. But make sure that you were adding these background-color or any court 2031 to add inside the the scuffle legit, otherwise, it will not work soil and the switcher builder of future builder and the same thing. And we need to add the same image, like we have the similar field, emails title content. Okay, now I'm going to run it. And here we go. Here we need to go to politics news. And we can see the progress indicator as well as we consider refresh indicator, but we do not have any post. And the reason is that we have not created our database yet, and therefore we need to copy our database inside our, inside our firestorm. So I'm gonna copy this data based on that is politics news. And let's move on to this. And in here, I'm going to copy another collection, copy here and next year are there, Tim? Our field name is MS. And copy any MS. I can choose this element and this one is predominantly rural. Listed here. At Dido. Title is going to be this one. That it will be this one and content will be and content will be this one. I'll try it and we have another fish that is called fuse. And abuse will be 56 square. Like Yeah, whatever you want, you can add it. Now safe thing and now you're in inside politics nukes and let's do pull to refresh and most probably will be able to see our data. Here we go. Now we can see our data and hopefully we'll be able to see our MSS. Well, here we go. We can see our EMS. Let me post a few more posterior fueled. You miss. I'm going to copy and other emus and downloading early in this one listed here, our second file's title. And choose a title from here. And then listed here and dishonest content. And for content it will be this one. And plus twenties for abuse. And PUCs, 25 k. Let me refresh it again. Hollywood beveled. Our second data, share ego. We can see our string and post. And it is working perfectly, right? So it is working perfectly and we do not have any data inside our galleries. See our hemisphere. No. I think that is enough for this part. We will continue with from our next part. Next part we will add our viewed it as I think we can change the background color of this beauty does so chance this deep warrants to departmental legacy, how it looks. It looks good, not bad. Or we can choose amber color or embolic sent it kinda of a white color like that. Ok, so for this one, we can choose it empirical and Florida for that. So that is enough for dispatch. And let me show you one thing that the first level is working on, not because our slide herbalists marking here perfectly. Okay, so there's a tourist. 37. Politics news detailsPost Part 36: Welcome back once again. In this part, I'm going to show you how can we work with of fealty does space. So in this part I'm going to show you how can we set our beauty does functionality for our politics news. So for that first 20 people been our politics news details and inherit. We do not have any data even though we do not have any classes yet. So I need to import material tart. And in here we need to import our file store. So flood or fire restore, bloodflow restored and anywhere we need to import our dark noticing as well. So now inside this politics in details, what we need to do. First, we need to create a super legit. And now it's time to define our glass. Then we can say politics. It does. Okay? So now we just need to create a constructor fastening to add our I'm sorry, not crystal should we need to add our documents Stanford over here? So documents not file's going to snapshot. And you glad this politics, politics details. And in here we need to add this dot snapshot. Alright, so now go back to this politics on news in here. We need to add this based routing here in Sandy's on deaf. But before that, we need to import our politics detail space over here. So import Becky's flutter. Fuse. Politics news and the sun is going to read up Paul Dix news. I'm sorry, we not Nicholas politicians gallery but only paired the details. Ok, so politics needs to go. So now we can easily access our glass from here. So first we declared our navigator. So navigator, navigator dot of context, dot push, pushes, scream to be new. Material pays shout. And according to context. And in here we need to ask our edward class_name. So politics, new details. And we need to add here, we need to add. So let me formulate the space. And inside this pathology news details will need to add our snapshot and our index. So we need to add our snapshot, snapshot dirt and data. And in here we need to use our index. All right, so matching-based trout builder context and politics, news, and snapshotted data. So now I think we can easily move on to this, or politics needs to just so now it's time to work out inside this politics needs and detail space and therefore passed only to remove this continent and need to add our scaffold budget. And if I'm not wrong, we need to add advert inside our digital space, okay? So we can simply copy this piece from here, from our local news editors. And because we need some apart and just need to change this thing, I can say this a politics news and it has space. Politics. Politics news. Instead of saying, I think we do not need to say this, just this ligand said this politics news. Now we need to add mechanical, SO, so-called the spectrum colours and copy this burden collapsed and are sort of distinct outside of this AB bar, but inside of the scaffold. Scaffold, we need to use the spectrum colour. Now, if we look at our local news written pairs, we will be able to see that inside this body we have added a ListView. Inside the list who have taken all of this data. We just now showed images, our title, and our widget and all of these things. Or I'm going to copy this and body technically so that we do not need to write all of this code to make our life a little easier. So I'm gonna copy all of this team from here. So body coffee here. And go back to this politics details and isn't here. And in here, we need to pay sit here and I hope we will not get any reader. Ok, so just need to make sure that you have written the same name so that we have written in your politics news, all new space. Otherwise you won't be able to get data from there. Okay? All anions should be the same. So detail and detail and all of these thing again. Now let me run it and see how we can see. Here we go. Now click over here. And we are in politics, new space. And we can see our Dido, our fuse, our supply of water, even though we can see our content. So all of these team is working perfectly, even though we can see our images. As of now we have to MS. inside these, as of now we have two images inside this politics news to images means to post. So we can see this images. And here you go, it is working perfectly. Now is time to work with art and galleries. So in our next part, who will work with the singularity function? So thank you for watching. 38. Politics news gallery Part 37: Welcome back once again. In our previous part, we have completed our view details so far. Now in this part. Now in this part, we need to complete our in-gallery sections. So first we need to open our first store. We need to open our politics and gallery. And in here we have for our gallery Klaus, okay. And we have our scuffle legit. Okay? Now when you hear it, we need to add our all of this functionality. So first I'm going to open this local news gelato tart. And in here we need to see what do we have written. So first we need to add our database name and the switchers. So for that, I will, I will go to this politics openness because we need to get data from some database. So it is better to copy all of this future post from here. Ok, so I'm gonna copy this on ket all, all, all politic post and GET refresh function. So copy it here and paste it here, and paste it here. And the reason is that we have not imported and they are packages yet. Therefore, it is showing us an error so important when you do use flatter, flatter, flatter. I think we should act firestorm, so flat firestorm and only to import dot-dot async. I think that is all about. Okay, now are all ear has gone. Note we are ready to go inside to discover widget. So in-gallery. So inside this scaffold widget. Okay, so politics all Valerie again is logging. Instead it's Kafala jet fast only to add a background color. So I'm gonna copy this background color, copy background-color, and pasted inside e-discovery legit, as long as you are posting it inside the discoverer legit, it is totally fine. You can post it anywhere inside discover legit. And now we need to use this fissure builder. So I'm gonna copy this whole body part from here because we need to have the assemblies and issues. Right now. We just need to change our future function. That is our nano shoes right here. Okay? And remember that you should have the same database name and that is your politics owners because we will take the images from our, from here. Okay, so copy it here and based eat, Chef. Okay, now run it. Now if I go to this gallery, and here we go. Now we can see our images here. But still these images, a shorter immersed in DC money, say small MS, in small pessimists and therefore, it is not covering the whole white. And even though we can do our pull to refresh functionalities. So EDI, so working perfectly. Okay, it is working perfectly. Raise eight is working perfectly. Ok, so this image is working perfectly. But do one thing, just change the background color. Okay, we also need to change that text as well. Instead of saying local news, it should be our politics names, politics, news and chance, tobacco on color and color all the amber, amber accent. So shine it here. And here we go. We can see, and it'll be good if we change the text color, white to some other color. So we can choose it to blue-gray, four different colored, as it is, a little bit lighter color and sharing ego, Nova Eclipse got not out. Okay, so 80 is working perfectly. So burglaries working perfectly are all post is working perfectly our pull to refresh functionalities, even though our circular progress in degrees working perfectly and we can also go to beauty just best. So all of our functionality has been completed. So we have done all the features that we had to complete in this application. So we have done with these international news. We have download initiatives, gallery international news and international newspaper details. Okay, let me check each and every part. And it's pushed. News IS portfolios is done. And if you go here, then it is working perfectly. We can call it as well. And for the gallery, it is also working perfectly right now for the local news. They can also go here, they can perform. We can go to this beauty, just space. They can see each and every data. No problem for that. And even though we can go to this gallery pace. So eighties working perfectly. So each and every news items is perfectly trained to know their smartphone to this politics nukes and numerical, we can see our politics names that I use here, and it is also here. Even though we can go to these digital space as well. See we can see the local image. It is taking a little bit ten because internet experience a little bit slower. And therefore it is taking a little bit more times, but just not a problem, but all the functionality is working perfectly. So, okay guys. So I think we have done a lot of work in this project. And see, and you can see the CSA just digging a little bit time. And next part I think we need to work a little bit more with this definition. We will just send them to the space, to this main paste so that they can move it from this navigation drain as well. And then we will be done. So thank you for watching. See you in the next lecture. Thank you. 39. Complete navigationDrawer Part 38: Welcome back once again. In this part I'm going to show you how can we sent our EHR? How can we sent our HR TO these navigation drone? Okay, so now we cannot move back to any pace. So when we went over, users will click any of these items inside. I want evolution driven, like local news, politics news and his Porsche news, whatever they chose, their will and we will send them to this international space like this homepage, where you'll be able to see diminishing news and a gallery and they won't be able to access all of these features. For instance, they can go to this beauty just as well. So for that, first we need to go to our dot dot where we added all of our navigation drawer functionalities. If I'm not wrong, our navigation diaries after these APA. So here you go. This is so Navigation here. And inside this jet navigation tree, we have all of our Netherland. One item, so fast, Taiwanese international news. Ok, and inside it intends to news. We added tower on depth. And we added each previous part in our fevers parcel when we were working inside our navigation drone. Therefore, it is here. And I think it seems the navigator of quantitate pores is inside each and if free. Each and every items. So local news answer and petitioners. So now we need to access this controller class. Now we need to access this controller news. And inside this controller, we have all of the, all of we have 4451 is financial news, local news, politics news, and is post news respectively. And here we have implemented our tab bar. So therefore, when either on-click these and we will send them inside this discipline where they will be able to see all of these features. Okay? So from this file they can access and these two fall, okay. Isn't this to Deborah option so it is it'll be good if we can send them. So we put that for that inside this home. We need to import all on this Pegasus, but it seems we have already imported here. So just important flood earnings put a left controller and these, all of these className, all of this final and I'm sorry. Okay, so once you are channeled that now we can move from, now we're going to jump into our coding session. So inside this on teff and this one is for international news. We need to add or if we get a lot of contexts, dark push is going to be new. Material pairs, shout, and anywhere we need to write down our context. And our plant there only to add our glass template is international news. And we can format it here. So all right. So instead they entrepreneurship. We haven't been able to apolar poof and our navigator met your nose and our international news. Okay, so this cluster miss our disk cluster that is inside this controller, okay, in this cluster and this cluster, and therefore need to edit. And the same thing we need to do for our, I think it is better if we can copy it here. We don't need to write it. So copy it and go back to here. And inside it is for news, we need the same thing. Just change the class name, class_name, Movie is pushed news, let me confirm distinct. So open, this is pushed news incidents controller and the class name is especially ok, so it is done now for local news incentives on deaf, wanting to edit here and for the local news. And doing it right, your local news. So look on news. Okay, let me check it if it is right and wrong. So local news. And in here we need to gender of shows. And it is called, that is called politics news and the file name is politics names. And this one is politics news. Now if I run it, alright, so now let me open this navigation TAR sand international news so we can see gallery and this one. So again, go here now and go to these is pushed news. Now we are in a sports news. We can access all of this thing and it can do all of these things. And we can go here, gallery and we can click here. You can go anywhere, wherever we want. Our shite. And for the local news is also working for local news. Okay. We can access all of these things and see all of this thing. And what about politics news. And in here we can see our politics Neves as unless our IN Gallery. And the last but not least, we can also access our field EDS from here and there. A lot of functionalities that we have implemented in this project. For instance, we have intimidate the slider. This latest post features and animation. Ms. Lake, image, rounded border and slight level data. And if you want we can delay td and many other thing actually. Ok. And again, if I go here, a little progress indicator and refresh indicator as well. So I think that is for this course. I hope you have learned a lot of things from this course. And thanks for joining this course.