如何在 Flutter 中实现 CircularProgressIndicator 对话框和 '"Message sent!" 对话框？

Question

我是 flutter 的新手，我想获得有关如何实现 CircularProgressIndicator 对话框和“消息已发送！”的帮助。按下平面按钮时的对话框。在这种情况下，我正在实现一个联系表单，供用户通过 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;
                                });
                              },
                            ),
'''

Answer 1

您实际上不需要布尔值来显示和弹出对话框。如果我们理解 asynchronous 函数和 await 调用，这个逻辑就很容易实现。一旦表单通过验证，我们将显示加载对话框，然后等待 firebase 查询。当执行 firebase 查询时，我们将查看它是否已捕获错误或使用 try catch 块成功执行。如果发现错误，我们将弹出对话框，打印错误，然后调用 return 以终止我们的方法。如果它没有发现任何错误，它将继续正常 executed.We 将弹出此对话框并显示消息已发送对话框。

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,
                            ),
                          ),
                        ),
                      ),
                    );
                  });
            }
          },
        )