Flutter 如何实现CircularProgressIndicator对话框和'&引用;消息已发送&引用;颤振中的对话?
我是颤振方面的新手,我希望在按下扁平按钮时如何实现CircularProgressIndicator对话框和“Message sent!”对话框方面获得帮助。在本例中,我实现了一个联系人表单,供用户通过FirebaseFirestore.instance发送消息。我最初设置bool_isLoading并使用它触发CircularProgressIndicator的方法只是在消息发送后,当我将其设置为false时,它没有响应。因此,我得到一个CircularProgressIndicator,即使在确认消息已发送后也不会停止。有人能帮我解决这个问题吗Flutter 如何实现CircularProgressIndicator对话框和'&引用;消息已发送&引用;颤振中的对话?,flutter,dart,flutter-web,Flutter,Dart,Flutter Web,我是颤振方面的新手,我希望在按下扁平按钮时如何实现CircularProgressIndicator对话框和“Message sent!”对话框方面获得帮助。在本例中,我实现了一个联系人表单,供用户通过FirebaseFirestore.instance发送消息。我最初设置bool_isLoading并使用它触发CircularProgressIndicator的方法只是在消息发送后,当我将其设置为false时,它没有响应。因此,我得到一个CircularProgressIndicator,即使
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.pinkAccent,
onPressed: () {
setState(() {
_isLoading = true;
});
if (_isLoading) {
showDialog(
barrierDismissible: true,
context: context,
builder: (BuildContext context) {
return Dialog(
child: Container(
height: _height * 0.09495,
width: _width * 0.17644444,
padding: EdgeInsets.only(
top: 15,
),
child: Center(
child: Column(
children: [
CircularProgressIndicator(),
Text('Please wait...'),
],
),
),
),
);
});
if (_fbKey.currentState.saveAndValidate()) {
FirebaseFirestore.instance
.collection('message')
.doc()
.set({
'name': _fbKey.currentState.value['name'],
'email':
_fbKey.currentState.value['email'],
'details':
_fbKey.currentState.value['details'],
'category':
_fbKey.currentState.value['category'],
'created': FieldValue.serverTimestamp(),
}).then((_) {
print('Sent!');
}).catchError((error) {
print("Failed to send message: $error");
});
}
} else {
showDialog(
barrierColor: Colors.transparent,
barrierDismissible: true,
context: context,
builder: (BuildContext context) {
return Dialog(
child: Container(
height: _height * 0.09495,
width: _width * 0.17644444,
child: Center(
child: Text(
'Message sent2!',
style: TextStyle(
color: Colors.green,
fontSize: 16,
),
),
),
),
);
});
}
setState(() {
_isLoading = false;
});
},
),
'''
实际上,显示和弹出对话框并不需要布尔值。如果我们理解异步函数和等待调用,则可以轻松实现此逻辑。表单一经验证,我们将显示加载对话框,然后等待firebase查询。执行firebase查询时,我们将使用try-catch块查看它是否捕获错误或成功执行。如果它捕获到错误,我们将弹出对话框,打印错误,然后调用return,这样我们的方法就终止了。如果未捕获任何错误,它将继续正常执行。我们将弹出此对话框并显示message sent对话框
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
color: Colors.pinkAccent,
onPressed: () async {
if (_fbKey.currentState.saveAndValidate()) {
showDialog(
barrierDismissible: true,
context: context,
builder: (BuildContext context) {
return Dialog(
child: Container(
height: _height * 0.09495,
width: _width * 0.17644444,
padding: EdgeInsets.only(
top: 15,
),
child: Center(
child: Column(
children: [
CircularProgressIndicator(),
Text('Please wait...'),
],
),
),
),
);
});
try{
await FirebaseFirestore.instance
.collection('message')
.doc()
.set({
'name': _fbKey.currentState.value['name'],
'email':
_fbKey.currentState.value['email'],
'details':
_fbKey.currentState.value['details'],
'category':
_fbKey.currentState.value['category'],
'created': FieldValue.serverTimestamp(),
});
} catch (e){
//Pop loading dialog because error has occured. We will print error and call return so our function
//should be terminated
Navigator.pop(context);
print("Exception occured");
return;
}
//Pop loading dialog because query is executed and now we want to show message sent dialog
Navigator.pop(context);
print("Query successfully executed i.e Message Sent");
showDialog(
barrierColor: Colors.transparent,
barrierDismissible: true,
context: context,
builder: (BuildContext context) {
return Dialog(
child: Container(
height: _height * 0.09495,
width: _width * 0.17644444,
child: Center(
child: Text(
'Message sent2!',
style: TextStyle(
color: Colors.green,
fontSize: 16,
),
),
),
),
);
});
}
},
)
为什么不在那之后设置_isLoading的状态呢?我已经尝试了你的建议,但是我仍然得到了一个连续循环的指示器。代码有问题吗?为什么不试着逐行调试,并检查它是否到达isLoading值正在更改的行。若并没有调试,那个么懒惰的方法就是像print(我在这里)那个样放置print;高于isLoading=false;我找到了解决办法。非常感谢。没问题!来帮忙!谢谢你的解决方案。它确实有效。我不知道这个案子不需要布尔人。我将重点学习异步函数,现在等待调用。再次感谢你们!