Flutter加载Firebase图片时Shimmer效果不消失的解决方法

问题原因 #

你当前的代码把CachedNetworkImage整个嵌套在Shimmer.fromColors内部，导致无论图片是否加载完成，Shimmer动画都会持续显示，不会自动停止。

修复方案 #

将Shimmer效果移到CachedNetworkImage的placeholder回调中，这样只有在图片加载过程中才会显示Shimmer，加载完成后就会替换为实际的图片内容：

class TestListItem extends StatelessWidget {
  const TestListItem({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ListTile(
            leading: CachedNetworkImage(
              imageUrl: 'https://imglarger.com/Images/before-after/ai-image-enlarger-1-after-2.jpg',
              placeholder: (context, url) => Shimmer.fromColors(
                baseColor: Colors.grey.shade300,
                highlightColor: Colors.grey.shade100,
                child: const CircleAvatar(
                  backgroundColor: AppTheme.circleBgColor,
                  radius: 50,
                ),
              ),
              imageBuilder: (context, imageProvider) => CircleAvatar(
                backgroundColor: AppTheme.circleBgColor,
                backgroundImage: imageProvider,
                radius: 50,
              ),
              errorWidget: (context, url, error) => const CircleAvatar(
                backgroundColor: AppTheme.circleBgColor,
                radius: 50,
                child: Icon(Icons.error),
              ),
            ),
            title: const Text('test title'),
            subtitle: const Text('test subtitle'),
          ),
        ],
      ),
    );
  }
}

额外说明 #

• placeholder会在图片加载过程中显示，加载完成后自动切换到imageBuilder返回的组件
• 结合你的Firebase实时数据库场景，若图片URL会动态更新，可通过CachedNetworkImage的cacheKey参数配置唯一标识，确保新图片能及时替换旧缓存

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