[英]How to display progress indicator in flutter?
I am trying to show a progress indicator when i am logging in. I have created a boolean value to toggle when I want to show and hide the indicator, however i am not able to figure out where exactly i should show the indicator. 我正在尝试在登录时显示进度指示器。我创建了一个布尔值以在我想显示和隐藏指示器时进行切换,但是我无法弄清楚应该在哪里显示指示器。
I can add it as one of my widgets in my Container where I am displaying all other screen widgets, however i dont want it to interfere with other widgets and rather show on top of all of them. 我可以将其添加为我的容器中显示所有其他屏幕小部件的小部件之一,但是我不希望它干扰其他小部件,而是显示在所有小部件之上。 How can I achieve this?
我该如何实现? How can I achieve this?
我该如何实现?
Thanks in advance. 提前致谢。
My code 我的密码
import ....
class Login extends StatefulWidget{
...
}
class _LoginState extends State<Login> {
bool _loading = false;
@override
Widget build(BuildContext context){
Future<Map<String, dynamic>> getData() async {
var client = http.Client();
//to SHOW Indicator
setState(() {
_loading = true;
});
var response = await client
.post(
Uri.encodeFull(
' api url '),
body:
{"email":"$username","password":"$password"}
).whenComplete(
client.close);
var res = json.decode(response.body);
//to HIDE indicator
setState(() {
_loading = false;
});
if(response.statusCode <200 || response.statusCode > 400){
print("Error");
throwError();
}
if(response.statusCode == 200 ){
widget.onSignedIn();
}
if (!mounted)
return {'success': false};
return json.decode(response.body);
}
Container view = Container(
....
);
return Scaffold(
resizeToAvoidBottomPadding: false,
body: view
);
}
}
As CopsOnRoad mentioned, you must use Stack
if you want to place multiple Widget
s that do not interfere with each other. 正如CopsOnRoad所提到的,如果要放置多个不会相互干扰的
Widget
,则必须使用Stack
。
Also, Dart 2.3 introduced collection if . 此外,Dart 2.3引入了if的集合 。 With it, you can add an item to your
Collection
only if a condition is true
. 使用它,只有在条件为
true
时,您才能将项目添加到您的Collection
true
。
Stack(
alignment: Alignment.center,
children: [
Container(child: ...),
if (_loading) CircularProgressIndicator(),
],
)
You can use xs_progress_hud: ^1.0.2
this library and Import from here 您可以使用
xs_progress_hud: ^1.0.2
此库并从此处导入
Show dialog 显示对话框
XsProgressHud.show(context);
Hide dialog 隐藏对话
XsProgressHud.hide();
Here you can do something like this in your code. 在这里,您可以在代码中执行类似的操作。
Future<Map<String, dynamic>> getData() async {
var client = http.Client();
XsProgressHud.show(context);
//to SHOW Indicator
setState(() {
_loading = true;
});
var response = await client
.post(
Uri.encodeFull(
' api url '),
body:
{"email":"$username","password":"$password"}
).whenComplete(
client.close);
var res = json.decode(response.body);
//to HIDE indicator
setState(() {
_loading = false;
});
if(response.statusCode <200 || response.statusCode > 400){
XsProgressHud.hide();
print("Error");
throwError();
}
if(response.statusCode == 200 ){
XsProgressHud.hide();
widget.onSignedIn();
}
if (!mounted)
return {'success': false};
return json.decode(response.body);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.