UserAccountsDrawerHeader加载网络头像失败时如何显示assets默认图片

你可以通过两种主流方式实现网络图片加载失败自动切换本地默认占位图的需求：

方案1：使用cached_network_image库（推荐，自带缓存、加载/失败状态处理） #

这是Flutter生态中最常用的网络图片处理库，同时支持加载占位、失败占位、图片缓存等能力，适配性强。

• 第一步：在pubspec.yaml的dependencies节点下添加依赖：

dependencies:
  flutter:
    sdk: flutter
  cached_network_image: ^3.3.0 # 可替换为最新稳定版

• 第二步：修改currentAccountPicture对应的代码即可，修改后的完整抽屉代码如下（同时修正了你原有代码中State类名和泛型写错的问题）：

import 'package:cached_network_image/cached_network_image.dart';

class MyDrawer extends StatefulWidget {
  final LogedinUser user;
  const MyDrawer({Key? key, required this.user}) : super(key: key);

  @override
  _MyDrawerState createState() => _MyDrawerState();
}

class _MyDrawerState extends State<MyDrawer> {
  final imageUrl = Api().uploadUrl;

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          DrawerHeader(
            padding: EdgeInsets.zero,
            child: UserAccountsDrawerHeader(
              decoration: const BoxDecoration(
                  gradient: LinearGradient(colors: [
                Color(0xFFee436e),
                Color(0xFFF37D71),
              ])),
              margin: EdgeInsets.zero,
              accountName: Text(
                widget.user.name.toString(),
                textScaleFactor: 1.5,
              ),
              accountEmail: Text(widget.user.email.toString()),
              currentAccountPicture: CachedNetworkImage(
                imageUrl: "$imageUrl${widget.user.avatar}",
                imageBuilder: (context, imageProvider) => CircleAvatar(
                  backgroundImage: imageProvider,
                ),
                placeholder: (context, url) => const CircleAvatar(
                  // 加载中也可以先显示默认图
                  backgroundImage: AssetImage('assets/logos/tempprofile.png'),
                ),
                errorWidget: (context, url, error) => const CircleAvatar(
                  // 加载失败显示默认图
                  backgroundImage: AssetImage('assets/logos/tempprofile.png'),
                ),
              ),
            ),
          ),
          Expanded(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [],
            ),
          )
        ],
      ),
    );
  }
}

方案2：不使用第三方库，原生实现 #

如果你不想引入额外依赖，可以用原生FadeInImage.assetNetwork的错误回调能力实现，修改currentAccountPicture的代码如下即可：

currentAccountPicture: CircleAvatar(
  backgroundImage: FadeInImage.assetNetwork(
    placeholder: 'assets/logos/tempprofile.png',
    image: "$imageUrl${widget.user.avatar}",
    imageErrorBuilder: (context, error, stackTrace) {
      // 加载失败时返回默认图片
      return Image.asset('assets/logos/tempprofile.png');
    },
  ).image,
),

注意：两种方案都需要确保你已经在pubspec.yaml的flutter节点下正确声明了assets资源：

flutter:
  assets:
    - assets/logos/tempprofile.png

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