如何在 Flutter 应用程序启动之前显示循环进度指示器?

Question

在我的演示应用程序中，我需要从服务器加载一个 2 JSON 文件。这两个 JSON 中都有大量数据。我我的 Flutter 应用程序我使用 Future + async + await 调用 json，而不是我调用以使用 runApp 创建小部件。在正文中，我尝试激活循环进度指示器。它显示appBar及其内容以及空的白页正文，并在4或5秒后将数据加载到实际正文中。

我的问题是我需要先显示循环进度指示器，一旦数据加载，我将调用 runApp((。我该怎么做？

// MAIN
void main() async {
_isLoading = true;
// Get Currency Json
currencyData = await getCurrencyData();
// Get Weather Json
weatherData = await getWeatherData();
runApp(new MyApp());
}

// Body
body: _isLoading ? 
new Center(child: 
new CircularProgressIndicator(
backgroundColor: Colors.greenAccent.shade700,
)
) :
new Container(
//… actual UI
)

Answer 1

你需要将数据/或加载指示器放在脚手架内，每次显示脚手架，无论你是否有数据，你里面的内容就可以做你想做的事情。

import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Hello Rectangle',
home: Scaffold(
appBar: AppBar(
title: Text('Hello Rectangle'),
),
body: HelloRectangle(),
),
),
);
}
class HelloRectangle extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Container(
color: Colors.greenAccent,
height: 400.0,
width: 300.0,
child: Center(
child: FutureBuilder(
future: buildText(),
builder: (BuildContext context, AsyncSnapshot snapshot) {
if (snapshot.connectionState != ConnectionState.done) {
return CircularProgressIndicator(backgroundColor: Colors.blue);
} else {
return Text(
'Hello!',
style: TextStyle(fontSize: 40.0),
textAlign: TextAlign.center,
);
}
},
),
),
),
);
}
Future buildText() {
return new Future.delayed(
const Duration(seconds: 5), () => print('waiting'));
}
}

'