颤振-全屏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>[
...
]

输出：