如何實現 CircularProgressIndicator 對話框和“消息已發送！” Flutter 中的對話框？

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

您實際上不需要布爾值來顯示和彈出對話框。 如果我們了解異步函數並等待調用，則可以輕松實現此邏輯。 一旦表單被驗證，我們將顯示加載對話框，然后等待 firebase 查詢。 執行 firebase 查詢時，我們將查看它是否已捕獲錯誤或使用 try catch 塊成功執行。 如果它發現了一個錯誤，我們將彈出對話框，打印錯誤，然后調用 return 以終止我們的方法。 如果沒有發現任何錯誤，它將繼續正常執行。我們將彈出此對話框並顯示消息發送對話框。

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