Flutter Blog app Using Firestore - Build a Complete ios & Android App

1. Introduction: Welcome to this course. My name is diastole shortly and I'll be your instructor in this course. In this course, you are going to be a flop if fully functional flutter block app using Firebase Cloud Firestore. Here is the application that you are going to develop by the end of this course. All data are coming from firebase, Cloud Firestore. In this course, you will learn that our material design, how to work with that, at least for Builder, how to pass data from one place to another place and many more things. So now you're still time to enroll this course. Still in the course. Thank you. 2. Design App Bar : Hello guys, welcome back. So in this part, we are going to start our new project and that is our flutter blog application using Firebase Cloud Firestore database. So fast, we need to create a new project, okay, create a new project. So go to this file, new and new flutter project. Select further application. And we can call it flutter block. And Next and Finish. We can just this window. Okay? Alright. It will take few time to complete this whole grid Oldfield process. We need to wait till that. Okay, I think we're ready to go. So here you can see our application and that is a blank application. And in here you can see some auto-generated code that is provided by flutter. So far we will do. Maybe you will not understand all this code and that is a blank template, or you can say. So. We will need to work with this template. So what we will do, we will simply remove all this code, select control, a stream of OK. Now First we need to import our material duct. Okay? So what we need to do, we need to import, import material dot ok. Now in here we need to outright our white men, white men. And now we need to add our run-up. And design f has an Apple widget. So this one is going to be new material. Ok. Now in here we need to add our home keyword and we will define our home activity homepage. That means when a user will click this application, then who is application? Always pairs with open so that we don't have any pace. So we need to create a new page. So go to this leaf folder and create a new data file. And we can call it home-based. We're just separating all this code so that you can understand very easily. Okay, so now in here, we also need to import our message alert. So import merchandise, but now we need to define our stateful widget. So a stateful widget, and we can call it this class name as home. Okay, So now this home is going to be this home. You can see now in here, we need to add our homepage and pesto dot and inherited. We need to add our from clause. So this whole class is this Home class that we have just created. So what we did here, we just simply separate all these coats so that we can understand very easily. Okay, So we have created a new class and that class time is home, and this class container is stateful widget, and we just cast it with this home keyword inside of our main runApp material EP. Okay, so when, when we will run this application, our fast-paced will load and that is our homepage. Now we need to start designing our application. So in here we can see widget builder, build contexts, contexts, and return new container. So for this application, we need to import our scaffold widget, remove this container and add scaffold widget. Inside. This is legit. We will do all this code, okay? This is coupled has a lot of property that we can use for design or epic. Okay, so first we need to add the upper for our application. So if you want to add the app bar, then we need to add these AB, AB bar, AB bar containing ampere. So new app bar. Then insert this about, you need to add our app, but title and background color At title and title, obviously a text. So we need to add text. In here. We need to add our text data and we can call it flutter. Look at, okay. And we need to define a background color for our ampere. So choose background-color and we need to choose colors. So colors and thought, we can choose red X in color. Now, if we run this application, we will be able to see our, we will be able to see your application. So very similar to over there. So here we go, where you can see our our application and our app bar, a title and a background color. Okay, Now the one thing, I'm just adding some actual design so that you can learn some material design. Then we will implement our Firebase back-end with this application. Okay, so here you can see, so do one thing in here. We need to add two button, okay? So now see how can we add button. So inside this AB bar, this upper has another property and this property called actions. And action has a widget or property. And inside this original budget of property, we need to add our icon button. So new. Icon button, and it will give us two parameters. One is icon and one is on paste. So for icon and for unpleasant, for icon is going to be new icon. Icon has icons of property. I can start. Now. If you press icon start, then you will see some built-in icon that is provided by flatter. So for us, we can choose this search icon. And for this own pace, what does it mean? What, what it will do? So if you want to use, I'll click any user click this button. Then if you want to take any action, then you need to work with this entrees. So for now, we will not do anything. We just simply at some debug print so that you can understand debug print. And we can call it search. When user will click this button, then we will print in this source inside our terminal. Okay, so do wanting, run it. Now here we can see our icon. Okay? Now if I, if I click this icon here and open our terminal, now we can search keyword. Okay. Now at one more button, new icon button. And again it will keep us to parameter, icon and unpriced. So for this icon, we can choose new icon. Icon is going to be, I can start on pressed. We will add debug print, debug print. And we can call it at, okay, now run this. Now here we can see two icon. And if I open up our terminal and you can see at answers at such and such, okay. So our our bodies and is complete. So I hope you understand what we did. Let me explain it again. So what we did in this part, we just created a project and we remove all these auto-generated code. Then we added these white men run-up and Home app. And this is the main, we can call it. This is the header of our application. So you need to write this environment and inside this run-up to define your fast-paced name that you want to run. Ok. Now, in here, we have created a stateful widget and we added our scaffold widget. And why we need to use a scaffold. A scaffold which would provide us some decent property that we need to use for our application. We need to use our scaffold widget and insight as a scaffold widget. If we want to add AB bar, then we need to add this keyword and a backyard container. And inside this up, but we need to add all this property that contain these apart or that we want to add inside this app bar. So we added a title and title, obviously a text. Then we added a text, and this text is this text. Then we added a background color. You can see this background color is this red X and background color. If we want to add tool icon button inside our app bar, maybe many of application you see the icon. So how can you do this? So EPR has another property called actions. And actions. Actions is a budget of property. And inside this widget or property, we need to use this icon button. So new icon button and it contains two parameter. One is icon and one is on pressed. Inside this icon parameter, we need to use our icon that we want to show. And this on-prem I will call us. And these, and these on-page will work when we will click any of these icon. So I hope you understand it and that's it for this part. We will continue with our next part. Thank you. 3. Drawer Design: Hello guys, welcome back once again, in our previous tutorial, we have successfully designed our app for our icon. And in this part and do one thing, we can add a navigation drag. Okay? So this is our AB bar and this is our app bar, and we can simply comment out here. Okay, now, it's time to add navigation rare, okay. So if you want to navigation trail, then we need to use in this drought QR. And this drug could contain a rare, so rare. And inside is where we need to add a list fields. So at child is going to be new list field. So why we need to use list view? Because Lisp will give us the children of widget. And inside these children of widget, we can add multiple lists so that we can just call, okay, So this is our dispute and list2 has a property called children of widget. Okay. Remember that you need to add in these children on budget. Otherwise in this list we will not work. Ok. Now in here, we can add our all this data. Now if we run this application, then we will be able to see in irrigation red, you can see navigation rare, but these limbic center list view isn't blank. Okay, now it's time to add data. So first what we will do, we will add inhibition, rare heater and background color and text, and flutter provided us a new attribute and call it new user account header. It will give us two parameters. One is account name and another one is account email. So add some dummy icon them. So obviously it, it is going to be a text. So new text and we can call it code with why do you see why DC? And for email, It's going to be text. And add text. You can call it to white and just add some dummy e-mail at the rate gmail.com. Okay? Now if we want to add it back, now, if you run this application, you will see a by default color that is in blue color and you can see our text and our email. Now, if you want to change this color and then how can we do this? You can simply add decoration. And this declaration has a box decoration. Knew this declaration has a boxed equation attribute. And inside this box decoration, you can add this color and color is going to be, we can choose colors. For this one, we can choose purple color. Now if you do what reload, then we can see our color changed. Okay, so we have successful edit our navigation to our heater and to text and we change the color. Now it's time to add, it's time to add list of item used in here. Now we need to add new ListItem. List, at least tell us two-part to property. One is titled. And obviously this title is going to be our list title, that means own navigation, item title, new text. We can add it. You can call it first place. Now, if you run this application, we will be able to see a text. Here. You can see at text. Now if you want to add an icon, now if you want to add icon with this text, then happening to this, there is another property called leading and new icon. And this icon has icons property is for icons. We can choose some random icon. And if you want to change this icon color, now, if you've done see, you can see icon, but if you want to change this icon color, how can you do this? You can simply add color. And color is going to be colors. Dark, purple color. You can choose any car, whatever you want. You can see this color. Now. If you want to add icon at the right side, then how can you do this? There is another property called trailing. So if you change it leading to trailing, then you will be able to see this icon right side. Okay? So what does telling me is if you select trailing, either icon will add right side. And if you, if you select a leading, then your icon we'll add in left side. Okay? So for now, we will choose this left-side icon. Do one thing at few more, few more items. So new style. The title is going to be new text and we can call it second pace. And leading is going to be new icon. Icon storage. Or can choose Source and change this color. Color is going to be colors. You can choose red X in color. At another ListItem. List title. Title is going to be new text. And we can call it that pays. At leading. This one is going to be icon. So new icon, icon has icons property. So icons, dot. We can choose some random icon and add color. And color is going to be colors and dark. Orange color. At another list style, newness title. Title is going to be new text. And this one is going to be foot pace. And leading is going to be new icon. Icon is going to be icon Store. We can choose this menu. Icon and color is going to be colors. Yellow color. Now, if I run this application, we will, we see for icon, I think we need to change this yellow to green because we can see here in background, white background. Now, we need to add new divider at a divider. If I run this, we will be see, a divider, but you need two different height and color. Height is going to be 10. And color, you can choose colors. Black and hairy. You can see this color. Here, you can see this divider. Okay? And after that, you can do, we can add another listed newly style title. And this title is going to be our new texts and close. Okay, Now we need to add for this icon, for this style, we need to add a trailing icon. We will just chilling icon. New icon. Icon is going to be icons. We can choose close icon and change the color to color. Color, starch, red color, and run it. Now, you can see we have tacos blue design this. But if I click this close icon, this Navy vendor should close, but, but it is not working right now. So if you want to close this, if you want to collapse this Mutation trail, when user will click any of these icons, are this close button, close icon, or disclose text. Then what we need to do, we can simply add onto her property, her on tape property. And in here, we can pass our inside these curly braces. We need to add navigator, thought of as a context and dot pop. If you write this line of code than if I run this. And if I click this icon, now you can see it collapse. Okay? I can click it, collapse. Again, clip it, collapse again, click eight colors. It's working. So we need to use this onto her property, her and when you want to take any action. So if you want to close this eviction where you just simply need to add navigator dot of contexts, dot pop. So let me explain it again. So if you want to add, so first of all, if you want to add navigation rare in your application, so fast, what you need to do, you need to use this keyword, okay, fine. This drug cured container dry air that is provided by Flutter team. And insert this drought, we need to add a list view and we've simply added to edit a child and lists. And these lists has a children of which at property, so that we can install, insert this children. We have added a new user icon. We're headed. Why we are using this one? We are using this one because we added a navigation header and that is provided by flutter. We need and when you will import it, it will keep us to parameter on this icon name and one is e-mail. So echoed them is a text. We added a text and if we change this background color, then you simply need to add decoration and change this color. Now, if you want to add a list of item inside Univision rare that you'll need to use list title. There is some other stuff you can choose also inkwell, but for now we are using this list. This list will give us some property and one of them is title and tightened is a text. So we added new text and edit it takes them and this text them is in this text name. And if you want to add an icon with this title, that you need to choose this leading property, then you need to use this new icon. And you need to choose these icons dot cake, and we're changing the color. If you choose a trailing, then you will, then your icon we'll add in the right side. We have selected for our, for our clothes option. Okay. Now, if you want to close this application, close this navigation dryer. When user will place these any of these items, then what you need to do, you need to just add a property and inherit. We need to add these navigator dot of contexts dot path. Okay, so we have successfully completed our Navigation dragged part. So we can comment out here in their Center for this part. In our next part, we will connect our Firebase database and then we will start working, working for the rest of the part. Okay, so see you in the next course. Next part. Thank you. 4. Connect With Firestore: Hello guys, welcome back once again, in our previous tutorial, we have successfully designed our navigation and our app. But now in this part we will connect our application with our Firebase database and then we will start working. So go to these firefighters and create a new project. Now we can call it, we can call it simple low cap. Okay? Now we need to accept this term and condition create project. And it will take you time to complete this process. Okay, now, we can continue it. Now. Right now, we are working for Android, so we can click Android and anywhere we need to add our package name. So how you will get your package name. So go to this middle node Gradle file here. And in here you can see, you will see application ID and that is your Pakistan. So copy this one and paste it here. And we can add a nickname for this one, develop and use the optional lungs, so we don't need to add it. Now we can really study it. So we need to download this Google service Jason. Now show in folder. Now we can cut it and go to your application and inside your Android and inside your Android. And I'll put these Android app. And you need to paste it here. Paste. And this is our Google site with Jason. Now, click this Next button and we need to copy this classpath. So copy this class path and go to this build-up Gradle and paste it here. You need to open your build-up gradle, then you need to paste this class. But after this class path, we need to copy these Plugin Library. So copy this one. And now open your build goodwill that is inside these apps directory. And at the end of this dependency, we need to paste it. Okay, now we are all done. Now next, and we can skip this step. Okay, Now this is our dashboard and inherit can see database. So click this database. And in here we will see our Cloud Firestore and ordeal TEM database. So for now, we are working for cloud Firestore and we will work as in test mode so that LR read and write and enable it. I think now we're all ready to go. It will take few time to show us the dashpot. So now we can see our dashboard in here. We will add our oldest data. Right now, moved to this project directory. So now we need to add our Cloud Firestore library. So we need to open your pelvis pic dot YML file. And this is the file where you need to add all the dependency and all the extra peck a library that you want to use in replication. So after these dependencies flutter SDK, cappuccino icon, we need to use our cloud Firestore dependencies, cloud Firestone. You can simply Google it and you will get all these dependency dependency. But if you use cloud Firestore cloud, then it will work for the update version of Cloud Firestore. And if you want to defend any exact version like this, 10.1.2, then you can simply copy it from Firestore way site. Okay. So right now we will work for cloud Firestore. Now. Go back to homepage. Now. It shows us a message that is poverty has been edited. So we need to get this package. So go to these tools and flutter and inherit unit to use, click this flatter packets get. You need to click these flutter packets get. And let's see if it'll work. Here. You can see process finished with the exit code 0. That means there is no uterus, so we are ready to go now, if we can run this, hopefully we'll be able to see maybe we added some random text in our application. We can simply edit it. We can do hot reload. Okay, so now we need to import some packages for our Firestore, cloud Firestore. And we need to use one more package, import, sync, asynchronous, dark. All those packages we need to Azure. I think that's it for this part. Next part, we start implementing our rest of the team. Thank you. 5. Firestore Function : Hello guys, welcome back once again, NRP first part, we have successfully connected our application with our Firebase database, Firebase Cloud Firestore. Now in this part, we need to start implementing our Cloud Firestore functionality. Okay? So here you can see we have three important to package. One is Cloud Firestore and one is acing dot, dot. Okay, so now in here is that these homotropic class we need to import are some built-in functionality for using Firestore. First one is extreme subscription. We need to import is Stream subscription. Stream. We need to use is Tim. And I think we need to import another name is dot. That async. We need to import this data async decades so that we can use a steam subscription, hurricanes Eastern subscription. And this is Tim subscription has some property and you can see query snapshot. So we need to use query snapshot, okay? And we can call it subscription, okay? Alright. Now we need to import our no need to add a list, list, list of item. And this list of item will pass documented snapshot. So we can add snapshot. Alright, now we need to add collections. So what we did here, we need to add Eastern subscription, and it's just subscription has query snapshot. And we have created an instance of this Eastern subscription. And we need to add a list of items. In this list of item will pass and documents snapshot and we add the name of our list of item. Now we need to add collection reference. Collection reference. Okay, That is also provided with flutter and there is a functionality for virus faster and connection reference is a call to Firestore instance. We need to use this collection and it is, and it will ask for our collection part. We can call it post. Remember that we need to use the same name inside of our Cloud Firestore. Okay, So what we did here, we have added collection of reference. And collection reference has a collection of reference. And we need to pass this Firestore dot instance that collection and that is post. Okay? So we need to add collision reference. We need to create an instance of this collection reference. Then we need to use this Firestore dot instance dot collection. And this collection name is our collection them that we will add inside of our database. Okay? So now we need to import our intestine. So you need estate. And inside this init state, what we can do, what we can do, we can add our subscription. Our substitution is equal to collection reference, dot, snapshots, dot listen. And in here we need to ask our data snapshotting, just get instant. We can call it data snapshot. And inside these curly braces, we need to add set state method so that we can action. We can only use this document Q1, so we're ready to go. So we have successfully added all these fields, right? Okay, so let me explain it again. So if you want to retrieve data from Firestore, we need to use, there is some other properties, some other technique, but we're using this property. So we need to fast to need to use these extreme subscription. So it will get our older query snapshot. And we have added an m of this Eastern substitution as substitution. Then we have created a list and it has a document snapshot. And we have created in them not only to these collisional reference, what will work, this collection referenced, this collection reference. We'll we'll create a database inside of our Cloud Firestore and we will get all the data and we will be able to access all the feed from this post collection. So we are creating a collection and collection name is post. So we need to use this collection reference, collection reference, then Firestore instance that cholesterol in here, we need to use our collection name. Okay, our collection name is post. Now we need to add any test it. And inside this init state, we need to connect our subscription with our collection difference. So this substitution is equal to this collection reference dot snapshot at least. And we need to listen, subscription and our collection of friends and we have added a data snapshot. This snapshot is equal to. Now, we need to add satisfied. Now, we need to use the snapshot, and that is our documents snapshot. Snapshot is equal to our data snapshot that we have created here in DOD document. And we are we are storing all this data, all this data that, that will contain inside this collection, inside the snapshot. And here you can see snapshot, two, snapshot document. Now we need to start working for our body part. So this is our navigation drawer part. So I think that's it for this part. We can continue with from our next part. Thank you. 6. Get Blog Post Data From Firestore : Hello guys, welcome back once again. In this part, we will retire for our data from our cloud Firestore. Okay, so in our previous part we have added all this functionality like Eastern subscript shown and some other stuff. And in this part, we need to start working on our body part. So after this integer, we need to add our body tag, body, and we need to work on ListView build at noon. Let's build. This list will list view dot builder has these little q-dot builder has to property. One is item count and one is item buildup. Item count. For item count, we need to add our snapshot dot length. Okay? So this snapshot is our disk snapshot that we added our with our list and document snapshot. Here you can see snapshot, snapshot door to document. That means we want all the land of data that will have inside this, these collection and we will retrieve all this data there. So we need to add the snapshot dot length. Now this item vendor atom builder has two parameter we need to pass. One is context, and second one is for our index position. Okay? All right. Now inside this item builder, now item builder contexts index. Now we need to retain our, which is why we want to set our data. Okay? So I will return card few written. We can call it new card, okay? And we need to add elevation. Cartelization is going to be ten times 0. And we need to add, we need to add margin. We can choose as inset all 10 and at a child. And we need to define a container. And inside this container, we will add all these data. Container has a child and fast to need to define your role. Okay? So new row. Row has a children of widget property, Okay? And in here, we need to add our circular avatars. New circular avatar, put arbitrary has a child is going to be new text. And in here, we need to set our data so our snapshot. And we will get all this data by index position. This index condition isn't this index position? This data cube. In here. We add our filter name, title. Okay? So this title will add, we need to add inside our collection neck, okay, instead of Firebase database, okay, now for circular avatar, we need to add a position whose position data we want to add inside the circle diameter. So for this, I would like to add 0 position, okay? That means it will give us the first letter, okay? And we need to add another text at another text. So new text is going to be, we can call it. For text. We can add we can add a container, a container adult children, of which it child is going to renew. And in here we need to add a column. And column has a children of widget property. So children opposite property. Why I am adding this column cause I will add, because I will add one title and one content so that, so that we can add it vertically there. So we need to use column, okay? So first we need to add, it takes new text. And this text is, we're going to be snapshot by position dot data. And we need to pass her field name, title. Okay? And we need to add another text. The new text is going to be snapshot by position index dot data. And when you have a kinda call it m, the field name is content. Okay? Not we need to add our database data. So go to your Cloud Firestore at where we need to add a collection name. So our collection name is post. Remember that you need to add exactly same name. If you add if you add a small letter or capital letter, then it will not be work. So post that is our collection name and we need to the night Hanover ID. And it will give us some random ID. Or if you want, you can choose your own id. So our first field name is title that you want to show. So copy this title and add inside this field title and value, we can call it flutter. Flutter. And second one is our content. And we can editor. And we can call it. We are learning flutter. Okay? Now. So now if I run this application, hopefully we'll be able to see data. So here we go. So here you can see our circular avatar, our title, and our content, but it's not looking good. So we need to design it. So we can see these f inside this circle Avatar cause we have added position 0. Okay? So we need to change this color of this circular amateur. Okay, and before that, inside this container, this container has all this data in here. We can add some padding. Padding as insert all 10. Okay? Now for the circular avatar, we need to change that color name so we can choose a background color. It's not like this. We need to add it outside of the child. Okay. Cause this is the property of sarcomere matter. So background color is going to be color. Colors thought we can choose. We can choose radix and color, okay, and for foreground color, that means the text color is going to be colors. Colors dot white. Okay, now if we do hot reload, then we will see our color white and our circular avatar background color is red accent, and we can also see some padding. Okay, now we need to add, we need to create a space and taste studied. So this is our main row, and inside this row we have added all these three data. Okay, so we need to add here main exit. Because x is element. I'm going to be cross x is element or a stat so that it can start from left side. Not working. I think you mean x is element, is going to be main and then main dot. Okay? Now we have a container. For these two container, we need to add many Xs element and men x is an element or a start. This is our main container. For this column we need to use, I think cross x is even meant and run it. And we can see it started from the eastern part, but we need to add some margin and padding for this container and update the circular avatar. We can add a new size box. And why we use the size block decides books provide us some space. So we can add white, we can add ten points, 0, and it will give us space from left side. Now, we can see this space. Okay, perfect. Now I think it's looking good, but it's still, you need to change something. So we need to modify some data like for our flutter, for our title, we need to change our color and our text color. Okay, So this is our title text. And in here we need to add a style. Style is going to be text style. We can change the font size, we can select 22, and we need to choose the color. You can choose. Color is going to be cartilage torch. You can choose a green color. Just for example. Now too hot reload. Now we can see it's looking good. Okay? Now we need to add a space between these two tails. So add New. We can also choose new size box as well as new size pore. This time is we need to choose height because we need to express from height. We're going to use 5 and run it. And we can see some space, okay? Now we need to if you want, I think for this one is okay. Okay. Let's do one thing. Let us do one thing. We need to define the height and unit. We can define the maximum line of this text. For this text, I would like to show this maximum line one because we will show only one line of title. And for this text, for this test, we don't need to add any design and we can change this maximum line to cause when we will add multiple data. If we don't select this maximum line, it will give us all this data, then it will be looking very bad. Okay, so now what can we do if we run this? We will not be able to see any chance because we have only one post. And now we can, what can we do? And we also need to define the white of this container. Because inside this container we have these two data. One is our title and one is our content. So we need to define the height to define the white. So we can choose, we can choose. 210 and shine it. Okay, now it's time to add multiple items. Okay, So I have some dummy text. So some dummy post-tax, I will add it now here. So this is our post collection and inherit. We need to add our oldest collection data. So at new document and we need to generate random ID. And in here we need to add our field name, that is our title. And for easting data in here, we can use this title. We can paste it and we need to add another field that is going to be content. Content and inhale need to use delta loop and we can choose this total value and title content and save. Now, if I open this application, then we will we see our data. What is, what it learned some and these dummy data. And here you can see our, for our content, we have selected maximum line to there, so we can see two lines, but in our real content there is lot of data. So for this, we need to use our, if I select maximum line five and if I run this application, then you'll see five lineup data. Let's see 12345. So for this, or you can choose maximum line two. And it will do work perfectly, okay? And we have defined the white because we need to show this white tooth to ten. If you want, you can turn this white. Now, add a few more texts and you can see that Real-time. That means we don't need to run it again and again. Our replication will automatically update. For this second data, you can see our w word inside our circle Lavater, cause for this title, W is in 0 position that we have selected here. If I select one, then it will add second position and it count as an array repetition. Now we can see in LA, faster, we all know this. First one is 0 position and second one is one. So we have selected one and R one position is i in there. So you can slide, we can see, and for, in this part we have seen is position, that is our one position and we can see these days, okay? Alright, so for our application, we can see, for this application, we need to add few more item. So field is going to be title. And value is we can add some post content and copy and save. Now if I open R, you will see j. Okay? Okay, I think we forgot to run it. And Genesis 2120 and run it. Okay, then we will see loci, okay, add more text or di, di, di tail. Value is going to be this one. Continuous going to be content is going to be this content. Add few more odd ID. Title. Value is going to be just some data. And add one more field. Content. And pelo is going to be this whole data. And you can see five post 1234581 more. This one is going to be title. And for value, we can choose this one. And content. Content. We need to choose this one. We can choose this one. So where can I get? And now we can see, now we can see, we can just call it and we can see our all these data and all these fields we have successfully designed and implemented. So I think there's enough for this part. In our next part, we will, we will add how can we routed and how can we set it to our digital space. So I think that's it for this part. Thank you. 7. Details Page Function for Each Post: Hello guys, welcome back once again. In this part, we will create a new pace and we will send our data to over new pace. So when a user will click any of these item, any of these icon, and you have the data item, then they will redirect them. Then we will redirect them to a digital space where they can read detailed post. Okay, so for doing this, what can we do? First, we need to create a new file, new dot file lib folder, and create a new file. And we can call it post details in here. What do we need to do in her first, we need to import our material, Dart import material. Okay. Now, we need to import our Firestore. We need to import our Cloud Firestore. Okay? And now we need to define our stateful widget. So create a stateful legit and we can call it post details. Okay? Alright, now go to this homepage. And in here, we need to change something. This is our text title. So when user will click this title, then we can move them to next page. For doing this, what we need to do in here, who need to change it, we need to import a new property called inkwell so that we can add on tiff or otherwise we wouldn't be able to do this. So normal texts we can't add clickable. So if you want to add clickable text view, then we need to use new in coil. We need to use new inquiry. That is the other property called gesture. So I would like to use this inkwell. And inkwell has a property called child. And in this child we need to add are these text fields. So we can cut it here and simply paste it here. Okay? So just edit in coil. So just edit in coil and inquiry has a child and insert the child. We need to paste our texts that you want to show some new texts, snapshot, data, index and Esther, just the same. And in coil has a property called on. Okay? And in here we need to pass our data. Before doing this, what we can do, we can simply at what we can do, we can, we need to create a method. We need to create a method. And before that in here, inside our digital space, we need to create our documents snapshot, and we can call it snapshot. And we need to create a constructor for our this class. So post details. We need to create a constructor and we can add these dots snapshot. So we have created our constructor, now we need to connect it inside of our homepage. So after this step, we can create a new, we can create a new method and we can call it. We can call it. Or we can call it, we can create a new method of college bus data. And as a parameter, we need to ask our documents snapshot and create an object of our snapshot. And in here, we need to pass our data. So before this, we need to import are these post detail page so important? We need to add post. It'll paste dot, dot, liter package name. And now in here, when it tells our routing navigator, dot of that is a context dot push. And push has a metal paste round. So new, so new. So new material pests Out. And in here, we need to pass our context. And after that, this way, we need to call our, we need to call our digital paste name. The last name is post details and incentives post details. We have added a constructor so we can pass our data. So here we can see, we can add snapshot. This snapshot is this snapshot that we are passing parameters for this constructor. And now we need to use the snapshot that we have just created. We're all done. So now at this semicolon, so what we did here, we have created this post data method and as a parameter we pass these documents snapshot. This snapshot for fastening data or move from one place to another. Paste fluttered has flatter has, we need to use navigator dot of context or push a new material first-out, it will give us this builder and builder container context. And these contexts we need to pass our detailed place where we want to go. And we have added a constructor, and we need to pass this data with this constructor. Okay, so this snapshot I've showed is this snapshot that we have added. Okay, now we're all done. Now. Scroll down and inside this container and inside this inkwell. For our list title, we have added onto method. And in here we need to call our method now that we have just created. And we have created this post data, and we need to pass our snapshot here. Our snapshot, snapshot and index dot, not this way. So snaps or dot way to use this result. So snapshot index, so it will give us each and every index data. Okay, So on tests, and this is going to be past data and the snapshot is going to be indexed on tariff. And this one is going to pass data snapshot and index. It will for ease and every user. So if I click these four 0s and every unique, unique ID, we will get this. We will get this detailed pests over. We'll click this icon, this title. Then we'll move to second pests and we'll get this ID. All data will get this title and this content. We are using, this snapshot. This snapshot is our snapshot that we have created for our documents now shoot and as a list. And we have added this index position from here, you can see item builder. We have added this index position. So we can see this index. And in here we're getting this isn't every unique ID because we have defined the field name. But in here we're getting the position so that we can get, hold it up. So I think that's it for this part. In our next part, we will set this data to our database. If I click this, if I run this application, maybe we'll be able to move to second place. But we can say anything. You can see black, blank is can cause who did not add scaffold widget and any material design. We'll do it in our next part. So hopefully you understand. Thank you so much. 8. Details Page Design to Show Details Post: Hello guys, welcome back once again. In our previous part, we have set all the required functionality to pass data from main Paste to paste. Now in this part we'll set our data. So go to this post detail pace. And in here we have added our documents now, short post details, now short exit trap. And fast to need to remove this container. So remove this container and add a scaffold widget. And in here we need to add and insert a scaffold. First, we need to add. So click M bar is going to be new. A bar. Ab bar has a title of which it title is going to be new text. And we can call it post details. Okay? And now we need to add a background color. Background color is going to be colors. Colors dot. We can choose green color. Okay? Alright, so now we need to design our body parts. So now if I run this application, and if I click any of these titles that we can see our post details and our upper color. Now go back, click what do we can see our data and we need to set it to our RecyclerView for doing this. And two now we inherit, we need to add, now in here we need to add our body texts or body texts. So body is going to, we can turn our cart, cart and we need to add elevation. We can choose 10 and edited child and Saturday, March in March in is going to be as inset all 0.02. Now in here we need to add our child. And in here we need to add our new list. Okay? So let's do hazard children of which it, and inside this list we can add all these things. So inside this, when you go to this pace. So we will define it in two parts. So first one will be our row. Inside of our row, we will add our circle Avatar, and then we will add our title. And after debt and rest of the part would be our content part. Okay? So fast. Define a row. So new row. Row has Chilean of widget. Okay, no problem. Now, first we need to add our new circular avatar, some new circular amateur circle diameter at a child. Child is going to be new text. And now we need to add our widget, our snapshot, our data. And we need to pass our field camp that is going to be tight l and r. And for sarco appetite will need to post our, our position. Okay? And now we need to add a background color for our cycle or whatever. Background color is going to be colors. Colors, dodge, green. And for foreground, color is going to be colored white. Okay? Alright. Now, we can see this color, okay, perfect. Now if I click flutter, we can see what that means is sent for each and every item. We can see this one. For this one, this is working perfectly, but we need to still, we need to solve some design issue. We will do it in our next part. I think that's it for this part. Thank you. 9. Send Data to Details Page: Hello guys, welcome back once again. So in our previous part, we have successfully set our detailed pace and our circular avatar. Now we need to design it and when you tear terrorist rest of data, okay, so applied this circular avatar, we need to add our title edge, new text. We need to add new text. And how are falling here when we create our widget, dot, our snapshot. This snapshot, this snapshot, this snapshot dot data. And in here we can add our to add text widget snapshot dot data, dot title. Alright. And as the less need to add our style. So it's going to be text style. And font size is going to be 22, and color is going to be, we can choose colors, dark, orange color. Now, let's run it. Now here we can see our item. Now we can see our item, but we need to still do something some decent chance. Okay? So this is our card view and this is our row. This is our main tool for this circular avatar. Okay, So inside this row, this row, we can add a new container. Okay? So we can cut it and edit chant at new container so that we can add and paste it here. And if we, if we add container, they don't need to add. We need to use chat. Okay? Child and row and inherit. Now we need to add bedding. Bedding. As instead all you can choose 10 is 0. And now we can see this bedding from this, from left side and off-site. Okay? So we can do one thing. We can simply, for this container. We can separate our two container. We can connect to container. So fast continent is per hour, this side kilometer and this title. We can, or we can do, we can simply define the height of this container. Height is going to be. Height is going to be, can choose a 120 and White defined. We can do these two to 0. Now run. Now we will see, okay, But the thing is, but the problem is that we are getting all this data for inside this card. Okay? I think we don't need to use this container and this container, we can simply remove this. Since we are using to tell card view. They're using the space inside, inside the card view. So we can modify it so that the circle Avatar, we need to add a space when you tell a space. So how can we do this? So edit a new size box and white, we can choose 0. Now, if I run this application and I can see this space, okay, I think we can change this orange color to green color. That'll be good. Okay, green color and green. Now after that, what do we need to do? Now after that, what we need to do, we need to add our main content. Okay? So this is our first container, and this is our first container. And after this, we need to add a new size box just for freeway space. And we can add height 10 at a new container. Okay? Two new container and matching is going to be as inset all ten coins 0, okay? And add a child. This child is going to be new text. And we can add our data here, which it dot snapshot. So widget, snapshot data, widget dot snapshot, snapshot data. And in here, we need to use our content. So content. Okay, Now let's run it. Hopefully it will work. Now here we can, hey, so here you can see are all data and we can see a space between these. So go to these flutter. And we can see, I think ten dB is a huge space, so we can choose 7 and now run it. Okay? I think we need to change the text color, text size, okay, for this content. So if we want to do this, simply add a style. Style is going to be Texas style. Font size is going to be a team of 18. Let's run it. Now. We can see, now we can scroll all this data and we can see this. We can see this text. So why do we use e n? It is a long term and we can see our material design. So I hope you understand all this process, how we implement this application, how we develop this application, and this is our navigation icon and all these things. So hope you learned a lot of you enjoyed this course. So, thank you guys. Their seat.