flutter~loading效果

方文_2025-06-09 16:27

flutter在网络请求的时候，做了一个loading效果，结果老板说这个loading效果不好看，替换成一个动画就好了，回来就修改，先引入flutter_easyloading: ^3.0.5

第一次默认的话代码如下

ini 复制代码

void configLoading() {
  EasyLoading.instance
    ..indicatorType = EasyLoadingIndicatorType.fadingCircle // 指定加载动画类型
    ..loadingStyle = EasyLoadingStyle.dark // 设置加载样式
    ..indicatorSize = 45.0
    ..radius = 10.0
    ..fontSize = 14
    ..maskColor = Colors.blue.withOpacity(0.5)
    ..userInteractions = true // 禁止用户交互
    ..dismissOnTap = false; // 点击时不会消失
}

第二次很接近了但是有点不好看，多了一个黑色的背景色

ini 复制代码

void configLoading() {
  EasyLoading.instance 
    ..indicatorWidget =Lottie.asset(
      'assets/icons/loading.json',
      width: 180,
      height: 120,
      fit: BoxFit.contain,
    )
    ..loadingStyle = EasyLoadingStyle.custom // ✅ 使用自定义样式
    ..backgroundColor = Colors.transparent // ✅ 去掉黑色背景框
    ..textColor = Colors.transparent // ✅ 隐藏 loading 文字（可选）
    ..maskColor = Colors.black.withOpacity(0.3) // ✅ 设置白色遮罩层 
    ..indicatorColor = Colors.transparent
    ..indicatorSize = 0
    ..userInteractions = false
    ..dismissOnTap = false
    ..indicatorSize = 0 // ✅ 不使用内置指示器
    ..maskType = EasyLoadingMaskType.custom; // ✅ 使用自定义遮罩颜色 
}

效果图：

第三次，终于解决了，黑色的是阴影（boxShadow），气死了

ini 复制代码

void configLoading() {
  EasyLoading.instance
    ..indicatorWidget =Lottie.asset(
      'assets/icons/loading.json',
      width: 180,
      height: 120,
      fit: BoxFit.contain,
    )
    ..loadingStyle = EasyLoadingStyle.custom // ✅ 使用自定义样式
    ..backgroundColor = Colors.transparent // ✅ 去掉黑色背景框
    ..textColor = Colors.transparent // ✅ 隐藏 loading 文字（可选）
    ..maskColor = Colors.black.withOpacity(0.3) // ✅ 设置白色遮罩层
    ..boxShadow = <BoxShadow>[]            // ✅ 去掉默认黑色阴影  重点代码（去掉icon后面黑色的背景）
    // ..contentPadding = EdgeInsets.zero     // ✅ 去掉 padding，避免默认内容包裹背景
    ..indicatorColor = Colors.transparent
    ..indicatorSize = 0
    ..userInteractions = false
    ..dismissOnTap = false
    ..indicatorSize = 0 // ✅ 不使用内置指示器
    ..maskType = EasyLoadingMaskType.custom; // ✅ 使用自定义遮罩颜色
}