Flutter中CircleAvatar网络图片加载失败时显示本地图片的实现方法

直接用CircleAvatar的backgroundImage属性没法处理加载错误，得换个思路：用Image.network组件结合它的errorBuilder实现降级逻辑，再把这个Image作为CircleAvatar的子组件。

实现步骤 #

1. 先确保本地图片已在pubspec.yaml中配置（示例图片放在assets/images/目录下）：

assets:
  - assets/images/avatar_default.png

2. 修改你的DrawerHeader代码，替换原CircleAvatar部分：

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      DrawerHeader(
        decoration: const BoxDecoration(
          color: Colors.white,
        ),
        child: CircleAvatar(
          radius: 40,
          child: ClipOval(
            child: Image.network(
              'https://你的网络图片地址',
              fit: BoxFit.cover,
              width: double.infinity,
              height: double.infinity,
              errorBuilder: (context, error, stackTrace) {
                // 网络图加载失败时显示本地图
                return Image.asset(
                  'assets/images/avatar_default.png',
                  fit: BoxFit.cover,
                );
              },
            ),
          ),
        ),
      ),
      // 其他Drawer列表项...
    ],
  ),
),

代码说明 #

• ClipOval用来让Image和CircleAvatar保持一致的圆形形状
• Image.network的errorBuilder会在网络图片加载失败时触发，直接返回本地的Image.asset组件
• 移除了原代码中的const修饰，因为现在组件包含动态逻辑，无法使用常量修饰

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