[英]flutter: how to show loading animation before log in?
I'm working with flutter.我正在处理颤振。 After I input my id and password, I want to show a
log in animation
before entering the home page.在我输入我的ID和密码后,我想在进入主页之前显示一个
log in animation
。 I use a dialog
but I feel like my code is very blunt and has potential bugs.我使用
dialog
但我觉得我的代码非常生硬并且有潜在的错误。 Is there a better solution?有更好的解决方案吗?
// 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
});
}
You can use Libraries from pub.dev like loading_overlay您可以使用pub.dev 中的库,例如loading_overlay
or you can build your own loading widget, example :或者您可以构建自己的加载小部件,例如:
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(),
),
),
)
],
);
}
}
Please follow this (modal_progress_hud)请按照这个(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),
);
}
I suggest to use FutureBuilder .我建议使用FutureBuilder 。 There is also some default loading Widget like
CircularProgressIndicator()
can be used when in progress.还有一些默认加载小部件,如
CircularProgressIndicator()
可以在进行时使用。
Because login is some sort of Asynchronous progress, you can use FutureBuilder like below:因为登录是某种异步进程,您可以像下面这样使用 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();
}
}
)
If you need more fancy loading indicator, you can check this package flutter_spinkit如果你需要更多花哨的加载指示器,你可以查看这个包flutter_spinkit
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.