Flutter 显示任何 Svg 图像

Question

我正在尝试为我正在开发的应用程序添加使用 SVG 图像，但 flutter 未加载或显示这些图片：

我有一个从中获取图像的模型

这是模型

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',
  ),
];

我也尝试在上面的代码中使用 Svgpicture.asset 但这对我不起作用，所以我使用了 string 类型

图像在下面的小部件中被调用

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),
              ],
            );
          }),
    );

我导入了Flutter svg包 我也尝试使用容器而不是圆形头像，但似乎没有任何效果 地址是正确的 1 个类别模型（ADD）工作不符合我的要求，但正在工作 这是我的资产的图片

Answer 1

有 Flutter 包

flutter_svg 

这是示例：

final String assetName = 'assets/image_that_does_not_exist.svg';
final Widget svg = SvgPicture.asset(
assetName,
);

按照文档操作

Answer 2

1. 验证 SVG 文件是否正确放置在 asset 文件夹中并确保 CategoryModel 类中指定的文件路径与正确的文件位置匹配。

2. 检查您是否已在 pubspec.yaml 文件中添加了正确的依赖项 处理 SVG 图像。

    dependencies:
        flutter_svg: ^x.xx.x
   

3. 确保您已导入flutter_svg包：

     import 'package:flutter_svg/flutter_svg.dart';
   

4. 通过将资产添加到来确保您的 Flutter 项目了解这些资产 flutter 部分下的 pubspec.yaml 文件：

    flutter:
      assets:
        - assets/images/
   

5. 如果使用热重载，请尝试重新启动您的应用程序

最后，如果问题没有解决，请考虑尝试使用不同的 SVG 图像或将 SVG 文件转换为不同的格式，例如 PNG/JPG，以查看它们是否正确加载。