Flutter Firebase CRUD (Create, Read, Update, Delete)

how to use all four crude operations for the firebase cloud database firebase setup to set up firebase for your flutter project go to consolefirebasegoggle.com and then click on add project give it any project name that you like and click on continue next scroll a bit down disable google analytics and click on create project after some loading time click on continue now we need to link this firebase project to our flutter project therefore click on this android symbol first we need to get the android package name therefore go to your android app build gradle file scroll a bit down until you see this application id that you need to copy back in your browser paste it inside and click on register app next download the google services json file this file holds all the information to link your firebase project to your flutter project therefore you need to drag this file inside of your android app folder in your browser scroll again down and click on next finally we need to add some configurations to the build gradle file therefore copy this google services class path then go to the build gradle file inside the android folder inside this file you go to build script dependencies and after this last dependencies you add this classpath inside back in your browser scroll a bit down and copy the line apply google services now you need to go to the android app folder and here you have another build gradle file scroll all the way down until you come to the end of the file and paste this line apply google services inside also go a bit up until you come to this default config and here you set the min sdk version to 21. in your browser you can scroll all the way down click on next and click on continue to the console to complete this setup step and lastly to use firebase you go to your pubspec yaml file in your flutter project in my case i add the firebase database cloud firestore to my pubspec yammer file save the spell and get the dependencies and finally to set up firebase for your flutter project go to the main message and here you change these three lines make sure to import the firebase core library to initialize your firebase app also make sure to stop your flutter app and run it again if firebase was configured correctly it will load your flutter app otherwise in case your flutter app crashes then you have missed some of the configuration steps shown in this video create data let's write data from a flutter app to the firestore cloud database to get started we go to consolefirebasegoggle.com where you need to create a firebase project and i have shown you in the last video exactly all the steps how to create this project and now we go to firestore database then you click on create database make sure to select start in test mode and click on next next you can choose the server location of your firebase server i will simply go with the default settings and click on enable after some loading time you can create a new collection i call it users and click on next and inside this collection you can create documents and i create a document with a field name and the value i give it for example emma as a name and click on save as a result we have a new document with a document id and inside this document we store one key value pair in this case we store the value emma the next document we want to create through our flutter app therefore in your pop stack yml file under your dependencies at the cloud fire store package next within the flutter app we create an app bar with a text field and an icon button and now if we type anything inside of our text field then we want to send it to firebase if we click on this button therefore let's add a text editing controller to our text field so that we can access the value of our text field in this case the name emma and lastly we create a new method create user where we put the name inside and inside this method we want to write our username to the firebase collection users and therefore we create a new document with some custom id and now we can use this document reference to write our data inside therefore i create a new map and inside of this map we can add key value pairs so in this case i put the name inside that we have typed in our text field and you can also add some more data inside next we can use the doc user reference to create this document and also put this json data inside let's try it out and write a name to our text field and click on this button and with this it creates a new document with the document id my id and inside this document we put all the user data inside so basically one document represents one single user and we can put multiple documents inside of one collection in case you work with model objects in your flutter project then we can also replace this json map by a user object and here i also put an id inside so this is the document id right now it is my id however you can also remove this my id then he will generate an id automatically for you and we can access the generated id from our document next to convert this user object to some json data therefore we need to create this 2js method inside of our model object and inside of it we create then a map with all the keys and also value pairs for each of our fields that we have inside of our model object let's also try it out and let's write the model object to firebase and you see he has created a new document with our user and here is our name inside the birthday age and also we have put the id inside which is the document id from our document optionally you can create a user page and within the scaffold body property you can create then multiple text fields and below the text fields you can create an elevated button next we add some text editing controllers in our state and each of these text editing controller we want to attach them to all of our text fields and lastly if we click on this button then we want to write our user data to the firebase database therefore let's go to the elevated button and if we press on it then we create first of all a new user object and we access over all of our controllers and the values of our text fields and then we only need to write this user data to our firebase server therefore we use the create user method put our user object inside and finally we put then this user object to some json data and put it inside of our document user inside of our user's collection and with this we have a great form ui and we can send this data easily to our firebase server and this will be then stored inside of our firebase database read data how to read data from the cloud firestore database in the last video we have written some data in this case some user data to firebase and this was then stored inside of some documents that we want to read right now therefore we have created a collection users that we can read or we can also read individual documents so in this case my id is the document id that we also want to read individually let's get started by creating a new method read users and inside of it we want to reference the firebase collection users that we have created in the last video on this firebase collection you call the method snapshots to get all the documents from this firebase collection and it returns a query snapshot of map string dynamic so we get some json data back and we want to convert this json data to some user objects therefore we go over all of the snapshot documents and for each of the documents we want to convert it back to our user object so first of all you can access the data of this document which is then this map string dynamic and we want to convert this to our user object and therefore we call on our user object the from json method and i haven't created this yet so you also need to go to your user object and create a new method from json this returns a user object and we create them based on this json that we got from firebase a new user object and lastly we only need to use this read users method and this basically returns a stream of list user objects that we want to show in our ui therefore let's go up to our scaffold and within the body property we want to create a stream builder and inside of it we call the read users method that we have created before and which returns a stream of list users and we need to make sure that we put the list users here inside so basically the data that we have inside of our stream and now over the snapshot we can access this data first of all we check that we have some data and then we can access all the users and lastly we only need to build our users therefore i create a list view and i map over all of the users and each of the users we want to create with the build user method and inside of this method we get then one specific user and we display it inside of a list style so we display first of all the name of the user the birthday and also here we display the user age from the user to make everything work we also need to add next to the successful case of loading some data also an error case and also the loading case so in the else case we display some circular progress indicator in case our data is loading from firebase with this we can try it out by hot restarting the application and you see we display four users in our app these are basically the four documents that we have inside of the firebase collection users that we have loaded with the current implementation we get our users back as a stream and with this it is possible to change the data inside of firebase and all the changes are directly updated in our ui otherwise if you don't want the real time changes for your data then you need to change the stream builder to a future builder and instead of read users which returns a stream we get the first snapshot as a result this time if i change the data inside of firebase and click on update then this data will not be changed inside of our ui automatically you have to do it manually instead next to loading all the documents from a firebase collection we can also load one individual document in this case the document with myid therefore to load a single document from firebase we create a new method reducer and we put it inside of a future builder and this method that we want to create returns a single user next we create the read user method and inside of it we reference the user's collection and inside this user collection we reference a document that we want to load and finally we use the doc user to get a single document or snapshot back so if you call the get method then he will get one snapshot and the snapshot we check first of all if it exists inside a firebase so if the document exists then we can get the data of the snapshot so we get the json data and we convert it back to a user object and lastly inside the future builder we want to build the user that we have loaded from firebase therefore we first of all get the user back from firebase and then we use the build user method to build our user however in our case the user can be nullable because the document cannot exist in firebase and therefore we also want to make sure that if the user doesn't exist then we display an error message or a message on the screen no user and like before next to the successful case we can also add the loading indicator in case we load the data from firebase and also an error case in case something goes wrong with this if we hot reload we display a single user inside the ui and this is the user that we have loaded over the document id my id so this is the user email and this is what we have basically defined before inside of the read user method here we have reference this my id document update data delete data how to update or delete documents inside the cloud firestore database we have a collection users and a document with the document id my id and lastly we have some data that we want to update in this case we want to update the field name and we want to update the value james to another value therefore let's reference first of all the users collection and this document that we want to update and now we can call on this document the update method and inside of it you need to put a json map inside and then you put the key value pairs inside that you want to update with this if we click on this update button then the name james is updated to the name emma that we have specified inside of our update method if you have nested values in your document then you can update these values by using the dot notation first of all we use the city key and then the name key that we have here in front to update the value london let's also try it out i click on the update button and you see the value sydney was updated in case you want to remove a field in your document then you can use the field value delete as your value and with this if i click on the update button then you see that this field was deleted and i also can delete for example the city let's click again on the update button and you see that this field was deleted so all in all with the update method we update specific fields of a document whereas if we use the set method and now we click on this update button then you see that he will simply replace the document with the new data that we have provided inside of the set method and lastly we want to delete a document therefore i have created a new button and we reference again from the user collection one document and then you can call on this document the delete method let's also try it out i click on the delete button and you see that this document was deleted [Music]

Channel: HeyFlutter․com

Views: 195,690

Keywords: cloud firestore, firebase, firebase tutorial, firestore, firestore crud, firestore flutter, flutter, flutter crud example, flutter firebase, flutter firebase crud, flutter firebase crud example, flutter firebase crud github, flutter firebase crud tutorial, flutter firebase update document, flutter firestore add data, flutter firestore read data, flutter firestore update document, flutter firestore update field, flutter tutorial

Id: ErP_xomHKTw

Length: 15min 22sec (922 seconds)

Published: Thu Apr 14 2022