Flutter – Firestore CRUD (Reading and writing data)

Hi Friends,

Hope you are all well. In this post let’s get into how to read and write data from a firestore collection.

To learn the basics of flutter get my course – Click here.

Other flutter courses – here. (Affiliate Link)

I presume most of you would already be familiar with firestore now. Firestore is nothing but a simple cloud storage system that stores (almost) all types of data in the forms of documents in simple scalable collections which can then be accessed, updated, deleted or modified in many ways.

Anyway, let’s continue with our app.

I presume by now you would already know how to configure firebase in your applications. If not then kindly watch this video once..

Let’s begin.

Code for this post is available – here. (Kindly leave a star to the repo)

I would highly recommend you to read the Flutter authentication article once which is available here.

Now create a couple of pages in your app as shown below.

one

Now open the main.dart and add the below code.

We are simply pushing the user to a dashboard page when he logs in. That’s it.

Open up loginpage.dart and add the below code in it.

We have already talked a lot about authentication in our previous posts. In this page we simply have code for authenticating a user.

But wait, Dude, is this all essential ? In your firebase console under database there’ll be a tab called Rules. Check it out.

two

As you could see here, we are allowing only authenticated users to read/write into our collections.

So we are putting an authentication system in place in our app. (If not, you could simply go ahead and remove this rule, which I wouldn’t recommend).

Alright, dude.. come on., get into the CRUD thing that you were talking about.

Writing data:

Open up dashboard.dart and add the below code.

Nothing fancy guys.. We are just using a couple of dialogs. In one of them we have 2 text fields which will be used to receive the user input and then we are going to be saving this data in our firestore collection.

Open up crud.dart and add the below code.

We are simply checking whether the user is logged in and then we are simply adding the data into the testcrud collection.

Now if you run the app you’ll see the below screens.

Screenshot_20180906-173207

Add a car using the button on the top right

Screenshot_20180906-180739

Cool right? So this is how you add data into your Firestore collection from your flutter apps.

Check your firestore collections as well.

three

Reading data:

Now that we have added some cars into our collection, let’s just see how to retrieve this data and throw it up on the screen as well.

Open crud.dart and modify it as shown below.

This getData function will now return a querysnapshot which is nothing but a set of documents.

We’ll now use this in our dashboard.dart

Open it up and modify it as shown below.

Whoa, that’s a lot of code. Nope., it isn’t; I have simply overriden the initState() function to make a call to the getData() function and then I am using the data obtained here in a List builder to show the data in a list.

Run the app and  you’ll see the below screen.

Screenshot_20180906-173232

Nice right?

There we have seen how to read/write data into firestore from your flutter app.

We’ll see how to update this data, delete data and how to use a stream to reflect changes happening in the database in realtime in our next post.

Hope this post helped you guys. If you found this helpful, kindly share it with someone and help them too.

Donate to keep this site alive – here.

(If you want to donate but can’t, it’s fine just subscribe to my youtube channel).

Join our flutter community – here.

Thanks for reading. Peace..

Liked it? Take a second to support admin on Patreon!