Flutter – Firestore CRUD (Updating & Deleting data)

Hi Friends,

Hope you are all well. This is a sequel to my previous post here.

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

Other flutter courses – here. (Affiliate Link)

I would highly recommend you read my previous post, else you won’t get along with the flow.

Let’s begin.

A screencast of this post

Code for this post is available – here.

We saw how to Write and Read data into a firestore collection in our previous post right ? Now let’s see how to update and delete documents present in your firestore collection.

Wait., before that let’s go ahead and introduce streams which will help us to reflect the changes occurring in the database on the screen in real-time.

Streams:

Now the simplest way to bring in streams into your application is to use a Stream Builder. A stream builder allows you to utilize a stream or rather the data arriving in your stream to be used in a widget.

Open dashboard.dart and modify it as shown below.

That is too much code. I totally agree., but on a second look, you would see that I have just added a Stream builder to our existing _carList widget and I am simply using a List View to dissect the individual snapshots obtained from the getData() method.

Also, note the onTap() and onLongPress() methods. On Tap we are opening an updateDialog() that is almost exactly similar to our addDialog(). From the dialog we are calling a updateData() method present in our services/crud.dart. The onLongPress() function again calls a deleteData() method present in services/crud.dart. I am also passing the documentID of the tapped document in both these methods as arguments since we want to manipulate only one particular document which we can directly pick from our firestore collection.

Now open up crud.dart and add the below code.

In the updateData() function I have the selectedDoc (which is nothing but the document ID) using which I pick out the document from my collection and simply update it with the new values.

In the deleteData() I do the same except that I delete it.

Now run the app and watch the real-time magic happen.

Once you login you’ll see the below screens.

Screenshot_20180906-215839

And just tapping on a list item will…

Screenshot_20180906-215851

Cool right.. just try long pressing on a list item as well.. (It would delete it). Also try adding a new item.

The interesting thing is, if you notice all the changes happening in the firestore collection would get reflected on the screen in real time.

That’s it guys. Now you know how to add, update, delete and access data from firestore. In our forthcoming posts we’ll see how to write queries to query for data in an efficient way.

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!