Flutter - 全屏 CircularProgressIndicator

Question

在 Flutter 中，我尝试调用 Web 服务来检索一些数据。当服务工作时，会填写一个列表并在屏幕上显示。如果数据为空（或尝试从服务中获取数据），我想全屏显示 CircularProgressIndicator。现在 CircularProgressIndicator 位于页面顶部。

代码是

  Scaffold(
            body: Column(children: <Widget>[
              SafeArea(child: progress),
              loading == false ? rssi : indicator
            ]),



   final indicator = Container(
        child: Center(
      child: CircularProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
      ),
    ));

我想在整个屏幕的“进度”小部件下方显示“指示器”小部件。

有什么帮助吗？

Answer 1

这行得通。刚刚在 Dartpad 上测试过：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: loading == false ? Text("loaded") : Container(
          constraints: BoxConstraints.expand(),
          child: CircularProgressIndicator()
        )
      )
    );
  }

Answer 2

您可以像这样创建一个通用的 ProgressIndicator 小部件，

class ProgressDialogPrimary extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var brightness = MediaQuery
        .of(context)
        .platformBrightness == Brightness.light;
    ;
    return Scaffold(
      body: Center(
        child: CircularProgressIndicator(
          valueColor: new AlwaysStoppedAnimation<Color>(AppColors.themeColorSecondary),
        ),
      ),
      backgroundColor: brightness ? AppColors.colorWhite.withOpacity(
          0.70) : AppColors.colorBlack.withOpacity(
          0.70), // this is the main reason of transparency at next screen. I am ignoring rest implementation but what i have achieved is you can see.
    );
  }
}

然后做这样的事情

Scaffold(
 body: isLoading
          ? ProgressDialogPrimary()
          : Column(children: <Widget>[
...
]

输出：