Show loader in flutter before showing a list of data from an API

Francis Kiryowa
3 min readApr 10, 2020

--

If you were a developer but you been doing some other work using different tools to accomplish tasks, with tools I mean the programming to solve problems you will find a lot of ease to solve out given challenges at hand any time which is not the same when you're trying out a new programming language and getting up to speed with putting away tasks on the table.

When I had just started out with flutter while designing a mobile app, everything moved on smoothly, until I reached a point where I could not accomplish some functionality to give a great user experience to the user using my mobile app. For example, adding a loader before actually displaying the data from the API I could be consuming. This was so challenging as it took me almost 3weeks without getting an actual concrete solution as everything I could try was not appropriate. But after a long trying out different solutions at hand this was my amazing solution using Circular Progress Indicator flutter widget. This looked a lifesaver by reading through about it on the flutter devs website but everything got complicated of how to combine up everything to work out with the widgets I had already used.

The result I wanted to achieve

But the following are the steps that can be taken by anyone wishing to implement the loader.

First of all, create a boolean variable in your class.

Variable to initiate the display of a circular dialog

The second step is to add a function that is of type Future to help you with defining out how long you wish to show the loader before showing the data from the API.

Function to set the length of dialog display as well as remove state

Thirdly this is how you can use it in your application widget tree.

Just look out for Future builder widget and the variable we initiated up and then the buildText method.

I hope this makes a lot of sense for all those developers who intend apparently and in the future to use this progress indicator in one way or the other.

In case you want to reach out to me in case something is not clear.
Facebook: Francis Felix Kiryowa

Twitter: @kiryowa_francis

Gmail: franciskiryowa68@gmail.com

--

--

No responses yet