【Flutter】Flutter 资源文件使用 ( 导入资源图片 | 使用图片资源 )（一）

文章目录

一、Flutter 导入资源图片

二、Flutter 使用资源图片

三、完整代码示例

四、相关资源

一、Flutter 导入资源图片

Flutter 资源路径配置 : 资源路径在根目录中的 pubspec.yaml 配置文件中配置 ;

将 flutter 节点下的 assets 节点的注释打开 , 即删除前面的 # 注释符号 ;

然后在 flutter 项目根目录创建 images 目录 , 将图片 hunter.png 拷贝到该 images 目录中 ;

并在 pubspec.yaml 配置文件的 assets 节点下配置 - images/hunter.png 信息 ;

# 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/hunter.png

之后就可以在 flutter 项目中使用该文件了 ;

下图展示了资源文件目录结构以及配置文件中的配置信息 ;

导入资源图片样式 :

二、Flutter 使用资源图片

Image 组件中使用资源图片 , 在其 image 字段使用 AssetImage 类型的图片即可 ;

代码示例 : 设置一个 200 x 200 大小的 Image 组件 , 显示 images/hunter.png 资源图片 ;

Image(
  width: 200,
  height: 200,
  image: AssetImage("images/hunter.png"),
)