SvgPicture 资源不起作用并显示“尝试将名称连接到已定义的名称，或定义名称”错误

Question

我有一个 Flutter 项目，我制作了一个

home.dart

页面，想要将 svg 中的图标添加到 AppBar，所以这是我的代码：

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 中收到此错误：“未定义名称 'svgPicture'。尝试将名称更正为已定义的名称，或定义名称。”

我已将图标

arrow-left.svg

和

dots.svg

放在

assets/icons

目录中，并运行了命令

flutter pub get

但问题仍然存在！

这是

pubspec.yml

文件：

这是我在 vscode 中的代码截图：

那么这里出了什么问题呢？如何将 svg 图标正确导入到文件中？

Answer 1

您导入了 SVG 包吗？如果是，则运行

flutter clean && flutter pub get