如何在颤动中显示覆盖在当前屏幕上的进度指示器动画?
How to show a progress indicator animation overlayed on current screen in flutter?
如何在 flutter 中显示当前屏幕上方的叠加加载指示器?
就像当用户尝试登录并发出 http 请求时一样,我希望旋转指示器显示在当前屏幕内容上方而不变暗或其他任何东西,所以我不想不使用对话框。
例如来自 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),
),
)
],
),
);
},
);
如何在 flutter 中显示当前屏幕上方的叠加加载指示器? 就像当用户尝试登录并发出 http 请求时一样,我希望旋转指示器显示在当前屏幕内容上方而不变暗或其他任何东西,所以我不想不使用对话框。
例如来自 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),
),
)
],
),
);
},
);