Firebase UI Auth ProfileScreen加载用户头像随机抛错致应用崩溃求助

问题分析 #

用户头像属于非关键功能，但firebase_ui_auth的ProfileScreen使用NetworkImage加载头像时，Web端遇到HTTP 403错误会抛出未捕获异常（来自_network_image_web.dart），直接导致应用崩溃。浏览器可正常访问图片是因为浏览器不会因图片加载失败抛出中断性异常，但Flutter的NetworkImage实现会在请求失败时主动抛出异常。

解决方案 #

方案1：自定义头像组件（推荐）

利用ProfileScreen的avatar参数替换默认头像组件，使用Image.network并配置errorBuilder处理加载失败场景，从根源避免异常扩散：

return Scaffold(
  body: ProfileScreen(
    avatar: (user) {
      return CircleAvatar(
        child: Image.network(
          user.photoURL ?? '',
          fit: BoxFit.cover,
          errorBuilder: (context, error, stackTrace) {
            // 加载失败时显示默认占位头像
            return const Icon(Icons.person, size: 40);
          },
        ),
      );
    },
  ),
);

通过errorBuilder直接捕获加载错误并返回备用UI，彻底杜绝异常抛出导致的崩溃。

方案2：局部覆盖ErrorWidget处理异常

如果无法自定义头像组件，可在ProfileScreen的上下文范围内临时替换ErrorWidget.builder，精准拦截NetworkImage加载异常：

return Scaffold(
  body: Builder(
    builder: (context) {
      final originalErrorBuilder = ErrorWidget.builder;
      
      // 临时替换ErrorWidget构建逻辑
      ErrorWidget.builder = (FlutterErrorDetails details) {
        if (details.exception is NetworkImageLoadException) {
          // 针对头像加载异常返回占位UI
          return const CircleAvatar(child: Icon(Icons.person));
        }
        // 其他异常沿用原有处理逻辑
        return originalErrorBuilder(details);
      };

      final profileScreen = ProfileScreen();

      // 页面渲染完成后恢复原ErrorWidget构建器
      WidgetsBinding.instance.addPostFrameCallback((_) {
        ErrorWidget.builder = originalErrorBuilder;
      });

      return profileScreen;
    },
  ),
);

该方法通过局部拦截异常Widget，将头像加载失败的异常转化为占位UI，不会影响应用整体运行。

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