如何在 flutter 的當前屏幕上顯示進度指示器 animation？

Question

如何在 flutter 的當前屏幕上方顯示疊加的加載指示器？ 就像當用戶嘗試登錄並發出 http 請求時，我希望在當前屏幕內容上方顯示一個旋轉指示器，而不會變暗或其他任何東西，所以我不想使用對話框。

例如，來自 Pinterest 應用程序的類似內容：

Answer 1

請制作一個通用的加載器小部件

class LoaderTransparent extends StatelessWidget {
double height;
double width;
Color colorValue;
LoaderTransparent({this.colorValue});

@override
Widget build(BuildContext context) {
height = MediaQuery.of(context).size.height;
width = MediaQuery.of(context).size.width;
return Container(
    height: height,
    width: width,
    color: Colors.transparent,
    child: Center(
        child: SizedBox(
            height: 60.0,
            width: 60.0,
            child:
                //Image.asset('assets/images/loader.gif',fit: BoxFit.fill,) // use you custom loader or default loader
          CircularProgressIndicator(
          valueColor: AlwaysStoppedAnimation(
          Colors.blue),
          strokeWidth: 5.0))));
      }
  }

在你的屏幕上像這樣使用

Scaffold(
    body:
    Stack(children: [
    Container(
      width: width,
      child: Column(
        children: <Widget>[ // user screen ui
        
          ],)
      ),
   true ? LoaderTransparent() : Container()    // true or false conditions  according loader show or hide
])
 );

Answer 2

這就是我使用 showDialog 的方式。

return showDialog(
  context: context,
  barrierDismissible: false,
  builder: (BuildContext context) {
    return Platform.isAndroid
        ? Center(child: SizedBox(height: 40, width: 40, child: Center(child: ProgressIndicatorLight())))
        : Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                CupertinoActivityIndicator(),
                SizedBox(height: 6),
                Material(
                  color: Colors.transparent,
                  child: Text(
                    'LOADING',
                    style: TextStyle(fontSize: kLoadingFontSize),
                  ),
                )
              ],
            ),
          );
  },
);