Efficient API Consumption with Dio in Flutter I

What are the many misconceptions about front-end engineers?

Or

As a front-end engineer, is your work only to create cool UI?

Or

Is my knowledge about what happens on the server-side crucial to my role as a front-end engineer?

This and many more do I seek to answer in our quest on how to efficiently consume APIs in our Flutter Application.

Let’s begin…..

Who is a front-end engineer?

The phrase “front-end”, basically means what happens visibly, what the users can see and interact with. In other words, a front-end engineer is a software engineer who specializes in designing and implementing the user interface(UI) and the user experience(UX) of a web application or mobile application.

For example,

In this image, you can see different icons, a floating action button, a bottom navigation bar, and even an app bar named “Home” with different list tiles. This is what the user sees whenever he opens the popular “Twitter” application. This is what is known as the front end. For the purpose of this article, I will stick to Flutter as a front-end technology.

Misconceptions about front-end engineers

Recently, I saw a tweet on who works the most; “A front-end engineer” or “a back-end engineer”. I didn’t bring an answer. (FYI, I know both). There are different misconceptions about what a front-end engineer does:

• “Front-end engineers are just designers”: While front-end engineers work closely with designers to bring their vision to life, their role extends beyond design implementation. They are responsible for writing code, implementing functionality, and ensuring a seamless user experience through interactive elements, performance optimizations, and responsiveness.
• “Front-end engineering is easy”: Some people may underestimate the complexity and skill required for front-end development. I laugh in Spanish. Have you seen some crazy UI/UX designers who just want to complicate your life?
• Front-end engineers only focus on the visual aspects: While front-end engineers do work on the visual elements of a website or mobile application, their role goes beyond aesthetics. They also handle data manipulation, interaction with APIs, implementing complex business logic, and integrating with back-end systems. They are responsible for ensuring data flows smoothly and securely between the front-end and back-end components.
• “Front-end engineers only work on the client-side”: While front-end engineers primarily focus on client-side development, they also have knowledge of server-side concepts. They may be involved in server-side rendering, handling API requests and responses, and working with server technologies like Node.js. This allows them to create efficient and optimized client-server interactions

In other words, if you are on your path to being a front-end engineer, the burden has come upon your soul to understand the basics of handling network requests in your mobile applications. This brings me to APIS

What are APIS?

Let me give a beautiful illustration.

Imagine you get into a popular restaurant like Chicken Republic. You would see a waiter attend to you and ask you what you want. Let’s say you ordered a bowl of chicken wings and a bottle of Coke. The waiter relays that message to those in the inner kitchen and you would be told to wait for some number of minutes. After those number of minutes, the waiter comes back with your order in a neatly packed way and you go home happily ever after without even thinking about how the meal was made in the first place.

Notice that if there was an error with the order, the waiter comes back to relay that error to you.

This best fits what APIS are and how they interact with your application.

API means Application Programme Interface and it is what helps the front end interact with the server.

In the illustration I gave, the waiter acts like the API(middleman) that interacts between the client and the inner kitchen(server). The meal well packed is the front-end result from the server dispensed by the API(waiter). The minutes you have to wait is the response time from the server. The error you get from the waiter is the error message you get from the server.

Let me give you a picture so we can analyze it

The image was gotten from here https://www.behance.net/gallery/87104663/E-commerce-App

This is a simple e-commerce app, that has a grid view with a search action and a drawer widget on the app bar that displays all products.

There are two ways you can have the products displayed.

• You can manually create a class and then put the image and texts in it

or

• You can fetch it from an API. So you could just tell the server that you need all the products in the database and have it displayed.

You can have this done using what is called an endpoint. In this case, let’s call the endpoint “https://freeme.com/api/v1/get-products”. This exactly is your API and you would get the response from the server.

I hope this is clear!

FLUTTER AND APIS

Thus, as a flutter engineer, you would need to have knowledge of APIS to make network requests in your functional mobile applications.

Thankfully, a package called DIO has been made to help you properly consume your endpoints in your application. All you need to know is the CRUD function.

What’s CRUD? Watch out for part 2 of this article

I hope you had an amazing time. Please leave your comments.