如何在Flutter中显示覆盖在当前屏幕上的进度指示器动画？

问题描述

如何在当前屏幕上方颤动显示叠加的加载指示器？ 就像用户尝试登录并发出http请求时一样，我希望在当前屏幕内容上方显示旋转指示器，而不进行任何变暗或其他操作，因此我不希望使用Dialog。

例如，来自Pinterest应用程序的此类内容：

解决方法

请制作一个通用的加载器小部件

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
])
 );

,

这就是我使用 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),),)
              ],);
  },);