flutter~loading效果

1,269 阅读1分钟

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

第一次默认的话代码如下

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; // 点击时不会消失
} 

1749455912442.jpg

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

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; // ✅ 使用自定义遮罩颜色 
}

效果图:

image.png

第三次,终于解决了,黑色的是阴影 (boxShadow),气死了

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; // ✅ 使用自定义遮罩颜色
}

5e7d5197a04b9cece8deff6ce60c07f.jpg