flutter 网络图片封装

可自定义加载时占位图片和加载失败时展示的图片

dart 复制代码
class ImageBuildView extends StatelessWidget {
  String? url;
  double radius;
  double? width;
  double? height;
  String placeholder;

  ImageBuildView(
      {super.key,
      this.url,
      this.width,
      this.height,
      this.radius = 50,
      this.placeholder = "assets/images/loading.png"});

  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(radius),
      child: FadeInImage.assetNetwork(
        placeholder: placeholder,
        image: url != null && url!.isNotEmpty ? "${Api.BASE_URL}/$url" : '',
        fit: BoxFit.cover,
        width: width ?? 60.w,
        height: height ?? 60.w,
        imageErrorBuilder: (context, error, stackTrace) {
          return Center(
            child: Image.asset("assets/images/image_error.png",
                width: (width ?? 60.w) - 20.w, height: (height ?? 60.w) - 20.w),
          );
        },
      ),
    );
  }
}
相关推荐
ujainu8 分钟前
Flutter + OpenHarmony 游戏开发进阶:游戏主循环——AnimationController 实现 60fps 稳定帧率
flutter·游戏·openharmony
2601_949868368 分钟前
Flutter for OpenHarmony 剧本杀组队App实战04:发起组队表单实现
开发语言·javascript·flutter
kirk_wang18 分钟前
Flutter艺术探索-Flutter在鸿蒙端运行原理:OpenHarmony平台集成
flutter·移动开发·flutter教程·移动开发教程
晚霞的不甘28 分钟前
Flutter for OpenHarmony专注与习惯的完美融合: 打造你的高效生活助手
前端·数据库·经验分享·flutter·前端框架·生活
2401_865854881 小时前
Uniapp和Flutter哪个更适合企业级开发?
flutter·uni-app
向哆哆1 小时前
Flutter × OpenHarmony 跨端实战:打造健身俱乐部「数据可视化仪表盘」模块
flutter·信息可视化·开源·鸿蒙·openharmony·开源鸿蒙
灰灰勇闯IT1 小时前
Flutter for OpenHarmony:卡片式 UI(Card Widget)设计 —— 构建清晰、优雅的信息容器
flutter·交互
灰灰勇闯IT1 小时前
Flutter for OpenHarmony:响应式布局(LayoutBuilder / MediaQuery)—— 构建真正自适应的鸿蒙应用
flutter·华为·harmonyos
晚霞的不甘1 小时前
Flutter for OpenHarmony手势涂鸦画板开发详解
前端·学习·flutter·前端框架·交互
晚霞的不甘2 小时前
Flutter for OpenHarmony 实现动态天气与空气质量仪表盘:从 UI 到动画的完整解析
前端·flutter·ui·前端框架·交互