小知识，大挑战！本文正在参与“程序员必备小知识”创作活动

Flutter图片加载

大家都知道flutter添加图片很麻烦，加完图片后，一定要在pubspec.yaml中写上路径。

然后使用的时候也还是要硬编码，比如下面这样：

static final add = Image.asset('res/assets/add.png', fit: BoxFit.cover);

Flutter图片加载的原则就是上面这样，只要不出错，图片就能加载出来，但我们一般不会只添加几张图片，一个App一定是有好多图片的，如果说添加图片的时候只能一张一张加，没办法。那么pubspec.yaml文件我们有好用的插件可以使用，下面就来介绍一下，我一直使用的一款插件，一键导入图片路径，并且避免硬编码的尴尬。

flutter-img-sync

这个插件，在VSCode扩展里面搜flutter-img-sync就能看到了，下面具体描述一下使用方法，并且需要注意的点。

安装

在扩展商店里搜到这个插件，下载安装。

修改pubspec.yaml

pubspec.yaml文件的assets路径修改，格式保持下面的格式

assets:
    # assets-generator-begin
    # res/assets/*  填写自己的图片路径

    # assets-generator-end

使用命令FlutterImgSync

当pubspec.yaml文件修改之后，呼出命令面板，输入FlutterImgSync，回车。

我们回过来再看我们的pubspec.yaml文件，刚刚修改路径的那个地方应该已经添加上了我们项目中的所有图片的路径。

同时，我们项目中应该也多了一份文件，r.dart

可以看到，r.dart这份文件中多了一个类R，里面定义了一些静态变量，就是项目中所有图片的路径，类似于R.swift这种文件，通过脚本把一些资源文件定义出来，便于以后使用。

使用方法

接下来使用的时候就简单了，我们直接使用R.就可以了，使用过R.swift的同学应该很擅长这种方式，不会出现硬编码写错的情况。

感谢阅读

好啦，这次的文章算是一个小Tips，以后也会有一些这种好用的小工具的分享，希望对同学们有用。

喜欢的话，点个赞吧 😁😁😁