How to handle Multiple API calls in Flutter / Dart like PRO !
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:
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 !
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:
