Flutter项目中SvgPicture.asset报错未定义，如何正确导入SVG图标？

问题场景 #

在Flutter项目的home.dart中尝试给AppBar添加SVG图标，代码如下：

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text(
            'Breakfast',
            style: TextStyle(
              color:Colors.black,
              fontSize: 18,
              fontWeight: FontWeight.bold
            ),
          ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0.0,
        leading:Container(
          margin:EdgeInsets.all(10),
          alignment: Alignment.center,
          child: SvgPicture.asset(
            'assets/icons/arrow-left.svg',
            height:20,
            width:20,
          ),
          decoration: BoxDecoration(
            color:Color(0xffF7F8F8),
            borderRadius: BorderRadius.circular(10)
          ),
        ),
        actions:[
          Container(
          margin:EdgeInsets.all(10),
          alignment: Alignment.center,
          width:37,
          child: SvgPicture.asset(
            'assets/icons/dots.svg',
            height:5,
            width:5,
          ),
          decoration: BoxDecoration(
            color:Color(0xffF7F8F8),
            borderRadius: BorderRadius.circular(10)
          ),
        ),
        ]
      ),
    );
  }
}

IDE提示错误：Undefined name 'svgPicture'. Try correcting the name to one that is defined, or defining the name.

已完成操作：

• SVG图标已放置在assets/icons目录
• 执行过flutter pub get
• 已在pubspec.yml中配置资源

问题原因 #

Flutter原生框架不包含SvgPicture组件，这个组件来自第三方包flutter_svg，你没有引入该依赖包，也未在代码中导入对应的库，导致IDE无法识别SvgPicture。

解决步骤 #

1. 添加flutter_svg依赖
   打开项目根目录的pubspec.yaml，在dependencies区块中添加该包：

dependencies:
  flutter:
    sdk: flutter
  flutter_svg: ^2.0.9 # 可替换为最新稳定版本

添加后执行命令：

flutter pub get

2. 在代码中导入包
   在home.dart的开头添加导入语句：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart'; // 新增此行

3. 确认资源配置正确性
   检查pubspec.yaml中的资源配置，确保格式正确：

flutter:
  assets:
    # 方式1：逐个指定图标文件
    - assets/icons/arrow-left.svg
    - assets/icons/dots.svg
    # 方式2：批量导入整个目录（末尾斜杠不能省略）
    # - assets/icons/

4. 重启IDE（必要时）
   若修改后IDE仍报错，重启VSCode/Android Studio，让IDE重新加载依赖和代码。

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