提交按钮上的颤振圆形进度指示器

Question

我有一个登录屏幕，它有两个文本字段和一个提交按钮，在这个提交按钮中，我现在正在做的是，当按下它时它会显示一个加载图标，并且在某些时候它会导航到另一个屏幕，但是如果用户名的电子邮件和电话号码错误，我会显示一个带有错误消息的小吃栏，问题是即使发生这种情况，加载图标也会继续加载并且它永远不会停止，我想要做的是，如果一切都很好并且用户可以导航到另一个屏幕而不是显示加载图标，然后它将导航到另一个屏幕，如果在这种情况下电子邮件或密码错误，如果 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 布尔值应该在你的主要小部件构建函数之外，因为每当你调用 setState 您的布尔值将再次设置为 true，我也将其设置为 false，因为您不希望它立即显示在登录页面上

在您的按钮功能中，您还应该调用 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),
                                  ),
                                ),

                              }
                            },
                        })

基本上你想要做的是设置布尔值的状态，只要它应该设置为真或假

对于按钮中的每个案例都必须这样做（对于图标和加载指示器）