DEV Community

Cover image for How to Delete and Fetch Data from the Internet using Flutter
Nasir Ahmed
Nasir Ahmed

Posted on

How to Delete and Fetch Data from the Internet using Flutter

Flutter is spreading among developers at a very fast pace. Flutter is a toolkit for UI developed by Google. Flutter can be used to develop any kind of applications such as mobile, web and desktop from one codebase. Flutter’s SDK consists of various libraries such as Framework Libraries, Dart Libraries, Supporting Libraries, Packages on pub.dev. This article covers how to delete data over the internet using the http package.

Step 1: Add the ‘http’ package

First of all, you will have to install the ‘http’ package. To achieve the task, uo will have to add it to the dependencies section of the pubspec.yaml file. You will be able to find the latest version of the ‘http’ package on pub.dev.

install http package

Import the http package:

Import http Package

Step 2: Delete data on the server

As I said, this article will enable you to delete data by showing how to delete an album from the JSONPlaceholder using the http.delete() method. You will have to take a note here that this requires the id of the album that you want to delete. For this example, you may use something you already know, for example id = 1.

Future response

The function http.delete() produces a Future containing a Response.

Future is a fundamental Dart class that allows you to interact with async operations. A Future object indicates a possible value or error that will be accessible in the future.
The data obtained from a successful http call is stored in the http.Response class.
The deleteAlbum() function requires an id parameter to identify the data to be erased from the server.

Step 3: Update the screen

Once the above step is done then you will have to go to the next step in order to check whether the data has been deleted or not. For that, first you will have to fetch the data from the JSONPlaceholder using the http.get() method, and display it on the screen. Then you will have a Delete Data button. Upon pressing that delete button the deleteAlbum() method will be called.

delete album method

When you click the Delete Data button, the deleteAlbum() function is invoked, and the id you supply is the id of the data you downloaded from the internet. This implies you'll be deleting the identical stuff you downloaded from the internet.

The deleteAlbum() function returns a response. After making the delete request, you may return a response from the deleteAlbum() function to alert our screen that the data has been erased.

Future Builder

FutureBuilder() now rebuilds when it receives a response. Since the response won’t have any data in its body if the request was successful, the Album.fromJson() method creates an instance of the Album object with a default value (null in our case). This behavior can be modified in any way you see fit.

That's it!
You now have a function that deletes data from the internet.

To enquire more such amazing tutorials with exciting knowlegeable blogs on different technologies as well freelancing and remote working, you may visit Optymize.

Top comments (0)