Beginning FlutterFire

Aug 30 2022 · Dart 2.16, Flutter 3.0, Visual Studio Code 1.69

Part 3: Read & Write Data with the Cloud Firestore

15. Delete Data from the ListView

Episode complete

Play next episode

Next
About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 14. Add & Update Data into the Firestore Database Next episode: 16. Set Cloud Firestore Rules

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Transcript: 15. Delete Data from the ListView

Now users can view, add and update activities: the last action we need to implement to complete our CRUD interaction with Firestore is deleting Activities.

So, in the firebase_helper.dart file, add the method to delete documents from the collection: as usual it will be asynchronous, so it returns a Future, we can call it deleteActivity. The ID is enough to delete a document from the Firestore database, so this will take a String containing the id of the activity we want to delete:

Inside the method, type await the activities.doc, passing the activityId string, and call the delete method: what happens here is that from the activities collection, we retrieve a reference to the document at the id we specify, and then we delete the document through the delete method.

Now let’s enclose this into a try catch block, and in the catch let’s just print the exception, transformed into a string.

Future deleteActivity(String activityId) async { 
    try { 
      await activities.doc(activityId).delete(); 
    } on Exception catch (e) { 
      print(e.toString()); 
    } 
  } 

Ok, now we need to call this method from the activities screen. So, get back to activities_screen.dart and in the builder of the listview in the build method of the State class, enclose the ListTile into a Dismissible widget. This widget allows swiping away an item in a Listview.

You can leverage the code actions for that: so, select the listTile, then click on the bulb and choose the “wrap with widget” action. Here we’ll return a Dismissible.

A Dismissible requires setting onDismissed, which happen when the user swipes an item left or right, and a key to identify the item that must be dismissed.

So, in the ondismissed, that takes the direction of the swiping gesture, let’s just call helper.deleteActivity, passing the id of the activity that should be deleted.

As a key, create a new key that in its constructor takes the id of the activity, transformed into a string.

return Dismissible( 
  onDismissed: (_) { 
    helper.deleteActivity(activity.id); 
  }, 
  key: Key(activity.id.toString()), 
  child: ListTile( 
 ...

Right, let’s run the app.

Now when you swipe an item in the ListView, the item disappears from the list. You might want to add a confirmation message for users in a real world app, but for our activities this is enough.
There’s one last feature of a Firestore database you should be aware of: let’s talk about Cloud Firestore rules next.