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.

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

class NetworkExampleScreen extends StatefulWidget {
@override
_NetworkExampleScreenState createState() =>
_NetworkExampleScreenState();}

class _NetworkExampleScreenState extends State<NetworkExampleScreen{
...............
@override
Widget build(BuildContext context) {
...............
}
}
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']);
}
}
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();
},
),
),
),
);

Developer Android, Flutter

Sign up for CodeChai Publication 

By CodeChai

The CodeChai email digest is a summary of the most popular and interesting code content from CodeChai publication. We curate the best, so you can stay continually informed and inspired. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

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