How to handle Multiple API calls in Flutter / Dart like PRO !

flutter

Hi ALL !

Some of you may end up with the needs to make multiple API calls at once to get or send data to the back-end. It is possible to call them one by one and it works , BUT ! The issue is that we wish to trigger our loader from the beginning till the end that may end by writting POTATO code or we need to deliver PERFECTO work! Yep potato, let me drop an example over here of what I am saying:

potatoCodeAsyncMultipleCalls.dart
Output

Hint: this is not an actual API fetching but giving an ideal sample of how it works.

If you look at this code, you will see that we have doubled the work two times and also more variables been used to indicate the status of our API fetch. That leads to:

1- Lower performance.

2- More code to write means more time for unnecessary work.

3- Take more space.

4- Hard to control or build-up more features on top of it.

Before I drop my solution, let us understand that Dart is using Isolated threads for async methods, so you must have fundamental understanding, for more detail I would recommend to read Isolated part from my story https://alla-hajj.medium.com/why-did-i-choose-dart-in-my-thesis-share-thoughts-9f86cf59e008 or read the documentation from dart website. We need way that makes the calls at once and we get the output at once, so we can manipulate the data easily. If you have experience in Axios / Fetch package for node.js , then you will think of all() method that works as function that consume a list of async function(s) and then use then() method to return. This idea is also implemented in core package called ‘dart:async’, this method is called Future.wait(). Then definition is quite simple, it is collecting more than one Future methods and then collect value of values as return . That is the perfect place to practice as it is part of the core and does not require any external package / plugin to do this for you !

multiAPIcalls.dart
output

As long as you understand this concept , then it is 99.9% the same once you apply in an actual example. Now we understand that, so let us drop an example which is part of a project that I am recently working at.

# Multiple API Calls in Flutter:

Does not matter if you are using Dio or Http packages for your requests from Flutter to your back-end. However, my idea is to fetch 3 main things at once before displaying / fetching anything else: Configuration file aka JSON file, Categories, and currency. The reason of this call is to give:

1- Better design to our project as those essential parts of the app where it is better to be displayed at once.

2- Give time for the application to fetch data first and in the meanwhile I am controlling the indicator.

3- Better approach and modern way.

The back-end is from WooCommerce, so you can refer to their API documentation https://woocommerce.github.io/woocommerce-rest-api-docs/

Let us assume that our API class will contain a get function that calls Dio object and it will look like this:

The class name will be named as API. We already wrote our repository, so we called in our controller where we are doing state management for the local state, it will contain the business logic / most important properties for the UI.

It looks simple right ? the code length was almost 40 lines, i reduced to 13 lines ? WOW , awesome isn’t it ? As you can see I called my WooCommerce Service Class that already has defined methods. After calling the methods and finished waiting, we assign the data to the proper Stream object.

THE END

This is the end of my story and I believe that this may help you at your work ! So, please share with your fellow developers / friends and have a look at my FREE stories.

Have a look at my GitHub that contains alot of free projects !

If you feel that I deserve some help, then you can get me a coffee by here:

--

--

--

Security Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

100 Days of Code: A Deep Dive Into My Half Way Progress and Thoughts — Gemechu Taye

Transparency in Unity

RxSwift: Various Operators for Customizing Observables

Project Management — The Agile Way

Starpunk® DevLog – 3D Flight

Cleaning Up the Free Tier After AWS Playtime is Over

Want To Monetize Your API But Don’t Have Time? Then Try A Marketplace!

Complete guide to Modules and Crates in Rust

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ala Alhaj

Ala Alhaj

Security Engineer

More from Medium

Getting Started With “Flutter”~Beginner's Guide — part 1

Schedule notifications in Flutter using Awesome Notifications — [Part 2]

Building Android Widgets In Flutter: Remember these Simple Points

How to setup Flutter development environment for Android on Linux… I mean Windows