如何使用jovial_svg加载本地assets目录中的SVG文件

第一步：确认Assets配置 #

先检查pubspec.yaml里是否正确声明了SVG文件，路径要和实际文件位置一致，注意缩进格式：

flutter:
  assets:
    - assets/your_svg_file.svg  # 替换为你的SVG文件路径

第二步：正确加载本地SVG #

ScalableImageSource.fromSvg()并不直接支持传入assets路径，你需要先通过Flutter的资源加载器读取SVG内容，再传递给jovial_svg的解析方法。下面是完整实现代码：

import 'package:flutter/services.dart';
import 'package:jovial_svg/jovial_svg.dart';

class LocalSvgWidget extends StatelessWidget {
  const LocalSvgWidget({super.key});

  Future<ScalableImage> _loadSvgFromAssets() async {
    // 读取assets中的SVG字符串
    final svgContent = await rootBundle.loadString('assets/your_svg_file.svg');
    // 解析为ScalableImage
    final scalableImage = await ScalableImageSource.fromSvgString(svgContent).resolve();
    return scalableImage;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<ScalableImage>(
      future: _loadSvgFromAssets(),
      builder: (ctx, snapshot) {
        if (snapshot.hasData) {
          return ScalableImageWidget(si: snapshot.data!);
        } else if (snapshot.hasError) {
          return Text('加载失败: ${snapshot.error}');
        }
        // 加载中显示进度条
        return const CircularProgressIndicator();
      },
    );
  }
}

常见问题排查 #

• 路径错误：确保pubspec.yaml中的路径和代码里的路径完全一致，Flutter对路径大小写敏感
• 未执行pub get：修改pubspec.yaml后必须执行flutter pub get，并重启应用（热重载可能不生效）
• 大文件处理：如果SVG文件过大，用字节流读取更高效：

  final assetData = await rootBundle.load('assets/your_svg_file.svg');
  final svgContent = String.fromCharCodes(assetData.buffer.asUint8List());
  

内容的提问来源于stack exchange，提问作者Hüseyin Sezen