如何在Flutter中无网络且无缓存时用SvgPicture.network加载SVG图片？

核心思路 #

利用SvgPicture.network自带的errorBuilder参数捕获加载失败场景（包括无网络、无缓存、资源失效等），直接降级显示本地预置的SVG资源；若需确保已加载资源离线可用，可结合缓存工具简化管理。

具体实现步骤 #

1. 配置本地备用SVG资源 #

将备用SVG文件放入项目assets/svg/目录，在pubspec.yaml中声明资源路径：

flutter:
  assets:
    - assets/svg/offline_placeholder.svg
    - assets/svg/loading_placeholder.svg # 可选：加载中占位图

2. 基础实现：直接通过errorBuilder降级 #

无需额外依赖，仅利用SvgPicture.network的错误回调即可覆盖所有加载失败场景：

import 'package:flutter_svg/flutter_svg.dart';

Widget networkSvgWithFallback(String svgUrl) {
  return SvgPicture.network(
    svgUrl,
    width: 193,
    height: 193,
    // 加载过程中显示占位图
    placeholderBuilder: (context) => SvgPicture.asset(
      'assets/svg/loading_placeholder.svg',
      width: 193,
      height: 193,
    ),
    // 加载失败（无网/无缓存/资源不存在）时显示本地备用图
    errorBuilder: (context, error, stackTrace) {
      return SvgPicture.asset(
        'assets/svg/offline_placeholder.svg',
        width: 193,
        height: 193,
      );
    },
  );
}

3. 进阶优化：结合缓存实现离线复用 #

如果需要确保已加载过的SVG能离线访问，可使用cached_network_image配合flutter_svg自动管理缓存：

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter_svg/flutter_svg.dart';

Widget cachedNetworkSvgWithFallback(String svgUrl) {
  return CachedNetworkImage(
    imageUrl: svgUrl,
    width: 193,
    height: 193,
    placeholder: (context, url) => SvgPicture.asset('assets/svg/loading_placeholder.svg'),
    errorWidget: (context, url, error) => SvgPicture.asset('assets/svg/offline_placeholder.svg'),
    imageBuilder: (context, imageProvider) => SvgPicture(
      imageProvider,
      width: 193,
      height: 193,
    ),
  );
}

关键说明 #

• errorBuilder是核心：无论加载失败原因是网络断开、缓存未命中还是资源无效，都会触发该回调，直接返回本地SVG即可完成降级。
• 网络状态检测可选：无需额外判断网络，因为errorBuilder已覆盖所有加载失败场景；若需在无网时提前提示，可结合connectivity_plus包补充逻辑。
• 缓存工具简化管理：cached_network_image自动处理网络资源的缓存、过期逻辑，无需手动实现缓存机制，确保已加载资源离线可用。

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