详解flutter中本地资源图片的使用

简介: flutter中我们想加载本地图片,需要两步:

一. flutter中我们想加载本地图片,需要两步:


  1. 在项目中创建images文件夹,然后在images文件夹(这个名字可以随便命名,一般我们会命名为images)下创建2.0x(2倍图)和3.0x(3倍图)两个文件夹(ps:我们的本地资源图片一般只需要2.0x和3.0x就可以了,1.0x和4.0x通常不需要),并将图片放入对应的文件夹中(注意:图片的名字要一样。比如:2.0x/home.png  3.0x/home.png)



image.png


  1. 需要在pubspec.yaml这个配置文件中设置图片的路径,如下格式。注意这里路径不用加2.0x和3.0x


flutter:
  assets:
    - images/home.png


二. flutter项目中本地图片加载的原理


在加载图片时,系统自动会根据屏幕分辨率优先选择到符合自己分配率的文件夹(2.0x或者3.0x或者4.0x)下去取相对应的图片,如果当前文件夹下没有,则会到低一倍的文件夹下去,如果还没有,则继续向更低一倍去取。(比如:iOS 5.5英寸及以上屏幕会优先选择去3.0x下去取图片,如果3.0x不存在或者3.0x文件夹下没有,则去2.0x下取;如果2.0x不存在或者2.0x下没有,则去1.0x下取;1.0x下再没有,则在images文件下取)。



image.png


image.png


image.png


相关文章
|
缓存 Java 开发工具
Flutter的文本、图片和按钮使用
Flutter的文本、图片和按钮使用
126 0
|
存储 前端开发 文件存储
Flutter笔记:关于应用程序中提交图片作为头像
1. 头像选择与提交的一般步骤Flutter笔记关于应用程序中提交图片作为头像作者目 录1. 头像选择与提交的一般步骤2. 选择本地文件到头像的示例代码3. 将图像提交到后端1. 头像选择与提交的一般步骤image将处理后的图像作为用户的头像显示在应用程序中。您可以使用Image或小部件来加载和显示图像。这些步骤涵盖了从选择图像到上传、处理和显示图像的基本流程。请根据您的具体需求和后端实现来自定义这些步骤。此外,确保您的应用程序有适当的权限以访问设备上的相册或相机,这通常需要在和。
298 0
|
2月前
|
开发框架 UED 计算机视觉
flutter:图片&stful 生命周期 (三)
本文档介绍了如何在Flutter中处理图片,包括加载网络图片、本地图片、创建圆形图片和带有圆角的图片,以及如何配置`pubspec.yaml`文件来添加资源文件。还展示了如何使用`AssetImage`对象来显示本地资源图片,并通过代码示例详细说明了这些操作的实现方法。最后,简要介绍了StatefulWidget的生命周期。
|
4月前
|
缓存
Flutter Image从网络加载图片刷新、强制重新渲染
Flutter Image从网络加载图片刷新、强制重新渲染
135 1
|
5月前
|
Shell Android开发 Python
Flutter如何正确使用图片资源
Flutter如何正确使用图片资源
80 0
|
5月前
Flutter-自定义图片3D画廊
Flutter-自定义图片3D画廊
90 0
|
7月前
flutter 引用图片资源遇到的问题
flutter 引用图片资源遇到的问题
88 1
|
7月前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
168 0
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
7月前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
49 0
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
7月前
|
Dart
Flutter 学习之图片的选择、裁切、保存
Flutter 学习之图片的选择、裁切、保存 在Flutter中,我们可以通过调用系统的图片选择器来选择一张图片,也可以通过使用插件来实现图片的裁切和保存。
363 0