Flutter 提交按鈕上的圓形進度指示器

Question

我有一個登錄屏幕，它有兩個文本字段和一個提交按鈕，在這個提交按鈕中，我現在正在做的是，當它按下它時，它會顯示一個加載圖標，並且在某個時候它會導航到另一個屏幕，但是如果用戶名 email 和電話號碼是錯誤的導航到另一個屏幕而不是顯示加載圖標，然后它將導航到另一個屏幕，如果 email 或密碼在這種情況下是錯誤的，如果 response.statusCode 不等於 200，我會顯示帶有錯誤消息的小吃欄和我希望加載圖標為假。 與文本字段為空的情況相同，現在我在我的 TextFormFields 上做了一個驗證器，所以當文本字段為空或 response.statusCode != 200 loading = false

bool loading = true;

TextFormField loginEmailTextField() {
    return TextFormField(
      enableInteractiveSelection: false,
      keyboardType: TextInputType.number,
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your phone number';
        }
        return null;
      },

TextFormField loginPasswordTextField() {
    return TextFormField(
      validator: (value) {
        if (value == null || value.isEmpty) {
          return 'Please enter your password';
        }
        return null;
      },

ElevatedButton(
            onPressed: () async {
              if (_formKey.currentState!.validate()) {
                Future<Response> futureResponse = fetchWorkingLocationData();
                futureResponse
                    .then((response) => {
                          if (response.statusCode == 200)
                            {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => MenuPage()),
                              )
                            }
                          else
                            {
                              {
                                ScaffoldMessenger.of(context).showSnackBar(
                                  const SnackBar(
                                    backgroundColor: Colors.blue,
                                    content: Text(
                                      "Incorrect phone number or password",
                                      style: TextStyle(fontSize: 18),
                                    ),
                                    duration: Duration(seconds: 4),
                                  ),
                                ),

                              }
                            },
                        })
                    .catchError((error, stackTrace) => print('shush'));
              }
              if (loading) return;
              setState(() {
                loading = true;
              });
            },
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 16, vertical: 10),
              child: loading
                  ? Loading()
                  : Text(
                      'Submit',

Answer 1

我不確定您的 isLoading 是否已經在外面（看起來是這樣），但是 * isLoading boolean 應該在您的主小部件構建 function 之外，因為每當您再次調用setState時，您的 Z84E2C64F38F78BA3EA5C905AB5 也會設置為 true，改為false因為您不希望它立即顯示在登錄頁面上

在您的按鈕 function 中，您還應該調用 setState 並將您的 isLoading 值設置為如果檢查完成時的值

.then((response) => {
                          if (response.statusCode == 200)
                            {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => MenuPage()),
                              )
                            }
                          else
                            {
                              {
                                setState(){
                                isLoading = false;
                                }
                                ScaffoldMessenger.of(context).showSnackBar(
                                  const SnackBar(
                                    backgroundColor: Colors.blue,
                                    content: Text(
                                      "Incorrect phone number or password",
                                      style: TextStyle(fontSize: 18),
                                    ),
                                    duration: Duration(seconds: 4),
                                  ),
                                ),

                              }
                            },
                        })

基本上你想要做的是設置 boolean 的 state ，只要它應該設置為 true 或 false

對於按鈕中的每種情況都必須執行此操作（對於圖標和加載指示器）