Flutter Cloud Firestore Tutorial - CRUD (Create, Read, Updated, Delete) Cloud Firestore Guide

in today's video I'm going to be showing you guys how to use firebases cloud farore database within your flutter application we're going to take a look at all of the essentials such as creating reading updating and deleting data from cloudfire store and I'm going to show you all of this while making sure that you write well structured maintainable typesafe code to get started I'd just like to mention that links to all of the resources that I use within this video as well as a link to the source code can be found in the description below so feel free to take a look at it if you're confused at any point our application is going to have the following functionality we'll have a to-do application whereby we'll be able to see a list of to-dos we'll be able to mark to-dos at done and the time at which we mark them on unmark them as done or undone we'll see the time updated for the actual Tim stamp and if you click on the plus button here then we'll be able to add a to-do so here I'll add add a to-do for let's just say subscribe and then press okay and as you can see that subscribe has been added to our database this all is obviously going to be persisted on cloud fir store besides this I want to let you know that I initialized an empty floter project and and I then run flutter fire configure to actually set up the flutter project to communicate with Firebase and then that's pretty much it in terms of the actual setup for this tutorial if you guys are confused as to how to actually set up and connect flutter and Firebase together already have a tutorial for this on my channel so you can take a look at that to understand that in more detail but once you have flutter connected to Firebase and all of that is set up the first thing that we're going to be doing is taking a look at the dependencies that we'll be using so if you already have the application connected with Firebase then you're going to already be using the Firebase code dependency besides this another dependency that we're going to be using is cloud fire store and then besides that I'm also going to be using the Intel package which will allow me to take daytime objects and convert them into par strings off a specific format that I want with this done the first thing I'll recommend is that you give your application a test run and make sure that it's working and then from there come to the actual Firebase project and then from there click on build and fire store database initialize the cloud far store database if you haven't already and make sure that the rules for this database are set to test mode and not production once that is done we are going to be presented with this type of a UI and this is the UI for cloud fir store Cloud fire store is basically a no SQL database so this basically means that it doesn't have any intrinsic structure to the data that we put within it no tables in this case and we can put any type of data that we want within this as long as it conforms to a Json format so at the root of our database we have collections and collections can have documents within it and documents can have further collections within them in today's tutorial since we are creating an actual to-do application as you can see here what we're going to be doing is creating a collection of to-dos so I'm going to give my collection and ID in this case it's going to be to-dos and then I'm going to do next for the document ID we can do Auto ID and then we're going to have some fields that are going to depict the data that each to-do is going to have the first is going to be the actual task so what the to-do is it's going to be a string so here I will say go to the gym and then after this we'll have some more Fields such as is the to-do done so is done this is going to be a Boolean and the value to start with will be false we'll also have a created on field and this is going to be a time stamp and for the date I'll select today the time just mark it as of now and then another one which is going to be updated on and then I am going to create time stamp date is going to be today time again the same and with this do save and there we go now we have a collection which has a document within it and a collection can have many documents so many to-dos and each to-do is going to have the following structure created on is done task and updated on now I can add more fields to this I can add another collection to this I can create a new document or I can make more collections but this is the basic structure what our database is going to look like for the actual task app that we are creating so once this is done we can actually move back to flutter and here we're going to be doing some things now so firstly I'll start debugging my application so now that our application is actually running on the device the first thing that I want to let you guys know that I've modified the main function a bit for our flutter application I've marked it async and then I've made a call to flutter widget bindings it's not initialized after that I've initialized my Firebase application and now what I'm going to be doing is that I'm going to be calling the Firebase fir store plugin and then from there I'm going to be accessing the instance and then I'm going to be modifying some settings for the instance the setting that I'm actually going to be modifying I'll just copy and paste that in it's a settings object where we are setting persistence enable to true and what this is basically going to do is enable us to Cache the data on device so whenever we make subsequent requests to get data from cloudfire store and for some reason that data is the same as the data that was on the actual database then we are just basically going to get the data from the cache instead of hitting the data database and this is going to make our application more cost efficient once this is done you can do command save reload your application make sure that everything is working and now we're ready to get going as I had alluded to before since I want to make this tutorial conform to creating code that is well structured as well as maintainable and type safe the first thing that we're going to be doing is creating a to-do model class within our code base which is going to model the structure of it to-do within our database so to do that I will come to lib create a new folder here I'm going to call this models and within this we're going to create a file which I'm going to call to-do and then I'm going to say dot then from here what I'll do is that I'm going to create a class within this called to-do and this is going to be the class represent the structure of it to do with our application so this class is going to have a couple of different responsibilities but all are going to pertain to the same structure of it to do the first is is that it's going to basically Define the structure of what it Tod do is then we'll also add functionality to this class so that we can take some Json we can pass it to this class's Constructor and then it returns a to-do instance to us and we'll also add some functionality to this class so that it can take a to-do instance and it can return to us Json for that to do so that we can actually save that Json within cloudfire store because cloudfire store stores Json objects within it the first thing that I'll do is that I'll define the properties that a to-do is going to have so these are the same that we saved within our Cloud fire store so so task is done created on and updated on as you can see string bu and then this time stab object definition can be copied in from cloud fire store once this is done then I'm going to define the actual Constructor for this class which is going to take an required named Arguments for task is done created on and updated on once this is done I'm going to create a factory method which you do by doing to-do do from and then whatever the name is after the dot so from Json so as the name suggest this is is going to take a Json object it return it to do to us and then what I'm going to say basically within the actual parameters that this function is going to get past is that it's going to get a map of adjacent and then we'll return this and what we're basically going to do here is that I'm going to say that we're going set the task and we're going to set the task to the Json object that we get we ask the task property from it and then what I'm going to do is Mark that or cast that as a string like so and once this is done I'm going to follow the same structure for the other three properties which are is done created on and updated on and I'm casting them as a Bool time stamp and time stab like so and then do command save so now that we have the factory method created as well another method that I'll create is going to be a function which will take the to-do that we have and will return a copy of the to-do to us except it's going to allow us to modify some properties that we want to modify with within the to-do so we're going to take the same to-do we can modify some properties within the same to-do instance and then it'll return a new instance of the to-do to us so this function is going to return it Tod do to us is going to be called copy with and this function is going to take in some optional named arguments the first argument is going to be an optional string which is going to be task and then I'm going to add the other three as well which is is done created on and updated on and then what I'm going to do within this function is that I'll return a instance of a to-do and what this is what we're going to do if we get a task passed to us then that is the task that we're going to use for this new to-do instance that we're giving otherwise we'll just use the current instances task and then this is going to be the same for all of the other ones so I'll just copy and paste them in so if we pass in and is done then it uses that otherwise it uses the current instances than property like so and do command save and and finally I'll create the last actual function on this class which is going to return a Json object to us so it's going to return a map which is going to have keys as string and then the actual values as an optional object and I'm going to call this function 2 Json it will not get any parameters passed to it and within this we will return the following map so we'll just return a map with the property task set to task is done to is done created on to created on and updated on to updated on so now by creating this class we have defined the structure of what our to-do is going to look like as well as some utility methods to convert our to-do to Json or take a Json and convert that to a to-do the next thing that I want to do is that I do not want to clutter my homepage which is just a empty stateful widget class with all of the logic of actually setting up Cloud fire store and setting up the actual collection references and things like that I want to have a separation of concern so to do that what I'll do is that I'll create a new folder Within lip I'm going to call this services and then here I'm going to create a new file which I'm going to call database undor service do do then what I'm going to do is that I'm going to open this class up and here I'm going to create a class called database service now before we Define anything within database service class what I'll do is that I'll Define a constant string and I'm going to name this to-do collection reference like so and I'm to set this equal to to-dos and this is going to be the same as the name of our collection within Cloud fire store which is to do so if it was something else for you you would do that here and the reason we are defining this globally at the top of our actual file is so that it's easy for us to reference this collection and it will help us avoid any typos because if we added another s here or another o here then it would be referencing a totally different part of our database a totally different collection so now that we have have our database service class created what I'm going to be doing within this is firstly creating a variable which will store a reference to instance of cloud fir store which we can do like this and then I'm going to import the package once this is done I'm also going to create a late final collection reference and a collection reference as the name suggests it's a reference to a particular collection within our database and this is going to store a reference to our to-dos so I'm going to do to-dos ref like so and once this is done I'm going to now create the Constructor for my database service and this is going to be the part which is going to be a tad bit confusing but I'll try to make it as simple for you guys as possible so we'll take our to-do ref and we'll set that equal to the firestore do collection and here we need to pass it a path to our collection which in this case is going to be the to-do collection ref and then from here what I'm going to do is that I am going to use thewi converter function what withd converter basically does is that it returns a collection reference to us but this collection reference is going to have a schema associated with it so what I want to do is that I want to make sure that all of the stuff that is going to be saved to this collection or extracted from this collection needs to conform to a specific type of structure and that structure is going to be the to-do model that we've created so here I'm going to add some ankle brackets and then add Todo like so and that's pretty much all we have to do and then with converter we have to give it some parameters which are the function from fir store and to fir store so what do they do well when we get data from fir store from this collection it's going to call the from fir store function on each of the documents and what we're basically going to do here is that we will basically get snapshots pass to us as well as another argument that we will ignore and then what we'll do is that we will take this snapshot and we will return a to-do instance so to do that what I'll do is do to-do from Json so now we're using that from Json function and here what I'm going to do is pass snapshots. data and then I'm going to add an exclamation mark here and then for two far store I'm going to do the same thing so two store as the name suggest is going to be a function that is going to be called before our data gets sent over to Cloud fire store to be saved within this particular collection so here what we're going to be doing is that we are going to get a to-do pass to us as well as another parameter that I will ignore by giving it an underscore and then here what we'll do is that we'll take our to-do and we'll convert it to Json and then this Json will be given to fir store so now we've created a reference to our collection which is our to-do collection and it's all type safe which means when we get data from cloud fire store from this collection we know that it's going to conform to the schema of the to-do that we've defined and when we save data to Cloud fire store then it's going to be the same it's going to conform to the schema of the to-do we've defined so this is good this is good developer experience it makes easy and other developers to work on our application and it's going to make our application a lot less error prone so this is why we did things the way we did so once this is done now what I'm going to be doing is defining some functions on my database service which are going to allow me to get data from fir store so the first one that I'm going to do is create a function which is going to allow me to get to-dos from the database so to do that what I'll do is that I'll say I'll create a function which is going to return a stream this stream is going to be of type cury snapshot I'm going to call this get to-dos and then I'll open this function and within this what I'll do is that I'll return our to-do refs do snapshots like so and this is pretty much all we have to do then I am also going to create another function which will allow me need to add it too to Cloud fir store so to do that what I'll do is that I'll create this function I'll call it add Todo and then I will say that we will get a to-do pass to us I will mark this function as a sync and within this what I'll do is that I'll do to-dos ref do add and then add the to-do so let's just do this for now and we'll add the rest of the methods later and let's come to actually building the UI so to get started with building the UI what I'll do is that I'll come to my pages homepage and here first thing I'm going to do is create a final variable within our homepage class which will reference our database service and set it to an instance of our database service like so with this done just give a quick rerun to my application to make sure that everything is working and we get no errors within the build function what I'll do is that I'll set the resize to avoid bottom inser property to fall for the scaffold and then I will basically Define the the ab bar property to be called to a function called AB bar and then I will basically copy and paste this function in because this function is very simple it just Returns the ab bar like so so now we have an AB bar that says Todo once this is done the next thing that I'll do is that I will create a function which will return a widget I will call it build UI and then for now within this I'm going to return a safe area widget and the child for this is going to be a column which is going to have a children's list which for now will be empty and then what I'll do is that I'll take this build UI I'll come to my scaffold set the body property to be build UI like so and do command save within the safe area what I'll do is that I will create a call to a function which I will callcore messages list view so let me just copy and paste it in and then I will come down and I will create this function called now saying that this function will turn a fidget like so within this what I'll do is that I will return a sized box which is going to have the following properties for the height and the width so the height is going to be 80% the height of the device which will be 100% And then for this size box I will Define a child and the child is going to be a stream Builder so the stream Builder is a thing which allows us to take in streams ingest those streams and then return a widget that's going to be built using the data from that Stream So the stream Builder expects us to pass it a couple of arguments the first is the Builder so what does it do once it gets the data how does it build a vidget from that so that's what the Builder function defines if you have ever used a list view. Builder function this kind of works the same so here what we have to do is basically say that we get a context and a snapshot passed to us and then within this what I'll do is that for now I will return a list view like so and do Al shift F command save just to reformat our code our stream Builder also expects us to pass it a stream so this is the actual data stream so where are we're going to access this form since we want to get to-dos and display those to-dos what we're going to do is do database service Dot and then I'm going to do the get todos and that's pretty much it that's all we had to do so once this is done the next thing that I'll do is that within the Builder function before we render any UI what I'm going to be doing is actually creating a list of to-dos and I'm going to say that we're going to do snapshot and then from snapshot I'm going to do data do dogs and if for some reason we don't have this so I'll use the null of your operator and I'll set that to be an empty list so if snapshot. dat doesn't exist we just set to-dos to be an empty list then what I'm going to do is that I'm going to have a if block here which says if to-dos are empty return a constant Center text that says added to-do and if that is not the case then what I want to do is print to-dos so do command save and if I restart my application we're going to see in the debug log it gives me an output saying there's a list which has an instance of with converter cery document snapshot to-do so there's some kind of a to-do here with some kind of cury document snapshot type of thing so we'll come to that so now that this is done what I can do is actually use these snapshots to generate list view from them so what I'm going to do now is that instead of using this list view let's use a list view. Builder so to do that I'll remove this and add list view. Builder the item Builder is going to be similar to what we've defined before for a stream Builder but this time we're going to get the build context and an index passed to us and then here what I'll do is that I am going to return a padding object with a child which is going to be a list tile like so and and then what I'll do is that I will just add the remaining semicolons or commas where I have to add just to make sure that the code is formatted nice and then for my list view Builder I'm going to set the item count to be our to-dos do length and do command safe and then what I'm going to do is that within my list T before I actually show anything within this what I'll do is that within my item Builder function I will create a to-do variable equal and then I will set this equal to the to-dos at the current index and then on this actual converter object as you can see with converter query document snapshot object we have a function called data that we can call to access the data and then do command save but before we do that let's just import our to-do model so if I do command save now and I print to do you are going to see that now if I restart start my application in the debug console where is getting a print statement saying an instance of a to-do so now we can do to-do do created on is done task and we can easily access all of this data one other question you might have is that okay this is the data of the actual to-do so this is all of the data that the document has but how do I access the ID of the document great question well Tod do that what you can do is basically create another variable so this is going to be a string because IDs are always string called to-do ID and I'm going to set this equal to to-dos then add that specific index do ID property like so and do command save so now I can do print to-do ID restart my application and you're going to see that we get the ID of the to-do printed here like so so now that we have access to our to-do we can do whatever we want with that data so firstly what I'll do is that I'll set the tile color for the list tile to be the following theme. off context color color scheme. primary container the title is going to be a text widget and here I'm going to do to-do do task so now we are seeing that then after this I'm going to add a subtitle property which will be text this text is going to be basically the actual Tim stamp so what I want to do is that I don't want to show the raw timestamp I want to convert that into some kind of an actual format so for that I'll do date and this is going to be imported from the Intel package so let me quickly import that and then here I'm going to Define as a string the actual format of how I want my time standand to be formatted and then I will call the format function on this and here I'll do to-do do updated on do to date and then like so and that's pretty much all we have to do just add the trailing commas do command save and now we're getting the Tim stamp shown as well once this is done I'm going to add the trailing property to this which is going to be a checkbox like so and our checkbox expects us to give it a value the value is going to be to-do do is done and then after this what's going to happen when the to-do gets changed so this is going to be a function where we'll get the value passed to us and then we determine what happens when we click on this checkbox so right now we click on this checkbox nothing happens so let's fix this so to fix this the first thing that we have have to do is go to our database service and create a function which will allow us to update an existing to-do to do that I will create a function called update Todo which returns void and this function is going to take in two things it's going to take in a string of the idea of the to-do as well as an actual to-do like so and then what I'm going to do here is that I'll do to-do ref. document So within this collection reference I want to reference a particular document which has this ID which is to-do ID and then I want to update it and I want to update and I want to set that to to-do dojon like so now similar to how we set up our collection reference we can also set up a document reference with a WID converter but I just wanted to show you another way of how you could actually work without using any of this converter stuff with Cloud fire store so you can just. update but now that we do dot update then we just have to actually give it at a map object so we can get the map object by doing to-do dot dot Json command save and that's pretty much all we have to do so now within the onchanged what I'm going to be doing is firstly changing the actual to-do and updating some of the properties for it so what I'll do is that I'll create a new variable here called to-do and I'm going to say this is going to be updated to-do and I'm going to set this equal to to-do do copy with so what I want to do is that I want to update the is done property so I'll do is done and I'll set this equal to to-do do ISD done and whatever the opposite of that is to do that I'll add an exclamation mark So if it's true it'll be false if it's false it'll be true and then also the updated on property which I'll set to timestamp and then we are going to do do now and that's pretty much it once this is done the next thing that I'll do is that I'll just simply call database service do and I'm going to do update to-do I'm going to pass it the to-do ID and the updated to-do to command save and now I'm going to go to Cloud fire store open it up on one side and as you can see we just have one to do and we're showing that go to the gym so if I click done here you're going to see that it gets marked done here and in the database the value get changes as well so now it is done to true and updated on is like this if I click on this again it'll Mar be marked as it's done false and updated on like so so this is pretty powerful now you can see the actual magic of using these converters and setting up a model class and structuring your code base in a way so that there's a separation of concern and it's easy for you to maintain your code and grow your code base so this is the actual part of using the structure that I showcased to you within this video so now the next thing that we're going to be taking a look at is how can we delete a to-do so to do that what I'm going to be doing is on my Lista I am going to be adding a on long press function call back so when we long press on our tile we want to do something and then what I'm going to be doing here is that I am going to be coming to my database service I'm going to say or create another function which will return a void and this function is going to delete it to-do so I'll call it delete to-do it's going to take in a to-do ID that's pretty much all we want so the ID of the document that we want to do do and we'll do to-do ref. Doc and then the to-do ID dot delete to command save come back and on long press I'll do database service do delete to-do and give it the to-do ID to command save so now if I open Cloud fire store again and I long press on this the to-do is deleted and now since our to-dos list is empty it says add a to-do so let's now add an actual to-do programmatically first thing that we have to do is Define a floating action button and this Floating Action button I will just copy and paste it in like so The Floating Action button requires what happens when it gets pressed so I'll leave that empty for now and then after after that what I'll do is that I'll paste in the actual properties for what the background and the child for this Floating Action button is going to be then what happens when it gets pressed well I will say that when it gets pressed a function called display text input dialogue is called and then I will go to the very bottom of my class I'll say that this function will turn a void it's going to be called display text input dialogue and do this and do command save so now that we have this button you can click on it and then run some kind of a logic to actually add it to do so what I'm going to be doing here is that I'm going to say that I'm going to return a call to a function called show dialogue and then what I'm going to be doing is also marking my function as a sync inside of the Builder function what I'm going to be doing is saying that we'll get a context pass to us and then we need to Define how our dialogue is going to look here what I'm going to do is that I'm going to return a alert dialogue with a title like so and do command save and to command save and give a test run so when we click on the plus we get a dialogue which says added to do once this is done then what I'm going to do is that I'm going to set the content property for this to be a text field like so and then the decoration for this text field is going to be the following like so and do command save so now if I click on it we see a text field since I want to access the value that gets saved on this text field what I'll do is create a text editing controller so I'll come to the top of my class I'll create a variable final text editing controller _ text editing controller and set that to a new instance of text editing controller and then I'll say that for text field the controller is going to beore text editing controller like so and do command save so now controller is linked to our text field once this is done after this I'm going to define the actual actions list for my alert dialogue and for now it'll be an empty actions list and within this I'll say that we'll have a material button which is going to have color also Define the onpressed property for this so I'll Define that so what happens when this button gets pressed for now nothing and if I click on the plus button now you can see it looks something like this so let me update The Styling for the button and set the text color for this and the CH for this to be following so now if I click on it it says okay so once this is done the next thing that I'll do is that within once we click on press I want to basically dismiss the dialogue so that can be done by using Navigator dop context and if there was anything within this textt field I want to clear it so for that I can doore text editing controller. CLE and now that this is done let's go to the actual logic of what happens when we add something here and how do we add that to-do to fir store so in our database service we had already created a function called add to-do which takes in a to-do and adds that so now what do we do well within the actual material buttons on pressed property what I'll do that I'll create a new to-do object set it to to-do and here I'm going to say we're going to create a new to-do the task is going to be the text editing controller Dot and then the actual text the is done property is going to be false because we just created this to-do created on is going to be amp. now and then updated on is going to be the same thing and then with this done the last thing that we'll do is do database service Dot and I'm going to do add Todo add the to do here do command save and that's pretty much it that's all we had to do so now that this is done let's restart our application open up Cloud fire store one site see the to-dos are empty for now and add a to-do so I'm going to add a to-do here saying like And subscribe and if I do that and press okay it's added here and within our database there you go a new to-do was created with the following structure I can create that as done and it's going to mark that as done and I can add more to-dos as well such as go to the gym so it adds another one as you can see within our database and I can also add another one which is study flutter and press okay and there you go so that's pretty much it for today's tutorial I hope that you enjoyed this tutorial and learned a bit more about how to work with Cloud fire store and how to properly set up your code code base so that it's easily maintainable and type safe as always if you had any question comments or concerns then feel free to leave them down in the comments below and I'll try my best to answer them for you and as always stay happy stay healthy keep learning keep growing and I'll see you guys in the next video bye-bye

Channel: Hussain Mustafa

Views: 14,545

Keywords: flutter firebase, flutter, firebase, flutter cloud firestore, flutter cloud firestore tutorial, flutter cloud firestore crud, flutter firebase crud using cloud firestore, flutter firestore tutorial, flutter firestore crud, flutter firestore example, cloud firestore flutter, cloud firestore firebase, cloud firestore flutter tutorial, cloud firestore setup flutter, cloud_firestore flutter, firebase database tutorial, firebase database tutorial flutter, flutter firebase crud

Id: G0rsszX4E9Q

Length: 32min 32sec (1952 seconds)

Published: Sun Dec 03 2023