flutter~loading效果

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; // ✅ 使用自定义遮罩颜色
}
相关推荐
Bryce李小白3 分钟前
Flutter中实现页面跳转功能
flutter
RaidenLiu9 小时前
Flutter 多环境配置:flavor
前端·flutter
忆江南9 小时前
Widget 、 Element 和 RenderObject 关系
flutter
程序员老刘10 小时前
“工信部要求9月30日前APP必须100%适配鸿蒙“ 是真的吗?
flutter·harmonyos
亿刀10 小时前
WireGuard通讯原理
android·flutter
勤劳打代码14 小时前
曲径通幽 —— Android 息屏 TCP 连接管理
android·tcp/ip·flutter
耳東陈15 小时前
Flutter ScreenUtil Generator - 自动添加ScreenUtil后缀
flutter
恋猫de小郭15 小时前
Flutter 里的 Layer 解析,带你了解不一样角度下的 Flutter 渲染逻辑
android·前端·flutter
愿天深海1 天前
Flutter 生命周期介绍
flutter
ideal树叶2 天前
用了Flutter包体积增大就弃用Flutter吗?包体积与开发效率,这两者之间如何权衡?
flutter