How to use Firestore in Flutter Web | Flutter Web Diary

thank you for clicking on this video and today what i'm going to share with you is how to use firestore in your flutter web project i have with me a flutter web project that you can follow along in this tutorial at the end of this tutorial you're able to add a diary entry so i'm going to add an emoji and then i'm going to put in the title as subscribe don't know what that is and then at the same time you're gonna put in a whole lot of text and it's successfully added and now i'm going to edit which you are going to be able to do i'm changing the title to share and also changing it to an angry emoji and click on update and the update successfully and now i'm going to delete as well so i'm going to just click on the delete button and then there is no more angry diary entry the link of the worksheet can be found in the link in the description below don't forget to give me a star for this worksheet you can give it a try before starting so let's get started so make sure you have your flutter web diary project or worksheet open so let's search the first to-do all right so i have a couple of to-do's that i've created inside the flutter web diary project and the first one is the import the firebase file store package in index html file and pub spec so let's click on it we have to import the firebase and file store package in index html file and pub spec so we are going to refer to this firebase.flutter.dev link over here so let's go over to this website so as you can see here this is the firebase.flutter.therefore website or you call it the flutter fire documentation so the first thing is let's get started over here and inside the flutter fire overview it says that and you have some prerequisites so you need a flutter project and then at the same time you need a firebase project so i'm going to go to the firebase project later on in this tutorial so let's go down and under the installation header over here you need to add in the firebase core so let's copy this line over here and then let's go back to our vs code and go to the pubspec.yaml file so under our pubspec emo file let's add in the firebase call right under our provider dependency over here so let's save this and let's go back to the documentation so once we are done with this let's scroll all the way down to see what's next so we already have installed the plugin let's go down and under the platform setup you could see there is a different installation but we are doing a flutter web project so that means we only need a web installation so you can either command or control click to open this link in a new tab so once it is open you could see the web installation so let's scroll all the way down so a little warning so for the support for web in flutter fire it's a little limited but don't worry firestore is supported so let's scroll all the way down and then we need to add this firebase sdk we need to add the firebase sdk inside our index html file or our web index html file however i would not recommend you to copy this line because this seems a little outdated so what you can do is you can go to your firebase console make sure you have a firebase project that you want to connect to the flutter web diary project if you don't have any project make sure you create one i'm going to use the test haris one two three four so make sure inside your project you have a web app inside so if you don't have a web app over here like this what you can do is you can click on this add app and then hover over this web and then just go through the different steps to create the web application so once you have a web app you need to go to the settings of the web app that you have created inside your firebase project so click on this gear icon then if you were to scroll all the way down you could see the firebase sdk snippet or cdn over here so we require the script tag that is getting the firebase app javascript library and then at the same time we need the firebase configuration as well so we can just click on this copy icon over here and then this means that it has been copied to our clipboard and let's go back to our index.html file and then let's open up index.html file and then if you were to scroll all the way down you could see there is a 2.1 over here so under these comments we can add in a new line and then we can paste it as such so let's save this so that it auto formats we now have initialized firebase in our flutter web project with the script text that we have copied and pasted over here however we are missing one thing do you know what we are missing we have a firebase app library but do we have a firebase file store library therefore we need to download the firestore library as well so let's go back to the flutter file documentation if you were to go back to the web installation we already have added our firebase sdk as well as our firebase config so once complete so let's go back to the flat of fire documentation that we were initially in before we initialize the flutter fire so let's go to the left tab over here and if you were to scroll all the way down you could see cloud firestore let's click on the overview so under the cloud firestore let's scroll all the way down and we are required to add the dependency of the cloud firestore so we can copy this whole line of code with the version number and then let's go back to our pop spec demo file and then we can paste it just right underneath our firebase core so now let's save this once it finished downloading let's go back to the documentation and then if you were to scroll all the way down you could see that after we download the dependency we will need to add the sdk for the web only inside our index html file so you can see here the script tag over here it is almost the same version as our firebase app scriptdeck or js library as well so let's go back to our index.html file so inside our index.html file so if you were to see here there is a comment that says if you want to use any firebase products maybe such as firestore then we can go to this website to see the latest version we can go to this website so command click it and then right under available firebase js sdk from cdn let's click on it and then under the cloud fire store you could see this whole script deck for the firebase file store js or javascript library so we can copy this and let's go back to our index.html file and then we can paste it over here so normally what i want is to have the same version for my firebase app and also my firebase file store so zero sounds good to me if there is a number i would rather put the number as well so let's save this and now we have firestar inside our index.html file and also our pubspec file so let's go back to the flutter file documentation to finish initializing our firebase inside our flutter web project so once we are done with this then the next step is let's go back to the getting started overview over here and then if you were to scroll all the way down till you see initialize flutter fire we need to have this inside our flutter project so they already have created an example app inside our main.dart to initialize firebase what we can do is that we can just copy this whole line of code so we can just copy this so inside this example over here we need to have a firebase initialize app function that is a future so if it's a future you will require a future builder so it takes in the initialization future inside the future parameters then in the builder then it's going to check for three different cases so the first case is that if a snapshot has an error then we will return a widget to show that there is an error if the snapshot connection state is done then it will return our flutter web diary app and lastly if it's loading then we will just return a loading widget all right so that's just a simple summary of what we have copied then let's go back to our main.dart file in our vs code and then what we can do is we can just highlight the void mean and then we can paste it as such let's scroll all the way up and then we don't need this duplicate import so remove this flutter material dot dot library and then we have already imported the firebase core library let's scroll all the way down till we see the app stateless widget so currently we don't have these three widgets so we are going to replace this first widget that shows if there's any error so what we are going to replace is a text widget and the text widget is going to take in the snapshot dot error so we want to make it a dot string so at least we have some error message inside our text widget the next thing is that if the snapshot connection state is done then we are going to replace my awesome app with a normal my app so you can just highlight awesome and you can remove it oh no it's not awesome anymore and lastly we have the loading widget so what the loading widget is is just an indicator to show that it's loading so we can just return a circular progress indicator and there we have it now we have successfully created a widget that helps us load the firebase initialization so let's save this and now it's time to run in the debug session all right if we have loaded this website that means the firebase and file store dependency is working so let's go back to our vs code and now we are done with our first to-do so we can just remove this all right let's see the next to do which is to do number one so let's create a add method to add a diary entry to the file store when diary action dot add so let's click on this and we are now inside the diary entry button file so let's close the problems tab so if you were to go back to the browser you could see there is this add to do over here so if you were to click on this this is where we are going to add our diary entry so we will just have a simple emoji and then with a simple title and a simple body as such and then if you were to click submit then we will actually add the diary entry over here so where can you find the diary entry button so if you were to click on this plus button over here you could see the submit button over here so this is the diary entry button.dart file so after we click it we should actually add our new diary entry that we have typed in here so let's go back to our vs code now let's look through the diary entry button.dart file so under our diary entry button widget it is a stateless widget that has a text editing controller that's the title controller so the title controller controls the title of the diary entry next we have the body text controller which is also another text editing controller which controls the body text of the diary entry and lastly we have the emoji this is where if you were to go to the flutter web diary if i click on the add emoji over here you could see that it opens up a drop down menu for the different emojis so let's go back to vs code and lastly we have this diary entry page widget so i will explain this diary entry page widget in the later part of this video so now to add a document to the file store collection we have to write firebase file store and then dot instance and then we are going to call the collection method so the collection method is where we are going to call for the collection that we have inside our fire store database we're going to name this collection called diaries just a rule of thumb naming of collection is plural as it reflects the collection of the document type under my collection diaries my documents will be a single diary document so now we have the reference of the diary collection we're going to use the add method over here so the add method if you were to see it requires us to have a map string dynamic type data so let's put the semicolon over here so instead of actually manually putting in the map string as such what we can do is something safer so we can use the diary entry model so let's go to the diary entry model and if you were to scroll all the way up we can use this diary entry model object over here to help us convert it into a map so that it is safer so let's add a method call to map so let's create a function and let's name it as to map and then for our arguments it is empty and then for our return type we're going to return a map string comma dynamic and then lastly inside the function body or the method body we are going to return a map let me put a semicolon over here so inside this map we will have the different fields that has already been created for us so what we can do is we can multi-select you can hold down alternate and then you can click on the three fields that we have created and then once it is one single line over here you can hold alternate again and then press shift to highlight all of these three copy this and then go back to this map over here and paste it as such and then we are going to multi select all of them again and highlight all of them and make them into a string then at the same time let's put in a colon and then let's paste the fields as such with a comma and now let's save this and now we have the tool map method so let's go back to the diary entry button just right under this unpressed function over here so we're going to create a variable called diary entry map so we know that this is a map and then we're going to create a new instance of the diary entry object so we will choose this diary entry and then we're going to type the first one title and this will refer to the title controller text getter method the next field is body so let me put comma then we're going to put in the body text controller dot text let me put a semicolon and lastly we are going to assign the emoji field to the emoji variable over here and this diary entry map is currently a diary entry object so now we're going to turn it into a map using the method that we have created earlier so type in dot to map now if you were to have a diary entry map you could see the map string dynamic type over here so that means we can use this variable inside our add method over here so you can remove the map or the curly brackets and paste the diary entry map so make sure you save in both files so you can press command or control alternate s to save in all files so let's go to our flutter web and let's see if this file store add method works so now let's go to the add emoji let's click happy and then let's type in happy and then let's tell my diary what happened i am happy let's submit all right so it actually works not over here but inside our file store database so let's go to our firebase console and then right in our cloud file store over here you could see the collection diaries have been created with a document id that's randomly generated for us and then you could see that our body emoji and title has been created inside our fire store great that means we are done with our second to do all right we are done with our to do number one now we are going to go to the to do number two so to do number two leads us to the main.dart file and the instructions for it is to create a diary stream to return the list of diary instance so currently we have a list of one diary entry that is hard coded for us and now what we are going to do is we are going to create a stream that is calling from the firestore database specifically the diaries collection so let's create a variable so let's just remove all of this and type in diary collection and let's type in firebase file store dot instance and then this will refer to the collection reference of the diaries alright so let's end it with a semicolon once that is done we are going to convert this diary collection to a stream that returns a list of diary entry because currently our provider only needs a list of diary entry let's create a final variable called diary stream and for a diary collection let's type in direct collection and for a firestore collection to return a stream we need to use this method called snapshots so what snapshot returns is a stream of query snapshot so in order for us to make this stream of query snapshot into a stream of the data that we need we need to use the dot map method so this will look true in the different snapshots of our diary collection so instead of the name event we're going to put the name snapshot because we are mapping in a single snapshot and then we're going to convert this expression body into a block body let's put in a semicolon and then we are going to return the snapshot and inside this snapshot there is this thing called dogs so these dogs refers to the list of all the documents inside the snapshot so it is a getter method and then for this list of docs we're going to use the map method and then instead of the letter e we're going to refer to a single doc and then let's return this doc over here and let's see what function it returns to get our data if you think it's data then it is correct you could see that the data over here contains all the data of a document snapshot alright so if you were to hover over the diary stream over here it returns a stream of iterable map string dynamic so we got a stream correct now we don't want an iterable but we want a list so what we can do is that at the end of this whole return statement we can actually put the dot to list method over here so if you were to hover over this theory stream instead of iterable it actually returns a stream of list the next thing is we want to convert this map string dynamic into a diary entry so if you were to go to the diary entry over here you can command a control click on this diary entry word you could see that we have created a method that converts the diary entry object into a map object using the tool map method over here can it work the other way by having a map into an object yes it is possible so we are going to use this thing called a factory constructor what a factory constructor is is a function that returns an instance of a class which is what we wanted so once we have typed in factory we can type in the word diary entry or the class itself and then we're going to say from map and then we are going to put the normal argument and curly brackets and then for this from map we are going to use an argument which is the map string dynamic so we can copy this and then we can paste it over here and then we're going to name our argument as map and then inside our function body what we're going to do is we're going to return a diary entry and then let's put in a semicolon at the same time so what we can do is we can multi-select by holding alternate and then holding title and holding body and then we can highlight all of them by alternate shift and command copy and then now we are going to paste it as such so we are going to multi select the body title and our emoji and then we are going to put a colon and a comma then we are going to type in the word map and then we're going to put a square bracket that will refer to the map string dynamic and then we're going to refer to the key of each individual field so emoji title and body so let's save this and under our main.dart file so instead of returning the map string dynamic we can convert it into a diary entry object what you can do is you can press space type in diary entry and then you're going to call the dot from map method what you can do is you can highlight this doc data over here with the colon copy remove and then we can swap the map into the dock data over here and now you can see the diary stream is now returning stream which is a list of a diary entry so that means we have created a stream for the list of diaries now the next to do which is just right below is to change this provider into a stream provider so what we can do is we can just type in the word stream and now for this create it requires a stream of a list of diary entry so that means we can use this diary stream variable that we've created over here copy and then we can swap the diary entries variable that we have created earlier and paste it over here and now if we were to save this let's see how it looks like inside our web browser so now you could see the diary entry that you have created the happy i am happy over here if you were to create another diary entry and let's create a diary entry that's called set set live and then we were to click on the submit you could see that the new diary entry has been reflected in our flutter web page excellent so let's remove these to-do's over here let's save this and now let's see under our problems what we are left with what we are left with so the next to do is to create a update method to edit diary entry to firestore when diary action edit with doc id basically we need a file store update method using the document id before we add the file store updates method i will explain to you if you were to scroll all the way up the diary entry page widget means so this refers to the previous widget if you click on this diary entry page it refers to the diary action and the diary entry over here so diary action is actually if you were to click on it it is actually a enum that has been created for us over here so it has edit add and read so let's scroll all the way up and then inside our diary entry page we also have a diary entry object so let's go back to our diary entry button we can close this so this widget has two things a diary action and a diary entry object so now you see this final is add action this is a conditional statement to see whether our direct action is an ad action so we can use this is add action to control whether we are updating or adding the diary entry so let's create a if statement over here and then we are just going to copy this is add action and paste it inside the conditional statement over here and now inside our if statement we are just going to move this add method inside it so this means that if this is an add action then we will use the firestore add method else we are going to update it so for this diary entry button is only being used inside the add and update user flow so now we're going to create the update method so what you can do is you can copy this line and then you can paste it over here now we are going to refer to the diary collection instead of adding we are going to refer to a document so you can press dot and then type in doc you can see that a doc is a method over here and then for this dock instead of adding we are going to update so now if you were to hover over the dock over here you could see that it is referring to a document reference and it has a optional string path over here so this refers to the unique id of a document so in order for us to update an existing document we need its id so how do we then get the id for this document if we were to go to main.dart file and then under this dock over here you could see that if i were to just you know remove the dock data function over here and then i would just put the word id you could see that every query document snapshot it has an id so how are we then going to put this doc id inside our diary entry from map method well we're going to change this from map into a from document so let's go to the diary entry model over here and then instead of a from map we're going to say from dock and then let's go back to main.dart file and then we hover over the dock over here and this refers to the type query document snapshot so highlight it and copy this and let's go back to the diary entry model over here and then we're going to highlight the mem string dynamic and then we're going to paste the query document snapshot this type will allow us to get the id from the document that we are passing it inside the argument so instead of the word map we can just replace it to the word doc then we are just going to highlight the different doc and then we are going to type in dot data with the function over here now this will work at the same time we want the document id so for a diary entry it should have a id field so let's scroll all the way up and then we are going to create a id field and the id field should be a string type so let's duplicate it by pressing alternate shift down arrow key so this just duplicate a line and then we're going to replace the word body to the word id and then let's go down to this dot body and do the duplication as well and then replace the word body to id and let's scroll all the way down under our factory constructor over here type in id and then this is going to refer to the dock id that we have over here so now we can reference this dock id using the id field of the diary entry so let's go back to the main.dart file now there is no from map method we are going to put a new method called from dock and then folder from dock it requires a query document snapshot instead of a map string dynamic so we can remove the data function over here and now you could see that it still returns a list of diary entry so now let's save in all files and then let's go back to the diary entry button dot dart file over here so now we are able to get the id of a diary entry so what we can do is so we can make use of the widget of the diary entry page so we can just copy this word widget and then we can create a variable called id so type in final id and then we're going to paste the word widget dot diary entry dot id and then we're going to just put in the word id inside the document method over here and then we're going to paste this as such now if we were to save this let's go back to our web browser to see if it works so instead of a set live we are going to edit it so click on this show menu over here and then click on this word edit and now instead of the angry sad face we're going to put in the angry face we are going to rename the title as angry and then we are going to do the same thing with our set over here so we're going to replace it as angry and now you could see the word update over here let's click on it and then it has successfully updated our said life into an angry live all right so now it works we can remove this to-do as well and now we are left with one more so let's look up to our last to-do so our last to-do is a create delete method with the doc id so let's go to the web browser and now if you were to open up this menu and the drop down menu over here if you were to click on these three dots this will open up a drop down menu and then you can see this deletes option click on it you could see that it opens a dialog to say that whether you are sure to delete this diary entry and then if you are sure that you want to delete it you'll probably click on this delete button and what we will expect once we click on this delete button is that the selected diary entry will be deleted and will be removed from this home page so let's go to our vs code so if you were to click on this to do then it will redirect you to this pop-up menu over here so there is a method that shows the delete dialog this is where we're going to create a firestore delete method with the document id so inside this popup menu dot dart file we actually have a diary entry object over here if you were to remember correctly we have an id property inside our diary entry over here as such so let's scroll all the way down and let's go back to our diary entry button over here and what we are going to do is we are going to copy the firebase instance update method over here but not the updates method but just a collection with the document id and then let's go back to the pop-up menu dot dart file and then let's create a new line just right under our to do and paste it over here now we can just import it over here so the id is undefined but it is right under the diary entry inside this widgets over here and then we are going to put the semicolon so this has a id of a specific diary entry and then we're going to use this method called delete and then what delete does is just it removes the current document from the collection so let's save this and let's go to our web browser to see if it works and now we are going to click on the menu of the angry diary entry and then we are going to click on delete let's see if it works if we click on delete congratulations the delete method works we have come to the end of this tutorial so what we have learned so far is that we were able to set up firebase and firestore in our flutter web project create a firestore method update method and also the delete method and lastly we know how to convert streams into dart objects and using stream provider so if you like this video give it a thumbs up and subscribe down below and comment down what other flutter or dart concepts you want me to go through stay safe and all the best bye bye

Channel: Learn App Code

Views: 11,960

Keywords: the happy haris, happy haris, thehappyharis, happyharis

Id: Ue_dIKOMcb4

Length: 33min 4sec (1984 seconds)

Published: Tue Sep 15 2020