Flutter show Loading Indicator while building Complex Widget - flutter

Question

I'm beginner at Flutter.
Currently in my app, I'm developing a "report screen" which includes complex widget like Timeseries chart.
What I'm noticed is that when I go to that "report screen", it takes about 3 seconds to appear this screen on the app. When I experiment by removing Timeseries chart widget from the screen, the app is responsive as best and instantly show the screen.
Therefore I would like to move this Timeseries Chart Widget building process to asynchronous and show the loading indicator while building the widget. By this way, I think the screen can appears instantly because no heavy widget building process at the start.
I've already tried the following way but no success.
// Chart Widget Building Method
Future<Widget> _buildChart(BuildContext context) async {
return Card(
elevation: 3.0,
margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 4.0),
child: Container(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 8.0),
child: Row(
children: <Widget>[
_buildPeriodicButton(context, '1D'),
_buildPeriodicButton(context, '1W'),
_buildPeriodicButton(context, '1M'),
_buildPeriodicButton(context, '3M'),
],
),
),
Padding(
padding:
const EdgeInsets.symmetric(vertical: 16.0, horizontal: 12.0),
child: ReportChart(data: _chartData),
),
],
),
),
);
}
// Screen build Method
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: _buildAppBar(context),
backgroundColor: CustomColors.GreyBackground,
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
_buildFilters(context),
FutureBuilder(
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.none &&
snapshot.hasData == null) {
return Container(
child: Center(
child: Text("Loading"),
),
);
} else {
return snapshot.data;
}
},
future: _buildChart(context),
),
],
),
),
),
);
}
Thanks in advance for suggestions and solutions.

Answer 1

FutureBuilder(
builder: (context, snapshot) {
if (snapshot.hasData) {
return snapshot.data;
}
return Container(
child: Center(
child: Text("Loading"),
),
);
},
future: _buildChart(context),
),

Answer 2

I have used the fluttertoast: ^8.0.8 package as shown below. You can set the toast length to a longer duration if needed. FutureBuilder is not useful in the case, where your widget themselves take a long time render. FutureBuilder is useful while fetching the data required for your widgets.
#override
Widget build(BuildContext context) {
Fluttertoast.showToast(
msg: 'Loading...'
);
//Code for your complex widget here
}