Build Flutter Blog App From Scratch | Flutter Tutorial For Beginners

in today's video we are going to learn how to create a flutter blog app so this blog app will have different functionality being it uploading the data to firebase cloud storage fetching the data from there showing it to the user in a list view we are also going to use some different functionalities like streams to give a better user experience by loading the uh or synchronizing the data of a list view to that of available on the firestore so let me show you the demo of the app which we will be building in the series of videos so this is the app it is called flutter blog and it as you can see it this is the home page which includes a list view of different blogs the blog have image title description and the author name so you can see we have multiple blogs over here we can click on this floating action button and it will show us this screen from this screen we can click on this icon and we can select an image for example let's select this image now we can give the author name so for example if i will give it mind we can also give the title so and then we can give it a description okay then we can click on this upload icon it will load as you can see the icon is also not visible when it's uploading and once it's done it will be redirected back to the home screen now if you can see this is actually where is it okay so this is the one which we uploaded just right now and it's directly reflected over here it's not a pre uh already happening thing we have to add this by using something called streams which we are going to discuss in the upcoming videos but for this one in this particular video we are going to connect our app with the firebase database so yeah let's dive in and connect our app with firebase so first thing first we are going to visit firebase.com okay you just need to log in and i'm going to use a different account for example this one now if you already have some projects if you go to go to console over here you will the projects will be visible if if not it will be something like this and yeah so now you can click on add project and you can type blog app okay and click on continue now you can click on continue just select an account default account for firebase and it's going to create the app for you okay so in the meantime i haven't actually created a new app so i'm going to do so through the terminal so i'm going to just type in flutter okay caps lock is on flutter create let's call it flutter blog okay till that being created this is done so we can click on continue now as i said we will be connecting both for android as well as for ios so first of all let's go and do for android so first thing first we will require the package name so where is the package name as the app is done okay let's open it up new window let me close this increase the size of this a little bit okay so open up the folder and let me open my flutter blog click on open once it is done then you just have to go to the android directory and then to the build dot creator over here if you scroll down a bit you can see the application id which is exactly what you want by the way guys if you are going to upload the this app to play store make sure to change the package name dot com.example will not be or cannot be uploaded to play stores so yeah now click on download googleservice.json i have already done that for some you can call it practice um basically let me call it live and click on save okay so we have this uh now we should make sure that we are not giving it some other names than this okay so now as it says we have to copy this or you can just move it and then paste it okay i don't think that's works like that where is it yeah so now it is in the app module that's exactly what we want to do you can see in the app click on next now it will ask us to add this dependency and as it says do we have to go into the project level build dot gradle file so this is the app level build.gradle and this is the project level build.gradle file it's asking us to add this independencies we have done that next we will move and apply plug-in google services this will be done for app level build dot gradle file so we will just go into this apply plugin and add this over there then we are going to add this analytics we are not going to be you know using a lot of this this is just basically to make sure we have something so that's what we are going to do now we are going to save both of these and it's majorly done now since i am using this emulator i am not going to confirm this or show this i'm just going to skip this step but it's for most chances it is connected now let's do it for ios by the way guys if you are not if you don't have a mac you're not able to use xcode or something of that nature uh you don't have to connect it beforehand you can do that after as well i think so it will not be a big deal you can just follow us just after this is done okay so for opening it up first of all i will go to my home directory and i will select the floater blog ios excuse me so now in this one if i will click on runner okay this is the build or bundle identifier so i'm going to select it on go to register app and click on register app okay so it's going to register that for us and then it will provide us this google service dash info.plist we can save that and show in finder or explorer now we will be opening up the xcode click on this runner folder inside that and click on add files to run now we are going to drag this over here and select it and click on add and hopefully it's done to see if it is just visit this open up the ios directory runner and in there you will find google services info.plist done so this is done now what's the next step so if you're doing this for the first time then you can do bot.init and product install i have already done it you basically have to just copy that go to the terminal and paste it and run so it's not a big deal you can just enter and do all the things for you this is not something we have to do and it's all done so to check if it is we can actually go to this and let me close this and this and this and open up the main.dart file and run with dart and flutter so hopefully we are going to see this connected okay so it is successfully done and if we will go back to this we should um see the right check okay it's not a must but it's just better let's wait for one second or two okay let's skip this step okay so we have finally connected our filter blog app to firebase for both android and ios in the next video we are going to see how we are going to upload the data for the post as we have seen in the app we have the section of uploading the data to firebase database we are going to use cloud storage specifically so yeah make sure to check out the next video in the last video we connected our app to firebase for both android and ios now in this video we are going to create this particular screen to upload the blocks so let me close this up get rid of all these boilerplate code also getting rid of these now we will be going to the library or lib folder whatever we can call it we are going to create a new folder we are going to call it views we will add a new file that is going to be home.dart and we are going to add one another file that is going to be called create blog dot dart okay so if we go to the home dot dot we are going to import material dot dart and we are going to create a state full widget which is going to be called home page okay next we are going to go in the create blog and we are going to import material dot dart then we are going to create a stateful widget which is called create blog okay once that is done we are going to go to the main.dart and we are going to make it home and get rid of this title so i think it's home page which we mentioned so we are going to call it that and if i save it and let me open it up so simple blog app this is flutter blog so this one is the app which we have right now so if you go to the homepage you can see we are returning a container and that's why the whole screen is blank okay so the first thing which we are going to do we are going to convert this to scaffold and in that we are going now you can see we have a white screen so the first thing which we should do is let me work on the app so as you can see we have kind of a bit custom uh app you can see it's not actually a logo it's basically two text wrapped in a row so let's create this we are going to say app bar and inside of that we are going to say title now the good part about title is it does not only take text it can take row as well so that's exactly what we are going to do we are going to say text i'm going to flutter give it a little bit of style okay that's too much style um then we can say text style oh my god by the way i'm little kind of not that experienced using you know vs code i've been using android studio for like more than two years and and he dumped me so anyways we'll talk about that so text style now in this we are going to say about the size of the font so the font size is going to be 22 and then we are going to have another text which is going to be the block and we are going to say style text style and inside that we are going to say font size 22 and in this we are also going to have something called colors that's called colors okay and blue then we are going to save that and hopefully should be visible okay one thing i have used a dark theme in that to do so you just have to get rid of all this and say dot dot yeah it's that simple and then you have you have to go to home and now you can see so in our app we don't have this background okay so for that you can simply say background color and say colors transparent okay now this is the elevation what the color you are able to see or the difference between this color and this so we are going to say the elevation to 0.0 and now you can see it's fine right now the reason why this is at this side is not because of empire but because of row so we are going to say main axis alignment dot center what it does is mean x is alignment of row which is horizontal it aligns the children's offset in the center so if i save this you can see okay so the app bar is done now we need a floating action button okay body let me just have a container over here for now and a floating action button over here similarly for floating action button this is what i did okay i created a row and in that we can just create a floating action button which will have a child of icon and that icon is going to be icons dot add a photo now you can see it's quite at the corner so let me have it add only i think that's what we used in the last one okay so in this we are also going to use an on press property of course um but before that let me make sure it's in the center so how we are going to do that similarly how we do that for abba now you can see it's in the center so now we also want some kind of padding from bottom so i'm going to wrap it in the container and give it a padding property i'm going to say edge insets dot symmetric and i'm going to give it a vertical okay vertical padding of around 15 or let's say 16. it's fine but let's go with 20. okay so now it's fine now what we want when we click on this we should be redirected or we should navigate to another screen which is this which is called create blog okay so how we are going to do that we are going to do that by using something called navigator okay so how we do that we are going to say navigator navigator dot now there are different properties you can use you can use push uh named push named and removed push replacement push to replacement name so there are different properties we are going to go and use push that's directly basically stacking up another screen on this screen so the user will have an option to click on a back button in android and the back at the top to get back to this screen which means this screen is all already open and also open as well means basically that screen comes at the top of the screen okay so now we are going to use material page root this material page root takes a builder and that's going to take context and we are going to say we want to go to create blog and actually that's all what we have to do so if i will click on this now you can see we are redirected but there is no visibility of how to i can understand which screen i am in so i'm going to just go to this scaffold and add the sap bar okay now it's showing an error because of course like we have to say this and then save that okay now we also have a button over here to upload so that's something which is actions so we can add an action to our app bar and that action is actually an icon with icons dot upload file upload okay this one okay now i am going to add a container and so this is container why i am adding a container is because if i save it right now okay you can see the uh it's quite like very less space from there right so we are going to give it some padding we are going to say edge and sets dot symmetric and we are going to give it a horizontal padding of around 16. and let's save that okay looks fine to me um now what we want to do is we have this screen and let's let's now create the other stuff which is going to be the body so in the body we are going to have a container and that container is going to have a child which is going to be column column is going to have children's and the first thing is i'm just going to have a small sized box which i did have in that so just want to make sure we have that okay now in that app you can see that if i open up that app yeah simple block so you can see that we have this image or basically a container with an icon over there so let me quickly create that so this is our body this is we are inside a column so how we are going to create this we are going to just call container we are going to give it height this is exactly 150 excuse me we are going to provide it a bit so for width as you can see it's taking kind of hold of it and giving some kind of padding at the corners so how we do that we do that by using media query dot off context dot size dot fit by this we can get the size of the display now once we have that next what we are going to do we are going to have a child of course without child uh containers and nothing so then what the child we are going to have we are going to have an icon icons dot add a photo okay now that is done but now the main thing is we need this white color we need these borders as well right so for that to done we can actually directly provide the color but we are not going to do so because we are using a decoration and if you use decoration don't use colors outside outside of decoration it will be an error so now we can say colors dot which color it is why okay and now we as i said like it has border radius so we are going to add border um what a dot circular will be there or radius dot circular and let's give it six okay so now let me open up the app and if i save this this is how it looks like okay so the add photo icon for some reason is not visible let's take a look around why it's not i think the color of that is the reason so i'm just going to say the colors dot let's call it black 45 okay so now it's visible of course we need a padding we it's not going to look good without it so i'm just going to give it body horizontal 16 horizontal okay can you do that oh sorry it's going to be margin guys uh the difference is basically padding is inside and margin is that okay so now we have this container now next is we are going to have a sized box just to give it a bit of a height of around let's say eight then we are going to use a text field now you can use forms for those but what i am going to do is i am going to just go over here just above the override and below this state i'm going to define some strings the first string is going to be author name the second one to be title title third one to be description now we have all these and whenever the text changes on these text field i'm going to save them to the these how i'm going to do that i'm just going to go to text field and the first thing which i use is decoration what is the decoration decoration is used simply for what we are using we are using it to provide a hint text okay through decoration we can provide a hint text so the first thing which we are going to have is going to be author name okay if i save this now you can see we have it now one thing also which we want to make sure we want to provide these kind of padding to this as well so this is not the best way because you can do that like wrapping it all in the same but let's we can do this simply like by creating a container getting a child creating one more column children and putting the text inside of it copying the margin and providing the same margin to this okay now what we want is similar kind of text fields but before that we want to make sure that unchanged whenever uh we are updating the text what we want it will return a value okay what we will do we will simply type author name as equals to value so basically we are saving that value whichever we are getting from this to the string author name if i save this it's done i'm going to copy this and one and twice and now in the second one we are going to name it title if you use something like form you have different options of validator as well you're not going to do a lot of that that's why i'm not prefer uh using it but if you want you can just okay so we have all these now if i save it we have it right okay so this was all the ui which we have done till now now the main stuff is uploading this uh the data to firebase okay guys so in the previous part we have completed this screen of adding a blog to our database in this part we are going to connect our flutter app with a cloud storage so it's already connected to the firebase but we will be basically setting up some rules and then uploading the image as well as these strings to the database so let's see how we are going to do that so first of all you have to click on this database and over here it will ask you to get started if you click on it it will start in the production mode and these are the rules which will be visible so right now if we see the rules you can see allow read write if true so that is something which i have updated it will be false initially for yourself so you just have to convert that false to true once that is done you just can publish over here like for example if i change anything you can just publish okay so this is rule based this what this rule states that the person don't have to be logged in to upload the data to our cloud file store so that that's being done now what we want we want the functionality so if you click on this button right now nothing is happening right so what we want when we click on this button then we should ask bob to select an image and then that image should be reflected over here and the image will be done okay then what we want we want to upload that image to firebase storage okay and then we will get the download url of it and all those things the four strings the author name title and description and the download url will be saved to the cloud firestore so let's see how we are going to do that so the first thing first requirement is image picker because we want to pick image so we are going to just search image picker pubs pub.f you can directly go into your spec.yaml file and add it i have already done that so its image underscore picker and the latest version then i have also added firebase storage cloud firestore and random string so why i have added random string because random string provides you a function by which we will be creating some alpha random alpha numeric keys for our image name okay so with that being said let's get started and do it so the first thing which you have to do go to the library or lib folder and create a new folder inside of it and we are going to call this services okay inside of services we are going to create a new file that is going to be called crud. okay now what we are going to do we are going to uh initially import so this is going to be um we are going to create a service for add data so that is going to be done through firestore so i'm just gonna say cloud firestore okay so let's create a class small class and i'm going to call it crud methods okay and that we are going to create a new function which is going to be called add data and we are going to say blog data now this is going to be a future and it's going to be a void because we are not going to determine anything then i'm going to say asynchronous and f u r e okay now what we will say then we will say file store dot instant dot uh sorry instance dot collection now over here we can give the name of the collection so how i want to structure this uh this database is basically guys if you are not aware about how the data is structured in a cloud file store there is collection and collection have documents each document can have collection and some values so let me show you an example of it so that you are so let me say this is our example collection let's say this is name and this is going to be a value of sin square okay now in this one if we see this is a document okay so the document consists the name of sanskar now what we are going to do is basically this is how it is a structure now we are going to create a blogs collection and we will save all our documents or blogs in that so let me delete this first of all and you just have to copy that and we will be back to our code okay so over here i will write it to be blogs dot then i will say so what we want we want fire steer we have we are in the instance right now what we want we want to add the data so i will say add and you can see it takes map so where is it visible add and you can see it takes map so we will be providing a map to it so yeah we're just going to say block data which we are accepting over here and then we will say dot catch error so we are also making sure to catch errors if we if any occurs and we are going to print it so that we can check and take action accordingly okay so that's done for this cr ud dot file now we are going to move on to the create blog dot dart and inside of it we are going to create simply curved methods and we are saying current method is equals to new third methods okay so that's just initialization of it so that we can access that add data function but before that as i said we want to use the image picker right so if we go and image picker oops pub.dev then over there you can see that they have provided us this so the first thing which you have to do for ios is you have to add these well what is it and how it works let me show you that just open up your ide and inside of ios folder you have to go to where is it runner and info.plist info.plist now inside of it you can see how i have arranged it so i have already added this so what you have to do nsp photo user description you will add it over here then a string now guys this this string will be visible to the user when we will be asking for the permission so make sure to describe how exactly you are using it next we are also using the camera so we are adding that as well for our app requirement we are not using a microphone so that's why i haven't added it so it's very simple guys you just basically have to copy this and surround it with key and the string will be the description similarly for the second one okay now this is done what we have to do we have to get this method of get image and we can paste it so initially it have this camera option but what i want is basically a gallery so for that we have to actually import this so to import you're directly going to be available to do that and then we are going to convert this to gallery okay so how this um function is working it's going to get the image from the gallery in our case and it's going to save it to a variable so i'm going to create a new variable which is going to be a file and i'm going to call it selected image so what is this variable this variable is simply the image which we have selected and we are going to save it and we are going to save the image which we are selecting from the gallery to this now if it shows an error like this then you have mistakenly like we have imported a dot html which we don't have to what we have to import is dot dot io and once you will do that it will be working perfectly fine okay so that is done now what we want is we want to call this function whenever the person clicks on that container which we created right this this container so not 100 sure if i have surrounded it with gesture detector before but what you have to do is you just have to surround this container with a widget okay wrap it with a widget and we are going to call it a gesture detector then we are going to type on tab and then this okay so once that is done you are just going to call get image function from it inside from it and it's saying so before trying to run it again i'm going to just close this app okay and i'm going to delete it delete app and i'm going to run it again okay so we have to find all the condition we have the get image function being called now in the mean while what i want to describe as well guys is this container is simply an image or sorry a kind of a container with a white background and different border and also it have a icon in the center what we want if the image is selected that the image should be visible right so how we can do that so what we will do we will simply have something uh like this structure we will say selected image okay this is uh the variable which we just created is equals to equals to null question mark so what it is saying is basically if the selected image is equals to equals to null then this okay and if it's not then after this one it will be followed okay so that's how it works basically if we have saying that selected image is equal to equal to null then this will be visible if it's not um means basically it's not equal to null then this will be visible but we want the other way around so i'm just going to do it like this okay so it's saying not equals to null then this and if it's equals to null then this so basically if initially it will be null right when we are going to open the app screen for the first time it's going to be none so at that particular moment of time um we are going to be visible this container with white background and border once it is loaded we want this to be visible so i will say inside of a child the first thing and we then will say image dot file and we are going to use the same i have missed spelled i think selected okay selected okay it's correct so we are going to just load it over here as well as we want all these different properties we want the height to be 150 we want the width to be you know like the media query which we have also we want to give it the same margin so we're going to add these different properties and let me see if it's working okay guys so this is how it will show it will be asking for the permission this app would like to access your photos describe why and this is actually the description which we write so make sure to write it accordingly click ok and i'm going to select let's say this image and successfully it's visible over here now let's see what why it is not taking up the whole space okay guys so we have provided the width but it's not taking the whole space because of its dimension so in this case what we will do we will basically say fit property excuse me okay we have to use that inside of image that is going to be fit property and box fit dot cover what it does it it tries to cover how all the space which is provided so if i save that you can see we don't have the border radius right which we have in the white circular so i'm just going to copy that and click on image click on where is the bulb okay and then you have to write clip r red and then space this a comma and save now you can it's visible right okay so we have successfully added the image tap on the shoulder for yourself and now what we have to do is we have to upload these data to the fire store okay how we are going to do that we have already created a function for that we just have to pass in a map correct so first thing first we are going to get the download url from this so where is our image by the way guys we haven't uploaded so face down okay so what we have want to do is basically when we click on this upload button the image should be uploaded then we will get the download url then we will create a map with all these strings with the download url and then we will upload it okay so let's do it so what we have to do firstly we will be moving on to the actions this is the action which we created this one right uh it have we surrounded it with a container we provided a padding now we also wrap it with a widget which is a gesture detector and we use the on depth functionality inside of this on tab i want to create a new function which is going to be upload block okay and i'm going to end it with a semicolon now we will just get up and we are going to create this upload blog and okay so what do we want in this upload blog the first thing is very simple we don't want the user to be able to upload the blog if the image is not selected how can we know that we can simply say if selected blah uh selected image is equal or is not equals to that's what we want right you don't want that image to be equal to null so if it's not equal to null then we will do whatever businesses and if it is equal to null then we will basically you know kind of for now just let's let's do nothing we will later on add a snap bar which says something like that okay so we have if selected images goes to now we have now done that now what we want if we are finalized that the image is already selected we want to upload that to the firebase storage so we will say uploading loading image to firebase storage okay how are we going to do that so for this we are going to import different things the first thing should be firebase storage so let me try directly firebase storage pickers so it will be auto imported and we are going to say firebase storage reference so before we do that we should need a firebase storage reference so we i'm going to say the storage reference is uh let's name it something like firebase storage uh reference is equals to new not new actually we want the firebase storage dot instance dot reference okay we got the reference of the let me show you or not just tell you so what does this does we are getting the reference of the storage what exact place we want to save so this is the home kind of directory you can call and some terms for if we call it a kind of a directory so we are if you are seeing this firebase storage.instance.reference that is the reference to the main now what i want personally is i want to create a new folder it's going to be called let's say blog images and inside of it i want to add a child which is going to be the image correct okay so as i said before guys i'm using a package in this which is where is it where is it random string to generate some alphanumeric name for our package so how we are going to use that we are going to say okay let me do that okay we are going to say alpha i think it's called random alpha numeric and the size if i click on this okay so you can see we have random alphanumeric and i provided the length of it to be nine okay so it will generate a random alpha numeric name for us but as we know each and every image have an extension so i'm just going to provide jpg to our image okay so now we have the reference now the next step is to create a task to upload this data to our storage so how we are going to do that we are going to say final it's going to be storage upload task okay and let's call it task is equals to firebase storage reference which we just created dot put file okay and inside of this i'm just going to pass the selected image so it's going to save our selected image at this reference yeah so now it's done now the next step is guys we want the download url of that image right so just let's complete it and then we will test it out so download url let me create a variable for that and it's going to be await and await task dot on complete okay so to do use this we need to have it asynchronous okay so we are waiting till the task out is completed and then we are going to call one thing which is called um we need to get the reference first of all and then we will sync it download ui okay right so we are waiting till the task is completed then we are getting the reference and then getting the download url and until all this is done we are waiting over here that's what exactly it means now then what i want i just want to print it out so that i can have a look that we are getting in so i'm just going to say this is url and showing up the download url okay so this is done guys now let me have a look and let me test it out and let's see if it works so i have saved it i don't think we need to reload it or something okay let's see how good the how good it is uh hot piece uh hot reload or something like that so i'm going to click on this it's not working have i did okay let me just hot reload it so of course this screen would be gone so let's wait for a second or two okay there's something happening i'm just waiting for nothing okay so we need to say upload blog any problem now i don't think so if i click on upload okay it's not visible as well guys yeah we want to be able to see if anything happening right so when i i click on this icon it should show me a circular indicator right so how can i do that i am going to just create a new boolean value i'm going to call it is loading and let's provided an initial value of false because initially the loading should be no loading right um once we click on it then only it should be true so how we are going to use this is basically if we go to our body where is it yeah and there i will just say is loading kind of asking question is loading and if the answer is true then i want you to show this and if the answer is false then i want you to show this it's as simple as that then i will say child is going to be what is it called it's like circular progress circular progress indicator correct and we want to give it alignment of alignment dot center oops center i'm going to save that and if i go okay do we have any errors no so now i'm going to select an image i'm going to select let's say this image i'm just getting a fan of this image now i'm going to give it this is useless right now so i'm going to test this out again we are not not not not not okay so guys what we have to do we have to say set a state and we will say is loading is equal to true so whenever a user clicks on it and this condition is fulfilled then we will set this to draw so now if i click on this okay so it's working now if we go over here and reload it there is a slight chance the last images were uploaded but we were not able to notice that but let's see by the way guys like the internet speed of mind seems to be a little slow and i'm working on it so it will get better don't worry about it okay so the image is not uploaded not a good sign let's see what is that the problem um so we are basically providing the storage reference we are um creating a child child put file and then if we scroll down a bit we are getting the download url so let me see if we are getting anything so we are not so let's get back and i'm going to just click on back and restart the app because this is sometimes a problem right guys like you know means i have done nothing wrong and just waiting for it okay so we will restart the app by clicking on this and also check if we are doing everything right or not so we are um putting up the file which we selected and yeah everything seems fine let's wait for it for a second or two to get launch and let's see how it works okay so it's finally running if we click on the adduct button and we click ok and select image for example let's select this image and click on upload so it's going to load and let's open up our storage and well we don't have any option to understand if it's done so we should be able to do something of that nature so i'm just going to add some function for example what can we say we can say when this is done just navigator so it will just close this screen when the process is done okay so let's wait for it to be done okay so i think most probably our rules is set um the rules is not should uh should not be a problem because rule is also important which we should see okay so internet is not happy with okay notice it's reading okay so we should go to rules and check out if it's fine or not so according to the rules right now it says allow read write f request auth equals to equals equals to null so it's fine it's the rules is not a problem by any means but let me see firebase storage and firebase storage.reference and we're going to put the file in the storage reference and then we are getting the download url so the most of the processes is fine there is no issue in that i think the image size is quite large that that can be problem as well because it is a high quality image downloaded from unsplash and my internet is quite done for today since i have uploaded two videos on okay guys it's working perfectly fine if we click on this we get the image okay okay that's that's good okay so i'm going to go back to visual studio code what is happening why am i opening this code okay so i'm going to open up the visual studio port so it's working perfectly fine guys um for some reason it's not closing because i think the reload is a hot restart or something like it's not working perfectly okay anyways so now as the image is done what we want the next step is to create a map the map is going to be of string and string so if you have no experience what is map map is basically a collection of key value pairs okay so for this map i'm just going to call it blog map and let's see how map look likes so map will have a key what is key uh it's it's going to be key value pair so let's say the first key is going to be um image url okay so i'm going to call it download url where are you where are you where are you okay this is good okay then we will have another one which is going to be author name author name and it's going to be author name the next is going to be what we have we have title description so i'm going to call title and title and i'm going to call description description and description okay so these are all these um the map is ready now the next thing is to use that particular method which we just created this one the initialization of it is done so what we can do is we can simply call this dot add data we can pass on our blog map and it will provide us a then property so we can say then we'll get some result and once it's done we can call this navigator.pop.context after that so let me restart the app and let's test this out so in the last process we see that the um upload of image is working fine so in this one let's try to select a smaller image okay so we will give it a author name i'm going to call it my just giving my name and um things feeling is great something like that i'm just using a small size image guys uh to make sure it happens a bit quick we don't have to wait for it for quite long so i'm just gonna quit the xcode and the image should be uploaded as well as the blog collection will be created and the document will be added so let's see let's wait so when this will be done as i have added navigator.pop.context it should also close the screen and go back to the home screen so let's see let's see let's see if we go to the blog images how many images we have and so we just have one images which was uploaded last time it's not a very big images per se but you know internet is problematic right now okay so it's loading i don't want you to be waiting just uh let me get it done and i'll be back in some seconds okay so it's done before saying that so let's let's see it should be uploaded um man this load bit faster okay so so this is what we are expecting guys the image should be uploaded to the firebase storage okay um and in the fire store we should be able to see a block collection blocks collection and it's going to have a document with a random id and the document is going to have four properties which we provide in the map let's see guys it's pretty interesting guys means this is something which you should understand as well is that we haven't written a lot line of code and it's just let me show you like how many line of code do we write to upload this like you cannot call this four lines of code anyways it's just but even if you call like five minutes of code and we have okay guys so you can see the data is up and running so if we copy this up you can check it out that if we try to just load this image through something like image.network and then provide this url we can load this image as well and which is one of the requirement that's why i got that download url because we will be showing it in this home screen okay really sometime net just tries to anyways so i'm going to create one more i'm going to and let's call this um some random description description and i'm going to upload that as a okay so you can see the image is loaded so yeah guys um the task for this video is completed we have successfully selected the image we have uploaded the image to firebase storage then we have uploaded all these the download url as well as the author name the title description to the firestore so the task for this video is completed in the next video we are going to fetch that data and show it in a list view in the home screen so welcome back to the series guys of flutter blog app with firebase storage and firestore in the last part we have completed the screen as well as uploading the whole data of image and the author name title description to our database basically uploading the text files in the cloud file store and the image in the storage and we uploaded the image got the download url and then we uploaded the download url over here so in this part we are going to fetch that data and show so this is basically how it's going to look like okay so that's the end result we want to achieve in this video um and if you haven't watched the previous parts i will highly recommend the link to the playlist will be in the description so go out and check it out and yeah i start from beginning and it will be really helpful for yourself um okay so let's get started the first thing which we have to do so if we go to the home screen right now okay so we want to get a list over here so the first thing which we should do we should fetch the data so we have created uh this method which uh through which we have created a function of add data similarly we are going to create a function for get data so i'm just going to call it getdata and i am going to say return it's going to be firebase okay it's going to be firestore.instance so yeah filestore.instance.collection and we are going to use blocks okay the same path the same collection we are um which we are uploading the data we are going to fetch the data so i'm going to say get documents it's that simple guys it's a one-line code and of course because this is the future guys so we have to make it asynchronous and have a weight over here okay perfect we are going to save that go to the home and we are going to create a new query snapshot guys because that's what it's going to return and to this snapshot i'm going to call it blogs snapshot okay now to provide the values of basically getting these values and providing or you know kind of providing these values to block the snapshot what we are going to use is init method so if you understand the life cycle basically what happens whenever our app gets started this is the function which is going to be called so what i'm going to do in this one is i'm going to use this method um object which is club uh grid methods yeah yeah current methods dot get data and then i'm going to say then and we are going to use result and this is something which you can name anything this is just basically what it is returning right so now what i'm going to do is whatever it is returning we are going to save that to the blog spot blog snapshot so i'm going to call blog snapshot as it goes to result okay so hopefully we have the data now now the next step is creating the list and because right now if you go to the body you can see it's a container okay so we need a whole body over here a list view right so what uh for a listview we also need a particular dial of it right one uh the basic structure is basically we have multiple tiles and that concludes to a list so we are going to create another widget over here i am going to call it lets say blogs list and lets return and this we are going to say return and i'm going to use a container inside of this i'm going to use a child so guys i can directly return list view but what will happen if i will directly return the list to you there are some complex or some basic things which are going to be trouble you if you are adding something additionally for example this is a very basic like direct list view but in many cases you are going to add let's say another list view above above of this which is going to be like horizontal or let's say like horizontal image view or it can be another object uh sorry another widget right it can be image it can be text something which you have above of it right so that's why i'm going to use a container and inside of it i'm going to use a column so if we can use the listview inside of it it will be very easy for you if you can like show it in the in this you can show it everywhere okay so now what we are going to say inside of this i'm going to say list view dot builder okay before building the list we need to have that tile right what is the tile what i'm talking about i'm talking about this guys we have to have this style okay so if we talk about this style this is uh this style represent kind of a sandwich so uh yeah of course the sandwich above and bottom part is not same in this one so how is the sandwich so this sandwich can consist of the bottom part to be an image and then there is a container above of it which is having a color of black with an opacity of 0.2 above of it is another container with a column and that column can have three widget which is text okay so now if we talk about the different styling which we have how we are going to provide the border radius so let's do that okay so in the home we are going to come at the bottom effect out of everything and i'm going to create a new stateless widget i'm going to call it a blog's tile okay so in this tile what we want we want to create this so let me hide that phone for a second and let's focus on this that's this is what we want to achieve okay so how we are going to do that we are going to say child and the first thing which i can see this is a stack this is a sandwich so i want to create a sandwich so this is how we create a sandwich and the first thing which we need is an image image.network so these all these images will be loaded through a url right the download url which we are saving in our cloud firestore this one okay so if you haven't watched the last video i have actually showed you this as well that this is the image which we are saving and it can be loaded through this so yeah you can see so now what we want is basically we don't want to have this kind of one value provided what we want we want to we will be providing this value for each and every time which will be different right so we are going to create these different variables for this this is going to be image url then it's going to be what we have then we have the title then we have a description and then we have the author name okay so that's done now we are going to create a constructor so that we can accept all these details and from this specifically i am going to use a named parameter so what is name for parameters guys i'm just going to um surround all my parameters with the this curly braces what this does you can name the parameter and then you can provide the value i will show it in the next steps so this will be image url and also let me first do this dot title this dot description and this dot author name and also i want to make sure these are a required parameter so i'm just going to say required so what is this what this required is going to do is if i'm not providing any one of these or none of these um what will happen is it will kind of have uh you know kind of something like this you know it will be highlighted so i'll be showing you uh when we are going to add this but before that let me use these values so i'm going to say image url that's what we want okay so what is the center part of our sandwich it's a container as i said before it's going to be a container we don't need any child in this guys we just want to provide a height to it because as you may understand we have in the last part we discussed about it as well when we are adding the block we have a height of 150 for each so that's exactly what we want to provide this one and to this one as well okay so we have this height we want to provide it a color but i'm not going to provide it directly through this why because we need this border radius as well guys right so how we are going to use the border radius we are going to use that through decoration now if you are going to use a decoration in and side by side you are providing the color over here it is going to be an error okay so what we are going to do if we are using a decoration we will say color and i'm going to use colors dot black 45 dot with opacity zero point something two or three i think that will be more than enough and if we save that that's what is the center part of our sandwich so the upper part is a container and that container consists of a column and that column have challenge what are these children these are basically triplets same widget and it's going to be the first uh one is the title so let's call it title uh the next text is going to be the description and the next one to be the author name author name so before providing um all the details i usually prefer to load the data first with a very basic structure so that we get we are able to see the data side by side and we can basically customize it to our requirements so the basic structure of our block tile is complete let me just do one more thing i am going to surround my image with a widget which is going to be clip r rect so we are using this to provide a border radius guys so we haven't provided the body radius in this one as well so let me do that as well border radius and it's going to be border radius dot circular is it okay there is it i am going to just copy this line and have it over here and use a comma and i'm going to save that that okay so the next step is moving to the widget which we are creating so this where is it where is it this is the widget so this is the widget we were creating to load all these uh to load all these styles in a list view so we were creating a builder for list view so the first thing which it needs is the item count so we have this blocks snapshot guys right so this is how or this is the data which we have so we are going to say blogs now as snapshot dot documents dot length okay so in the snapshot we are asking for the documents and we are asking the length of it so the builder consists of two things it's going to be the context and the index okay so in the index is basically the value of where it is and something like that okay so we are missing uh something like me what is this is it fine context context and we are going to say index and then we are going to return the tile which we created where are you this is the block style so this is our sandwich so let's provide all the different details the sandwich needs the first is the author name okay so how we are going to get the data similarly how we get it from here so we are going to say my snapshot which is blocks snapshot dot documents and now we want a particular specified index document so i'm going to say index so through this we will be able to get a particular index document then i'm going to say dot what do we want we want the author name so i'm going to say data and in that data i want author name one thing is very important guys make sure that whatever you are writing over here it should directly match with these keys because in the last videos you may have already i have explained this that these are basically key value pairs we created a map and we uploaded the map so here as we can see we have using uh used the camel case method similarly we are using over here as well so let me do that so we will use a semicolon after this whole tile and let's provide other values to it so right now you can see it is showing kind of an error okay so i was aware about the android studio of like highlighting thing for this one it's showing kind of this curly line and that and then uh that doesn't matter it's basically showing you that there can be some thing which we should do okay so what we want we want the title now so i'm going to say title i'm going to say block snapshot dot documents and we're going to go and get that index okay and our data and that data is going to be okay that's going to be titled title okay next is going to be the description description is going to simply be blocks blog snapshot dot documents and index dot data and i'm going to provide that description because we are not using the whole let me see yeah so we are using desc we are using title we are using img url so let's make sure that we are going to do the same so i'm going to say img url block block snapshot dot documents and then index and then dot data and we're going to call the same no no we haven't copied it so yeah so that's all what we have so i have i'm going to save that and let me open up the app so this is the app now the data is not loaded why because it's going to be loaded when it's going to launch that's where the method is so i'm going to restart the app so that this function will be called and it will get all the data and let's see what is the you know the status update is it completed or is it not done so basically if it will be working we can continue and design our you know blog style so basically our sandwich to look how we want okay is it really loading i can't see am i doing any mistake let me just give me a second okay now it's syncing file i think it's loaded again just give me okay so i have been so i have created the whole uh widget but i'm not loading it anywhere the dumbest mystic to do but you know so this is how we will do that i'm going to save that and hopefully now it should be visible okay that's that where is my floating action button can you please give me give that to me back he took it so we are returning that right okay so the it is saying the get up documents was called on null that's interesting so let's see we have dot get data then we have then then we have result and then we have the getter documents was called on where are you getter documents this is the one guys so it was called okay got it got it got it right so the thing is we want to show this all but we want to make sure if the data is not loaded because the data is not like instantly loaded right that's the reason why we use the future uh basically a weight of async because it's going to take some time so what i'm going to do um yeah so what i'm going to do i'm going to simply have a condition over here that where is it blogs snapshot okay yeah blog snapshot is not equals to null question mark so i'm asking if blog snapshot is not equals to null then show this or else if it's equals to null which is the other condition we are going to say circular progress argument simple progress indicator and also just providing it alignment so that it's not somewhere any here in the corner alignment or center okay if i save that now and go over here it's not showing that neither the sun on this neither this so let me reload it again and let's see what happens okay so that's above there so the height of the container is pretty uh small not good but anyways i'm going to say mean x is alignment main axis alignment by the way i can just simply you know give this condition outside of this so that we don't have to worry about the size because the column is the one which they kind of uh shrinks the size of it okay the other thing is we need to use a shrink wrap otherwise it should it would have problem i think okay i'm just saving that okay so this is a good news um the image why are you not loaded maybe the internet is the issue but let me make sure i am calling img url and we oh my god guys look at this we have gotten that okay so one thing which is important uh as i was saying that these uh the loading was here we want that to be in the center so what we can do we can get this condition of blog snapshot not equals to now we are going to place that over here for the column and we are going to take this container and place it after the column okay so now that's fine okay so as i said the basic structure is working fine so now it's time to design this let me come over here so that we can give both of the space they deserve and design it up okay so the first thing is it should take the whole space rather than just taking we also have some kind of padding uh so basically this screenshot is from this place to this place guys i know this color it looks seems but looks the same same it's not same so we need to provide this so i think the you know it's taking the whole bit but it's not taking it's not getting fitted in that so i'm just going to provide it the property of it where is the image over here so inside of that i'm going to say fit and we are going to say box fit dot cover so what cover does is basically try to cover all these space which it have okay so it's not having that width as well so what i will do i will provide the width as well so what will be the wave so i want this width to be taking up the whole space of the display as we did in the last video guys so i'm going to say media query dot off context dot size dot width okay so now you can see it's taking the whole space okay so that's that part is done what's the next step i want a little bit of padding in this guys okay so one very good thing is um you don't have to surround your list view with a padding list view directly have one so i'm just going to go over there i'm going to say padding i'm going to say agencies or symmetrical i'm going to say horizontal and around 8 is what we provided i'm not sure so let's just just horizontal and i'm going to give it eight it's quite small so i'm just going to go with 16. i think it looks fine okay so in each and every time we also have some kind of bottom space like you know margin you can say right so i'm going to say margin i'm going to say h inserts dot only because we want only from one direction guys right not from top and bottom just from that's that's what i'm preferring you can go with uh symmetric as well so i'm going to say bottom and let's provide it something like eight i think that will be good enough we can go more 16 yeah that's that's exactly it so now what i can notice is uh guys don't compare these with this because i think this image is not that you know kind of awesome as this one so i'm just going to get rid of this means it's this uh it's like you know it's disapproving how awesome our app should be looking so i'm just gonna delete this document and also you can see it's not directly synced up it's not going to delete itself we have to restart the app so this is something which we'll be covering in the next part so don't miss that okay so you can see the loading is now in the center because we have updated that and it should show us only one thai sandwich and let me add one more sandwich where are you okay and i'm going to give the author name my name is uh let's see what a title of dream travel destination and a description of dream travel location and i'm going to upload that okay so it's going to take some time in the meanwhile let me show you what we are going to do so we have this width we have provided the weight that we have already um also given the you know this one now what i think is we should you know kind of decrease this i think the height of this is more than this one so let me have a look at it if we go over here it's that and if you go over here it's that we can increase the height if we want but i think it's fine so what should we do okay i think 150 is what we were using in the last app okay let me close this not closing i think what do you think guys which one looks best too let me know in the comments like should i increase the size i think i should so i'm just going to do this and if i'm going to do that in this one i should also do that in the create blog where we use this we are going to save find 150 and i'm going to update that to 170 and let's do that save okay so do we have any other no results so i have updated over there as well so we have this 150 and i'm going to do one thing now guys save this okay so it's now bigger now we want these all to be in the center so i'm going to say column the main excessive alignment main x is alignment dot center so that's going to align it here center then we want to align it in the horizontally center as well so i'm going to say cross axis alignment cross axis alignment dot center and going to save that okay now the reason why it's not in the center because the size of the column should be will be like this much so what i'm going to do i'm going to provide the container of width of media query uh where are you man where are you where are you this one exactly this is the exact way we want to provide to this one so now you can see it's in the center okay so now it's time to style the you know these triplets so i'm going to say style and text okay text style and i'm going to say okay so what do we want in this so the color is already what we want so that's not what we want we want the font size we want the font size to be i think 22 this is okay can you update men please please okay this is updated um we want to give it some font weight i i think there is what about 500 okay it looks fine um i'm going to give it some sized box just to give it a little bit of space between them or for okay let me copy that and provide it before this one as well and the size um okay this should have some styling as well you know his other his brother have it so he should do i'm going to say font size and that's going to be how much how much how much how much 16 are you looking same no he doesn't so we have to go 17 are you looking same i think so okay one thing which i don't like is the starting with smaller i don't know that that doesn't like kind of look good anyways okay so we have this we have that we can increase the font size and also we can decrease the um font weight for this so it kind of stands out a little bit more so we can give it something like this and why is this looking quite big and i'm not sure it means okay what is what we okay i think the size of this text can be bigger like this okay let me have the same text so that we will be able to arrange it properly what is this this is miami beach update i'm going to reload this so we have already provided the you know size to this to this and yeah major of the things are done guys um let me just have a load load it and show it to you guys and yeah make sure to uh watch the next video guys because in the next next video we will be discussing something very important which is the streams through streams you can provide a really great experience to the users because what will happen it will be a real-time sync of the data the exact copy what you have in the online right so i think the internet is causing the problem why why why okay so let's just give it a time i'll be right back once it is done so finally miracle happened and the images are loaded now so if we see i think we are pretty close right okay so yeah the video is done and in the next one we are going to use the streams and we are making we are going to make this data uh sync with how the data is on the database of file store so basically we have update anything if we delete anything over there it will be directly uh shown over here in the real time right so yeah i'll see you in the next one so welcome back to the flutter blog app with firebase series in this video we are going to learn how to use the streams to sync updates in real time and list view of any data change in cloud firestore so before that i would like to add one thing in the last video as we updated this list we were fetching all the data from the database so i added one more block and in that the title length was better larger so this is the orientation it becomes so first thing first let's fix this so what we have to do we basically have to go to that title and we have to add a property which is text line and i'm going to say text align dot center and that's going to align the text in the center so this is fixed now so let's work on how we are going to use stream and stream builder to sync our of the updates in real time in list view of any data changes in cloud firestore so for that the first thing which we have to do we in the last video we created this get data function through which we are getting the data from firestore and specifically the blocks collection so we will be replacing the get documents to snapshots okay so rather than getting the document we are now getting the snapshot so that's a stream guys so we will be uh rather than using a query snapshot we will be using the stream now okay so i'm going to update this with blogs stream okay so now crits method dot get data then result will be giving us a state so i'm going to give store that in a stream now let's work on this guys okay so we will be removing all this list view and updating this to blocks stream is not equals to nodes this will be functioning the same but if we talk about here we will be using something called stream builder now this stream builder is going to take builder of course but before that it's going to take a stream so let's provide the stream first so the stream is going to be that exact one which we created right now that is blogs stream so i'm just going to say blog system and the builder is going to work how it works in major like we have context and then we have another property so that's going to be snapshot in this so then we will say return and the list view okay so in this we have this context is fine this is the snapshot which have all the data which the stream is providing so we'll be using the data of it so to give it item code i will be saying snapshot.data.documents.length so in short terms we just have to replace the blocks snapshot with snapshot.data so this updated this one and this one and of course we have to end this with a semicolon and if i save this it's going to load up and hopefully it's going to be working so let me just set this up guys it's so that is it's visible and we are going to go to the database and we are going to make some changes in the real time so that we can see if there is uh the updates in the real time to the to our app or not so yeah let's see so we have these three blocks right now the first one is dream travel location the second one is some random dis uh okay where is the title this is the miami beach and this one is sunshine iceland travel destination so we'll be tweaking them and updating them so for some reason it's not loading let me see what's the problem so if we go over here we are calling this methods i think we need to restart the app rather than just saving it okay uh we should actually restart everything because we have created a lot of things so i'm just going to go and restart the app once again and in the end uh guys i have a bonus tip for you guys as well that as i said initially in this app the images are not going to be something which is going to be taking like we are going to cache the images right the network images uh to the local memory so that if there is no internet access still the user can access the content and you know consume the content easily so yeah that's something which you will be doing at the end once we get done with this so the xcode build is taking place let me see what's happening if we have anything which we should work on okay cloud firestore we don't require this over here and non-constrained camel case okay i think it's majorly fine there's no error over here okay guys so without wait wasting any of your time i'll be checking it out once it's uh the build gets done i'll be right back okay so this happens a lot now i say like i'm going okay so anyways uh the app is loading this is the splash screen guys if you are not aware um if you don't know how to change this let me know in the comments because uh it takes time like it's a wide screen it's not a very good user experience so i will make a video on that if you want so yeah the data will be loading now any minute sorry any second should be um okay let's give it a second okay and let's um be ready with our database because i think it's an internet problem or is it something which we are doing wrong so let me have a look there so what is happening is when we are starting the app in the init method we are in it state we are doing this so i last i did updated this last time so it's saying we get the getter documents was called on null so where are we calling the um documents so we are calling that in where are we calling that so we are calling getter documents okay it's just working if i'm saving that it's the problem um i think the data was not loaded for some reason anyway guys we will fix this but right now you can see this is what we have now we want to make sure that uh the updates which we are making are in sync with this so for example this is uh we are going to update the price okay so i am a company owner and i want to just charge people a random price to make more money so i'm just going to go and increase online now people won't realize that so but i do it's working so if i change it for example let's make sunshine to fun shine and update that fun chinese would you like to go there okay so uh as you can see guys it's working perfectly fine and yeah pretty quick what you have to do is simply um rather than getting the documents you just have to get snapshots and yeah in this one we updated the text alignment and let me give you the bonus one which is how to make sure how to cache this so we are going to use guest image cached network image package the image okay and we're going to open this so how this package helps guys is basically if you add this just go to your spec.cml file and we are going to add this save that and then come back and then uh rather than directly using image dot network what we will be using we will be using cached network image and we directly have to provide url to that so where is our image this is our image so i'm just going to remove this i'm going to call it cache shade network image hopefully i'm pronouncing it everything right csh yeah i'm not pronouncing it right okay so i'm just going to use this csh edc see okay okay so then we just have to import it and i'm going to say img url is it small image url yeah so it's done guys so what this will do is basically all the images which are loaded now they will be cached locally so if even if we don't have an internet access the user will be able to consume the content to be able to see images so of course we have to reload for these changes to take place and also let's uh let's see if we are facing that you know the error again which we did faced last time let's see so okay is uh it's finally built and one thing which i updated is this using set state so we missed this and because of this what was happening is the loading was there and the circular indicator was progress indicator was shown even when we get the data and we saved that to blog stream or blog snapshot so whenever i was doing that instant run it was being reflected but before that it was not so make sure to use the set state method and it will get that done other than that if we talk about the local caching of image as you can you can see i am not connected to internet right now but the images are there and let me show you by closing up the app and then opening the app again so it's showing that and i'll fix that but basically the images are loaded even when we don't have the internet connection so this concludes our course and hope you get enough value from it and if you do make sure to share your thoughts about this course about how can i make things better and about the videos make sure to share your feedback in the comments like the video if you do like the uh the content which we share if you have any kind of thoughts how we can do this better make sure to share them in the comments and subscribe for more and i'll make sure more good content will continue to flow and i'll see you in the next one so i'll see you in the next one

Channel: Sanskar Tiwari

Views: 14,173

Rating: 4.9643917 out of 5

Keywords: flutter blog app tutorial, flutter blog app using firestore build ios & android app, flutter blog app github, flutter blog, flutter blog app with firebase, flutter blog ui, flutter firebase blog, flutter firebase project, flutter tutorial firebase, flutter app tutorial firebase, google flutter for beginners, flutter firebase auth, flutter full app tutorial, flutter firebase tutorial, flutter app development, flutter app example

Id: E9gyL-UcQco

Length: 91min 24sec (5484 seconds)

Published: Sat Nov 07 2020