Network call with progress, error & retry in Flutter.
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.
class NetworkExampleScreen extends StatefulWidget {
@override
_NetworkExampleScreenState createState() =>
_NetworkExampleScreenState();}
class _NetworkExampleScreenState extends State<NetworkExampleScreen{
...............
@override
Widget build(BuildContext context) {
...............
}
}Setup for network call : In Flutter we use http for network call & json to decode json.
Inside your _NetworkExampleScreenState class
final String url = "https://jsonplaceholder.typicode.com/photos/1";
Future<Item> getItem() async {
final response = await http.get(url);
final responseJson = json.decode(response.body);
return Item.fromJson(responseJson);
}class Item {
final String title, image;
Item(this.title, this.image);
factory Item.fromJson(Map<String, dynamic> json) {
return Item(json['title'], json['thumbnailUrl']);
}
}
Then main part :
Inside build of state class
return Scaffold(
appBar: AppBar(title: Text("Network Example")),
body: Center(
child: new Container(
child: FutureBuilder<Item>(
future: getItem(),
builder: (BuildContext context, AsyncSnapshot<Item> snapshot) {
return snapshot.connectionState == ConnectionState.done
? snapshot.hasData
? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.network(snapshot.data.image),
SizedBox(height: 16.0),
Text(snapshot.data.title),
],
)
: InkWell(
child: Padding(
padding: const EdgeInsets.all(32.0),
child: Text("ERROR OCCURRED, Tap to retry !"),
),
onTap: () => setState(() {}))
: CircularProgressIndicator();
},
),
),
),
);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.
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.
