如何在 Flutter App 启动前显示 CircularProgressIndicator?

Posted

技术标签:

【中文标题】如何在 Flutter App 启动前显示 CircularProgressIndicator?【英文标题】:How to show CircularProgressIndicator before Flutter App Start? 【发布时间】:2018-10-18 02:41:37 【问题描述】:

在我的演示应用程序中,我需要从服务器加载一个 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
)

【问题讨论】:

【参考方案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'));
  

`

【讨论】:

@ThaSalani 身体:在脚手架内。我不明白。能否提供一下代码 您显示的所有内容都在运行应用程序的“runApp”中。你应该直接做'runApp'。在“MyApp”中进行数据加载,显示进度指示器并在完成时显示数据。目前您正在等待启动应用程序的数据,即您看到的白屏。 @Rene,我需要加载 4 或 5 个 json。你有任何可行的例子吗? @TheSaleni 我做到了。我想。谢谢 @TheSaleni 谢谢。修改我的项目,它现在正在工作。

以上是关于如何在 Flutter App 启动前显示 CircularProgressIndicator?的主要内容,如果未能解决你的问题,请参考以下文章

Flutter - 本地化启动列表中App名字

Flutter:使用参数从 App A 启动 App B

Flutter_设置APP图标和启动图

如何从存储中选择多个图像并在 Flutter 和 Flutter Web App 中显示? [关闭]

Flutter在启动前读取文件

加载前启动画面白色闪烁(React Native Expo)