Firebase CRUD Application with Flutter

NOTE: This article is over 2 years old, you can read this as a reference only, the code snippets might be outdated

Flutter + Firebase ❤

Hi, I hope you are at home, safe. To kill your boredom let’s learn basic Firebase functionality i.e. CRUD (Create, Read, Update, Delete) with flutter. The final app should look like this:

End Result

If you do not know how to make a project in Firebase or connect your application to a Firebase back-end, follow this Article.

To get started with Cloud Firestore follow these simple steps, Click on the Develop on the Left Panel then click Database then Create Database from the page that is displayed

Create Cloud Firestore Database

Select Test Mode or Production Mode(if you are comfortable with the Rules). I would suggest starting in Test Mode, for now, you can always twerk with rules later. Then select a region that suits your project scope. Click Done creating a database will take some time, so wait for it to complete. And we are ready to proceed.

Now that we have created a project in Firebase and have connected it to our flutter App, let’s dive into coding, but before don’t forget to get your boilerplate code of the above Application from here → GitHub. And I’m assuming that you are pretty comfortable with Flutter at this point as well.

We have buttons set up and ready for actual functionalities, in the Boiler-plate. All we have to do is simply set the functions to their relative tasks. First, we need to import relative packages from pub.dev, we will need the following packages for Firebase Functionalities(in-depth analytics not included)

→ firebase: ^latest_version
 →firebase_core: ^latest_version
 →cloud_firestore: ^latest_version

We are all set and ready to roll. We need to understand that every time we want to fetch data from the internet, it takes time and all the operations that take time need to be awaited so we need to make the relative functions as async just like that all the operations that are related to either fetching data from cloud Firestore or Realtime database of Firebase or any other https requests we need to await them by simply adding the keyword await before the statements.

Add Operation

We need to check if there is already a name in our Cloud Firestore Database or not, if a name exists we don’t need to take another Name from the user, if there is nothing then we want to allow the user to enter/add a name to the Database, by the following statement.

Statement for adding data for Document that we know the name of

What’s happening here?
We are awaiting the statement because we need to post data on a database. We are instantiating a Firestore Instance, then we want to create a Collection if it doesn’t exist already, by the name of ‘usersName’, then we want to add our data to a specific document, that is ‘dummydata’ in our case. If we want the firebase to assign document ID we would use the following code.

await Firestore.instance
  .collection('usersName')
  .document()
  .add({'name':'$userName'})
  .timeout(Duration(seconds: 10)
);

And that statement added a username to our Firestore Database.

Read Data

Now that we have added data, now it’s time to retrieve it.

Just as you guessed, we need to await this statement as well because we are receiving data from the internet, and who knows how much time will it take. we are storing document that we received in a DocumentSnapshot type of the variable by the name of _doc now we want to see if there is a name in the database present or not, if there is no name we need to display a different message to the user, and if there is a name we want to display something else.

For every DocumentSnapshot type variable, we have a way to find whether the document that we received, is there any data present or not? and that is variableName.exists . Following is the gist of the retrieval statement.

Statement of Retrieving data of a userName, if exists

Update Data

Just as we added the data we can also update it, it’s literally same as adding data with just different function instead of add or setData we use the function updateData and update data takes a JSON style data just like Add data does, and now we can provide which data we need to update.

Statement of Updating data of a userName

Delete Data

The final operation of the CRUD is to delete the data from a database, and it’s not rocket science either just like the other three operations. To delete a document we need to specify the complete path of that document and then use the magic function that is very hard to guess, delete

Statement for Deleting an entire document

Happy Coding, stay home stay safe

you can get the entire code here at GitHub