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

Question

我有一个登录屏幕，它有两个文本字段和一个提交按钮，在这个提交按钮中，我现在正在做的是，当按下它时，它会显示一个加载图标，并且在某个时候它将导航到其他屏幕，但如果用户名电子邮件和 phone 号码错误，我会显示一个带有错误消息的小吃店，问题是即使发生这种情况，加载图标也会继续加载并且它永远不会停止，我想做的是如果一切正常，用户可以导航到另一个屏幕而不是显示加载图标，然后它将导航到另一个屏幕，如果电子邮件或密码在这种情况下是错误的，如果 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),
                                  ),
                                ),

                              }
                            },
                        })

基本上，您要做的是在该布尔值应设置为 true 或 false 时设置该布尔值的状态

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

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

Flutter Circular Progress Indicator On Submit Button

dart

flutter

flutter-dependencies

flutter-layout