如何为Flutter的FancyShimmerImage组件设置本地资源图片？

FancyShimmerImage默认的imageUrl参数只支持网络图片地址，要加载本地资源可以用以下两种方法：

方法一：使用FancyShimmerImage.image()构造函数（推荐） #

这个构造函数支持直接传入ImageProvider类型，通过AssetImage就能加载本地资源：

1. 确保你已经在pubspec.yaml中正确配置了本地图片资源：

assets:
  - assets/images/your_local_image.png

2. 修改组件代码：

FancyShimmerImage.image(
  boxFit: BoxFit.contain,
  image: AssetImage('assets/images/your_local_image.png'),
  errorWidget: Image.asset('assets/images/error_local_image.png'), // 错误时显示本地图
  shimmerBaseColor: Colors.greenAccent,
  shimmerHighlightColor: Colors.grey,
  shimmerBackColor: Colors.greenAccent,
),

方法二：用Shimmer组件包裹Image.asset #

如果你的FancyShimmerImage版本没有image()构造函数，或者需要更灵活的自定义，可以直接用基础的Shimmer组件包裹本地图片：

Shimmer.fromColors(
  baseColor: Colors.greenAccent,
  highlightColor: Colors.grey,
  child: Image.asset(
    'assets/images/your_local_image.png',
    fit: BoxFit.contain,
    errorBuilder: (context, error, stackTrace) {
      return Image.asset('assets/images/error_local_image.png');
    },
  ),
),

这样也能实现和FancyShimmerImage一致的shimmer加载效果，同时完美支持本地资源。

内容的提问来源于stack exchange，提问作者Suretion