Question

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

我的问题是我需要首先显示CircularProgressIndicator，一旦数据加载我将调用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'));
  }
}

`

如何在Flutter App Start之前显示CircularProgressIndicator？

1 个答案: