How to add CircularProgressIndicator in flutter? - flutter

Question

I have call three web services in one page now for that i want show only one CircularProgressIndicator.How to show CircularProgressIndicator first when i open screen after CircularProgressIndicator show all UI.

Answer 1

Use Future.wait to merge three futures (web service calls) then use FutureBuilder to show CircularProgressIndicator while waiting for the merged Future to complete.
Try it like this,
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
String _data1;
String _data2;
String _data3;
Future<void> _webCall;
#override
void initState() {
_webCall = _callWebServices();
super.initState();
}
Future<bool> _callWebServices() async {
await Future.wait([_webService1(), _webService2(), _webService3()]);
return true;
}
Future<void> _webService1() async {
await Future.delayed(const Duration(seconds: 1)); //TODO: do webservice call `get` or `post`
_data1 = "This is data1"; //TODO: save the data
}
Future<void> _webService2() async {
await Future.delayed(const Duration(seconds: 5)); //TODO: do webservice call `get` or `post`
_data2 = "This is data2"; //TODO: save the data
}
Future<void> _webService3() async {
await Future.delayed(const Duration(seconds: 3)); //TODO: do webservice call `get` or `post`
_data3 = "This is data3"; //TODO: save the data
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Demo"),
),
body: FutureBuilder(
future: _webCall,
builder: (context, snapshot) {
print(snapshot);
if (snapshot.connectionState == ConnectionState.waiting)
return _buildProgressIndicator();
else if (snapshot.hasError)
return _buildError();
else
return _buildBody();
},
),
);
}
Widget _buildProgressIndicator() {
return Center(
child: CircularProgressIndicator(),
);
}
Widget _buildBody() {
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(_data1),
Text(_data2),
Text(_data3),
],
),
);
}
Widget _buildError() {
return Center(
child: Text("Error while loading Web Services"),
);
}
}