One of the touch gestures that has won a wide adoption over time in mobile apps is the "swipe-to-delete" gesture, in which you simply drag a finger across an item, and swipe it left—or in some cases, also right.

This was introduced by Apple in the Mail app, and today it's widely spread in both iOS and Android systems.

What we want to achieve here is to delete an item in the ListView by swiping left or right. The first step is creating a method in our DbHelper class that will actually delete a record from the database, as follows:

1. We'll call this method deleteList(). As usual, it will be asynchronous and will return a Future of type int, and take the ShoppingList object that needs to be deleted.
2. Inside the method, we need to perform two actions: first, we will delete all the items that belong to the ShopppingList, and then, we'll delete the ShoppingList itself.
3. So, inside the function, we'll call the delete method of the database object, passing the name of the table (items), and a where named parameter: this will take the name of the field we want to use as a filter. In this case, we want to delete all the items that have an idList that equals the id of the ShoppingList that was passed, so we'll specify idList = ?, where the question mark will be set by the whereArgs named parameter.
4. whereArgs will take an array with a single element, which is the id of the list.
5. The delete() method returns the id of the deleted record, and that's what we'll return, as shown in the following code snippet:

Future<int> deleteList(ShoppingList list) async {
  int result = await db.delete("items", where: "idList = ?", 
    whereArgs: [list.id]);
    result = await db.delete("lists", where: "id = ?", whereArgs: 
    [list.id]);
    return result;
  }

Now that the deleteList() method is complete, we can call it when the user swipes an item on the main screen.

There's a very useful widget in Flutter that's perfect when you want to use this pattern to delete an item: it's called Dismissible.

By providing the Dismissible widget, Flutter makes the task of deleting an item by swiping very easy. Dragging a Dismissible widget in the implemented DismissDirection makes an item slide out of view, with a nice animation.

Let's see how to use a Dismissible widget in our code to delete a ShoppingList from the main screen, as follows:

1.  In the itemBuilder parameter of the ListView.builder in the body of the Scaffold, let's return a Dismissable widget.
2. The Dismissible widget takes a key. This allows Flutter to uniquely identify widgets, and it's a required parameter.
3. Then, set the onDismissed parameter. This gets called when you swipe in the specified direction. In this case, we don't care about the direction: we'll delete the item for both left and right swipes.
4. Inside the function, in the onDismissed parameter, we can get the name of the current item, which we'll use to give some feedback to the user.
5. Then, we'll call the helper.deleteList method, passing the current item in the ListView.
6.  Next, we'll call the setState method, removing the current item from the list.
7.  Finally, we'll call the showSnackBar method of the current Scaffold, telling the user that the ShoppingList was removed.

The code for the Dismissible widget is shown in the following code block. Add it to the itemBuilder in the ListView:

itemBuilder:(BuildContext context, int index) {
          return Dismissible(
            key: Key(shoppingList[index].name),
            onDismissed: (direction) {
              String strName =  shoppingList[index].name;
              helper.deleteList(shoppingList[index]);
              setState(() {
                shoppingList.removeAt(index);
              });
              Scaffold
                .of(context)
                .showSnackBar(SnackBar(content: Text("$strName deleted")));
            },
            child:ListTile(
[...]

The delete function is now complete. If you try the app and swipe left or right any item on the main screen, you should see the element of the list disappearing and the SnackBar at the bottom of the screen, as shown in the following screenshot:

There's only one last step in order to complete the app: completing the CRUD functionality for the items as well, and for this, it's time for a challenge.