Flutter Networking Tutorial: Getting Started

Making a DELETE Request

Now, you’ll add a feature to delete a particular book detail from the favorite list.

Open RemoteDataSource and replace the eighth TODO with the following code snippet:

//1  
Future<Result> deleteBook(int index) async {
  try {
    //2
    final response = await client.request(
        requestType: RequestType.DELETE, path: "deleteBook/$index");
    if (response.statusCode == 200) {
      return Result<NetworkResponse>.success(
          NetworkResponse.fromRawJson(response.body));
    } else {
      return Result<NetworkResponse>.error(
          NetworkResponse.fromRawJson(response.body));
    }
  } catch (error) {
    return Result.error("Something went wrong!");
  }
}  

Here’s what this code does:

1. deleteBook() takes the position of the book object in the list that the user wants to delete. The return type of this method is Future<Result>.
2. client.request(...) performs the DELETE request.

Next, add the swipe to delete feature in the Favorite Book screen.

Open favorite_book_screen.dart and replace the previous bookListItem code with the following:

//1
Dismissible bookListItem(
      int index, Library bookCollection, BuildContext context) {
    return Dismissible(
      //2
      onDismissed: (direction) async {
        Result result = await _apiResponse.deleteBook(index);
        if (result is SuccessState) {
          //3
          setState(() {
            bookCollection.books.removeAt(index);
          });
        }
      },
      background: Container(
        color: Colors.red,
      ),
      key: Key(bookCollection.books[index].name),
      child: ListTile(
        leading: Image.asset("images/book.png"),
        title: Text(bookCollection.books[index].name),
        subtitle: Text(
          bookCollection.books[index].description,
          maxLines: 3,
          overflow: TextOverflow.ellipsis,
          style: Theme.of(context).textTheme.caption,
        ),
        isThreeLine: true,
        trailing: Text(
          bookCollection.books[index].author,
          style: Theme.of(context).textTheme.caption,
        ),
      ),
    );
  }

Breaking down the new code:

1. You’ve wrapped the ListTitle with a Dismissible widget.
2. In onDismissed(), you pass the index of the book item you want to delete from the backend to deleteBook().
3. If the DELETE request is successful, calling setState() removes the item from the list of books.

Build and run the app and try swiping on one of the book items in the list. If the DELETE request is successful, you’ll see the item removed from the list.

Where to Go From Here?

Check out the final completed project by clicking the Download Materials button at the top or bottom of the tutorial.

To learn more about Flutter networking, take a look at the official documentation:

• Networking
• Fetch data from the internet

You can also explore more about the following topics:

• Aqueduct Framework
• JSON and serialization

We hope you enjoyed this tutorial on how to make network requests in the Flutter app! Feel free to share your feedback, findings or ask any questions in the comments below or in the forums.