[英]flutter: how to show loading animation before log in?
我正在处理颤振。 在我输入我的ID和密码后,我想在进入主页之前显示一个log in animation
。 我使用dialog
但我觉得我的代码非常生硬并且有潜在的错误。 有更好的解决方案吗?
// this part is for the input content is legal
else {
showDialog(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return LoadingStyle.buildWidget(); // this is a simple loading animation
});
service.createSession(context, code, id).then((response) { // log in part
if (response != null) {
this.saveUser(response); // something about saving user info
} else {
print('null respose');
}
}).catchError((e) {
if (e is GrpcError && e.code == StatusCode.unauthenticated) {
setState(() {
this.errorMessage = "grpc network error";
});
}
}).whenComplete(() {
Navigator.of(context).pop(); // pop dialog here, is this right?
MyRoutersl.goNewPage(context); // enter the new page
});
}
您可以使用pub.dev 中的库,例如loading_overlay
或者您可以构建自己的加载小部件,例如:
class OverlayWidget extends StatelessWidget {
final Widget child;
final bool isLoading;
OverlayWidget({@required this.child, this.isLoading = false})
: assert(child != null);
@override
Widget build(BuildContext context) {
return Stack(
children: [
child,
Visibility(
visible: isLoading,
child: Container(
color: Colors.grey.withOpacity(0.4),
child: Center(
child: Platform.isIOS
? CupertinoActivityIndicator(
radius: 20,
)
: CircularProgressIndicator(),
),
),
)
],
);
}
}
请按照这个(modal_progress_hud)
import 'package:modal_progress_hud/modal_progress_hud.dart';
......
bool _saving = false
....
@override
Widget build(BuildContext context) {
return Scaffold(
body: ModalProgressHUD(child: Container(
Form(...)
), inAsyncCall: _saving),
);
}
我建议使用FutureBuilder 。 还有一些默认加载小部件,如CircularProgressIndicator()
可以在进行时使用。
因为登录是某种异步进程,您可以像下面这样使用 FutureBuilder:
FutureBuilder(
future: service.createSession(... // Use Async function to return the result
builder: (context, snapshot) {
if(snapshot.hasData && snapshot.connectionState == done ){
// return widget after login successfully
// result should equal to snapshot.data
} else {
// return CircularProgressIndicator();
}
}
)
如果你需要更多花哨的加载指示器,你可以查看这个包flutter_spinkit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.