如何在 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?的主要内容,如果未能解决你的问题,请参考以下文章