Efficient API Consumption with Dio in Flutter II

You can’t call yourself a flutter developer if you can’t integrate the back end to your mobile application. In other words, it is not just about creating cool UI. How do you make them more responsive? What happens after creating the text form fields to accept user details? How does a user update his profile? How do you utilize all the data the user has filled in while signing up? How do you delete the user profile?

This is exactly what is known as CRUD in API calls. It stands for Create, Read, Update, and Delete. CRUD operations are fundamental for APIS as they perform a standardized set of actions for manipulating data.

In simple terms, these operations perform the following requests

• GET: This basically helps you request data from the server. The request may include some query parameters to specify the type of data that you want to retrieve
• POST: This is basically used for sign-up pages. Here you are creating new data on the server. The data has never existed before.
• PATCH/PUT: This is another word for update. It updates existing data on the server.
• DELETE: As the name implies, it deletes your requested data from the server.

So back to our illustration on APIS

Imagine that when you ordered your bowl of chicken wings and a bottle of coke, you forgot to add a bottle of water and tablespoons of ketchup for your chicken wings. You would tell the waiter that you would want the new items added to your list. The waiter relays the message back to the inner kitchen and then boom your list is updated.

However, imagine as you placed your order, you checked your purse and found out that you have only a few notes and didn’t carry your bank card along. To prevent any harassment, you would tell the waiter that wahala ti wa. Dey Play!

This is exactly how your requests work on the server. Having learned this, let’s get to the technical part of this article.

FLUTTER AND DIO

A powerful HTTP client for Dart/Flutter, which supports global configuration, interceptors, FormData, request cancellation, file uploading/downloading, timeout, custom adapters, etc. Dio performs the following:

• Sending HTTP requests: Dio allows you to send GET, POST, PUT, PATCH, DELETE, and other types of requests to interact with APIs.
• Handling response data: Dio makes it easy to handle the response data returned by the API. It provides options to parse the response as JSON, XML, or other formats.
• Handling request headers and parameters: Dio allows you to set custom headers, query parameters, and request options to customize your API requests.
• Managing request timeouts: Dio provides options to set request timeouts, allowing you to handle scenarios where the API takes too long to respond.
• Handling authentication: Dio supports different authentication mechanisms, such as adding authorization headers or integrating with authentication plugins for token-based authentication.

Before going further, it is crucial to state that status codes are important in making network requests.

What are Status Codes?

Status codes are three-digit numbers that are returned in the HTTP response from a server to indicate the status of a request made by a client. They provide information about whether the request was successful, encountered an error, or requires further action. They are grouped into the following:

• Success (2xx): These status codes indicate that the request was successfully received, understood, and processed by the server. Examples include 200 (OK) for a successful request and 204 (No Content) for a successful request with no response body.
• Redirection (3xx): These status codes indicate that further action is needed to fulfill the request. They often indicate that the client needs to redirect to a different URL. Examples include 301 (Moved Permanently) and 302 (Found).
• Client Errors (4xx): These status codes indicate that the client has made an error in the request. It could be due to invalid parameters, authentication issues, or unauthorized access. Examples include 400 (Bad Request) and 404 (Not Found).
• Server Errors (5xx): These status codes indicate that the server encountered an error while processing the request. It could be due to server overload, internal server errors, or unavailability. Examples include 500 (Internal Server Error) and 503 (Service Unavailable).

Let’s go back to our illustration

If the inner kitchen gives the waiter a status code of 200, it means your order is complete. However, if the status code is 404, it means that there was an error in the order.

Let’s start building……

To use Dio, simply type in your terminal

flutter pub add dio

Let’s perform a simple request from this API.

https://fakestoreapi.com/

This is the base URL from a free e-commerce site

However, this is an example of an endpoint

/products

This endpoint fetches all the products in a database. It is a GET request too.

If you add them together and try searching it on Google, you should get JSON data like this

 {
        "id": 1,
        "title": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
        "price": 109.95,
        "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
        "category": "men's clothing",
        "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
        "rating": {
            "rate": 3.9,
            "count": 120
        }
    },

This is exactly how e-commerce apps like JUMIA, and Ali Baba are built.

Let me show the image we used in our first tutorial

You can see that in the grid view, there is an image, a price tag, a text, and most definitely a unique ID for each product. This is the response from the endpoint.

Let’s build….

I won’t want to make this tutorial unnecessarily long. I would be building a full e-commerce app that performs the CRUD functions in the next tutorial.

You can check out PART 3 here https://medium.com/@aderibigbejesutoni860/efficient-api-consumption-with-dio-in-flutter-iii-7301ffd62d6f

I hope you had a great time.