Flutter Networking Tutorial: Getting Started

In this tutorial, you’ll learn how to make asynchronous network requests and handle the responses in a Flutter app connected to a REST API. By Sagar Suri.

Leave a rating/review
Download materials
Save for later
Share
You are currently viewing page 4 of 4 of this article. Click here to view the first page.

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:

You can also explore more about the following topics:

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.

Sagar Suri

Contributors

Sagar Suri

Author

Bruno

Tech Editor

Sandra Grauschopf

Editor

Julia Zinchenko

Illustrator

Joe Howard

Final Pass Editor

Brian Kayfitz

Team Lead

Over 300 content creators. Join our team.