在flutter中设置全屏加载/进度的最佳方法是什么

Question

我想在开始加载覆盖其中的

FullScreen

时添加带有灰色背景的全屏加载。

过去，我使用了

Stack

小部件，但堆栈没有覆盖我的应用程序栏。

而且我认为在

Scaffold

小部件中添加

Stack

并不是一个好方法

Answer 1

您可以尝试以下方法

有一个实用程序类

    class Utils {
      late BuildContext context;

      Utils(this.context);

    // this is where you would do your fullscreen loading
      Future<void> startLoading() async {
        return await showDialog<void>(
          context: context,
          barrierDismissible: false,
          builder: (BuildContext context) {
            return const SimpleDialog(
              elevation: 0.0,
              backgroundColor: Colors.transparent, // can change this to your prefered color
              children: <Widget>[
                Center(
                  child: CircularProgressIndicator(),
                )
              ],
            );
          },
        );
      }

      Future<void> stopLoading() async {
        Navigator.of(context).pop();
      }
      Future<void> showError(Object? error) async {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        action: SnackBarAction(
          label: 'Dismiss',
          onPressed: () {
            ScaffoldMessenger.of(context).hideCurrentSnackBar();
          },
        ),
        backgroundColor: Colors.red,
        content: Text(handleError(error)),
      ),
    );
  }
      }

然后在需要加载的地方使用

ElevatedButton(
                        onPressed: () async {
                          
                          FocusScope.of(context).unfocus();
                          if (widget.formkey!.currentState!.validate()) {
                            Utils(context).startLoading();
                            widget.formkey!.currentState!.save();
                            widget.authProvider
                                .signInWithEmailAndPassword(
                                    widget.textController.text.trim(),
                                    widget.passwordController.text.trim())
                                .then((user) async {
                              // do something with user
                               Utils(context).stopLoading();
                            }).onError(
                              (error, stackTrace) {
                                Utils(context).showError(error);
                                Utils(context).stopLoading();
                              },
                            );
                          }
                        },
                        child: const Text(
                          AppConstants.kBtnLogin,
                          style: TextStyle(color: Colors.white),
                        ),
                      )

Answer 2

添加 showDialog() 将确保它覆盖 Scaffold 内的 appBar，当您希望加载器出现时添加此：

showDialog(
        context: context,
        barrierDismissible: false,
        builder: (context) {
          return Container(
            color: Colors.grey,
            child: Center(
              child: CircularProgressIndicator(
                color: Colors.white,
              ),
            ),
          );
        },
      );

Answer 3

如果您使用 GetX，解决方案：

class LoadingFullscreen {

    static void startLoading() {
      Get.dialog(
        const SimpleDialog(
          elevation: 0.0,
          backgroundColor: Colors.transparent,
          children: <Widget>[
            Center(
              child: CircularProgressIndicator.adaptive(),
            )
          ],
        )
      );
    }

    static stopLoading() {
      Get.close(1);
    }
}

Answer 4

Center(
   child: CircularProgressIndicator(),
),

Answer 5

展开（ 子项：列（ mainAxisAlignment：MainAxisAlignment.center， 孩子们： [ 中心（子：CircularProgressIndicator（））， ], ), );