Flutter应用中SVG图片无法正常加载显示的问题求助

问题现象 #

开发Flutter应用时，使用flutter_svg包加载SVG图片，仅Add分类的SVG能显示（效果不符合预期），其余分类的SVG完全无法显示。已通过CategoryModel存储图片路径，确认路径正确，尝试过CircleAvatar和Container组件，问题依旧。

相关代码 #

CategoryModel模型代码 #

class CategoryModel {
  final String categoryType;
  final String categoryImage;

  CategoryModel({
    required this.categoryType,
    required this.categoryImage,
  });
}

List<CategoryModel> categoryList = [
  CategoryModel(
    categoryType: 'Add',
    categoryImage: 'assets/images/CirclesFour.svg',
  ),
  CategoryModel(
    categoryType: 'All',
    categoryImage: 'assets/images/CirclesFour.svg',
  ),
  CategoryModel(
    categoryType: 'Mobiles',
    categoryImage: 'assets/images/mobileImage.svg',
  ),
  CategoryModel(
    categoryType: 'Laptop',
    categoryImage: 'assets/images/laptopImage.svg',
  ),
  CategoryModel(
    categoryType: 'Electronics',
    categoryImage: 'assets/images/electronicsImage.svg',
  ),
];

SVG调用组件代码 #

Size size = MediaQuery.of(context).size;
return SizedBox(
  height: size.height * 0.14,
  child: ListView.builder(
      itemCount: categoryList.length,
      scrollDirection: Axis.horizontal,
      itemBuilder: (_, index) {
        return Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 10),
              child: CircleAvatar(
                backgroundColor: Colors.transparent,
                radius: 30,
                child: SvgPicture.asset(
                  categoryList[index].categoryImage,
                  color: Colors.black,
                  width: 20,
                  height: 20,
                ),
              ),
            ),
            SizedBox(
              height: size.height * 0.005,
            ),
            Text(categoryList[index].categoryType),
          ],
        );
      },
   ),
);

资产目录结构 #

排查与解决步骤 #

1. 检查pubspec.yaml配置
   确保flutter_svg依赖已正确添加，且资产路径配置无误：

   dependencies:
     flutter:
       sdk: flutter
     flutter_svg: ^2.0.9 # 使用最新稳定版本
   
   assets:
     - assets/images/
   

   配置后执行flutter pub get，并重启应用（热重载可能不生效）。

2. 验证SVG文件合法性
   部分SVG文件可能存在语法问题（如未闭合标签、不兼容属性），导致flutter_svg无法解析：

   • 直接用浏览器打开SVG文件，确认文件本身能正常显示
   • 简化SVG内容，移除不必要的复杂滤镜、渐变或脚本代码

3. 调整SvgPicture参数

   • 移除color属性测试：部分SVG的填充/描边设置可能与该参数冲突，导致图片不显示
   • 添加fit: BoxFit.contain属性，确保图片在容器内正确适配
   • 暂时去掉CircleAvatar，用Container直接包裹SvgPicture，排除组件嵌套影响：

     Container(
       width: 60,
       height: 60,
       child: SvgPicture.asset(
         categoryList[index].categoryImage,
         fit: BoxFit.contain,
       ),
     )
     

4. 清理缓存并重启

   • 执行flutter clean清理项目缓存，再重新运行应用
   • 确保模拟器/真机上的应用已完全卸载后重新安装

5. 检查文件名大小写
   Flutter对资产文件名大小写敏感，确认代码中的路径与实际文件名完全一致（比如mobileImage.svg和MobileImage.svg是不同路径）

内容的提问来源于stack exchange，提问作者Syed Mujtaba Ali