Flutter中Hero组件复用网络SVG图片的缓存实现问题

要解决SVG图片在Hero组件中重复网络加载的问题，可以结合cached_network_image的缓存能力和flutter_svg的SVG解析能力，核心思路是先将SVG文件缓存到本地，再读取本地缓存文件展示，避免重复请求网络。

步骤1：确认依赖 #

确保pubspec.yaml中已添加以下依赖：

dependencies:
  flutter_svg: ^latest_version
  cached_network_image: ^latest_version

步骤2：实现缓存SVG的Hero组件 #

直接使用DefaultCacheManager获取缓存的SVG文件，再通过SvgPicture.file加载，同时包裹Hero组件：

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

// 页面1和页面2中使用的组件
Hero(
  tag: 'randomTag',
  child: FutureBuilder<File>(
    future: DefaultCacheManager().getSingleFile("你的SVG网络地址"),
    builder: (context, snapshot) {
      if (snapshot.hasData) {
        // 缓存成功，加载本地SVG文件
        return SvgPicture.file(
          snapshot.data!,
          fit: BoxFit.contain,
        );
      } else if (snapshot.hasError) {
        // 加载失败占位符
        return const Icon(Icons.broken_image, color: Colors.grey);
      } else {
        // 加载中占位符
        return const CircularProgressIndicator();
      }
    },
  ),
)

步骤3：封装复用组件（可选） #

如果需要在多个页面复用，可以封装成自定义组件：

class CachedSvgHero extends StatelessWidget {
  final String tag;
  final String svgUrl;
  final BoxFit fit;

  const CachedSvgHero({
    super.key,
    required this.tag,
    required this.svgUrl,
    this.fit = BoxFit.contain,
  });

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: tag,
      child: FutureBuilder<File>(
        future: DefaultCacheManager().getSingleFile(svgUrl),
        builder: (context, snapshot) {
          switch (snapshot.connectionState) {
            case ConnectionState.done:
              if (snapshot.hasData) {
                return SvgPicture.file(snapshot.data!, fit: fit);
              }
              return const Icon(Icons.broken_image);
            case ConnectionState.waiting:
              return const CircularProgressIndicator();
            default:
              return const Icon(Icons.error);
          }
        },
      ),
    );
  }
}

在页面中调用：

CachedSvgHero(tag: 'randomTag', svgUrl: "你的SVG网络地址")

原理说明 #

• DefaultCacheManager会自动将SVG文件下载并缓存到本地，后续请求直接读取缓存文件，避免重复网络请求。
• SvgPicture.file直接解析本地缓存的SVG文件，保证矢量图的清晰度，同时兼容Hero组件的过渡动画。

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