flutter加载本地图片

一、步骤

1.在工程根目录下创建images文件夹，将图片放入该目录中

 

2.在工程pubspec.xml文件中，找到flutter，添加刚才放入的图片

# The following section is specific to Flutter.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/icon_settings.png

3.在代码中加载本地图片，有两种方式

// 方式一
Image(
  image: AssetImage('images/icon_settings.png'),
  width: 24,
  height: 24,
),

// 方式二
Image.asset('images/icon_settings.png',
  width: 24,
  height: 24,
),

flutter加载本地图片步骤很简单，但里面有许多需要注意的点，不然很容易报错，踩坑 。

二、注意的点

1.在pubspec.yaml文件中添加图片时，由于 yaml 文件对缩进严格，所以必须严格按照每一层两个空格的方式进行缩进，此处 assets 前面应有两个空格。即assets要比flutter缩进两格，与上面默认的uses-material-design对齐，缩进格式不对的话会报如下错误：

Error detected in pubspec.yaml:
Error on line 48, column 4: Expected a key while parsing a block mapping.
   ╷
48 │    assets:
   │    ^
   ╵

相信有不少小伙伴是直接使用快捷键取消工程原本模板中的assets内容，就会出现此编译错误，重新对齐编译就好。

注：assets下的图片不需要严格的按照两格的缩进，但是图片前的间隔符-必须要有，并且图片和间隔符至少要有一个空格，不然也会报错：

错误一：

  # To add assets to your application, add an assets section, like this:
  assets:
    images/icon_settings.png

错误一报错如下： 

Error detected in pubspec.yaml:
Expected "assets" to be a list, but got images/icon_settings.png (String).

错误二：

  # To add assets to your application, add an assets section, like this:
  assets:
    -images/icon_settings.png

 错误二报错如下：

Error detected in pubspec.yaml:
Expected "assets" to be a list, but got -images/icon_settings.png (String).

不会报错的写法： 

正确一：标准写法

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/icon_settings.png

正确二：间隔符-比assets缩进三格

  # To add assets to your application, add an assets section, like this:
  assets:
     - images/icon_settings.png

正确三：间隔符-后两个空格

  # To add assets to your application, add an assets section, like this:
  assets:
    -  images/icon_settings.png

正确四：间隔符-比assets缩进三格，并且后两个空格

  # To add assets to your application, add an assets section, like this:
  assets:
     -  images/icon_settings.png

建议大家都采用标准写法，避免出现错误找不到地方，同时也保证了代码规范~

2.pubspec.yaml文件assets声明时、代码中使用图片时，要确保图片名称及后缀都与images目录下图片名称及后缀保持一致，由于flutter在引用资源时不会有代码智能提示，资源都得手动写入，比较容易出现文件名书写错误的问题。图片的后缀类型如png也必须加上。

建议大家images下的图片名称采用全小写加下划线的方式书写（如：icon_settings.png），然后复制图片的全名称（图片名+类型）添加到yaml文件和代码文件中。

3.images目录下可以再创建子目录，子目录里的图片在声明或加载时要写全路径：

yaml中声明：

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/me/icon_avatar.png
    - images/icon_settings.png

 代码中加载：

// 方式一
Image(
  image: AssetImage('images/me/icon_avatar.png'),
  width: 24,
  height: 24,
),

// 方式二
Image.asset('images/me/icon_avatar.png',
  width: 24,
  height: 24,
),

小技巧：yaml文件中声明图片时，可以只声明目录，这样目录下所有的图片都会被声明，不用再麻烦声明每一个图片：

  # To add assets to your application, add an assets section, like this:
  assets:
    - images/me/

 注意，只声明目录时，后面的反斜杠/必须带上，否则会报如下错误：

Error detected in pubspec.yaml:
No file or variants found for asset: images/me.

4. 加载项目中所有第三方依赖包中的本地图片时，需要在代码中添加包名；而加载项目自身的本地图片时，则不需要添加包名。不按要求都会报错！！！

// 加载自身的图片，不需要加package包名
Image.asset('images/icon_settings.png',
  width: 24,
  height: 24,
),

// 加载依赖包中的图片，需要加package包名
Image.asset('images/icon_share.png',
  width: 24,
  height: 24,
  package: 'com.xxx.xxx', //正确的依赖包包名
),