Network call with progress, error & retry in Flutter.

Dhiraj Sharma
Jun 17, 2018 · 3 min read

Flutter is Google’s mobile app SDK for crafting high-quality native interfaces on iOS and Android in record time.


Recently as i was exploring resources to get started with Flutter, I found this awesome resource :

While scrolling through list, I thought “Learning flutter by creating an app that lists useful resources would be very helpful ”.

When I started project Awesome Flutter, Soon I came across a problem which is easy to handle in Android(for an Android Developer).

Different stages of Network Call : Progress, Error, Retry ….

I solved this problem using StatefulWidget & FutureBuilder.
Here i will show how i solved this project with an example app. In this example app i will fetch data from this dummy API.

First lets create StatefulWidget & its state.

Setup for network call : In Flutter we use http for network call & json to decode json.
Inside your _NetworkExampleScreenState class

Then main part :
Inside build of state class

How this works ?
Here in body of widget we are using FutureBuilder, which accepts future object & builds widget in future.
Inside builder of FutureBuilder we are checking connection state & data then according to that widget is set.

If connection state is done (request is complete)
{if data is available show data else show error}
else show progress bar

When error occurs, there is a Inkwell which listens for tap and reloads state on tap, which initiates network call again.

Full Code Here.

I have published app that I made which lists awesome resources to learn flutter.

Also I have developed another app with flutter that provides
World Cup 2018 : Live Score, Fixtures, Points table, Teams, Players. FIFA Ranking & top news !

This is my first article on medium & I am planning to write more on medium, So your feedback would be very helpful on future articles.


The Flutter Pub is a medium publication to bring you the latest and amazing resources such as articles, videos, codes, podcasts etc. about this great technology to teach you how to build beautiful apps with it. You can find us on Facebook, Twitter, and Medium or learn more about us here. We’d love to connect! And if you are a writer interested in writing for us, then you can do so through these guidelines.

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Dhiraj Sharma

Written by

Developer Android, Flutter

FlutterPub

The Pub(lication) for all about the Flutter and its magic

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade