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

对于按钮中的每种情况都必须执行此操作（对于图标和加载指示器）