flutter使用get依赖实现全局loading效果，弹窗loading状态

get dialog的官网文档：GetDialogRoute class - dialog_route library - Dart API

可以使用Get.dialog()方法来创建一个自定义的加载弹窗，get框架是支持自定义弹窗效果的，所以我们就使用这个方式来自定义一个弹窗效果，并且点击遮罩区域可以实现关闭，这个功能要先在组件里面创建一个loading.dart文件，然后代码如下：

import 'package:flutter/material.dart';
import 'package:get/get.dart';

class LoadingDialog {
  static show() {
    Get.dialog(
      GestureDetector(
        child: Container(
          color: Colors.black54,
          child: const Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation(Colors.white),
            ),
          ),
        ),
        onTap: () {
          // 点击是否退出模态框
          Get.back();
        },
      ),
      barrierDismissible: false,
    );
  }

  static hide() {
    Get.back();
  }
}

然后在组件中使用，如果你想在路由跳转的时候，就展示loading效果，就可以在Get.toName()跳转后立马调用：

然后当页面数据加载完之后隐藏loading：

我这里使用了延时两秒来关闭弹窗，不然无法关闭：

  getGoods() async {
    var res = await userApi.getGoods();
    var goodsData = res['response_data']['data'];
    setState(() {
      goods = goodsData;
    });
    //
    Future.delayed(Duration(seconds: 2), () {
      print("退出加载...");
      // Get.back();
      LoadingDialog.hide();
    });
  }