详解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


相关文章
|
7月前
|
缓存 Java 开发工具
Flutter的文本、图片和按钮使用
Flutter的文本、图片和按钮使用
67 0
|
8月前
|
存储 前端开发 文件存储
Flutter笔记:关于应用程序中提交图片作为头像
1. 头像选择与提交的一般步骤Flutter笔记关于应用程序中提交图片作为头像作者目 录1. 头像选择与提交的一般步骤2. 选择本地文件到头像的示例代码3. 将图像提交到后端1. 头像选择与提交的一般步骤image将处理后的图像作为用户的头像显示在应用程序中。您可以使用Image或小部件来加载和显示图像。这些步骤涵盖了从选择图像到上传、处理和显示图像的基本流程。请根据您的具体需求和后端实现来自定义这些步骤。此外,确保您的应用程序有适当的权限以访问设备上的相册或相机,这通常需要在和。
186 0
|
4天前
flutter 引用图片资源遇到的问题
flutter 引用图片资源遇到的问题
12 1
|
11天前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
11天前
|
XML JSON 前端开发
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
【4月更文挑战第30天】Flutter是谷歌的开源前端框架,因其高性能、流畅UI和多端运行能力受开发者喜爱。本文聚焦于Flutter中的资源加载:使用`Image`组件加载静态、网络和本地图片;通过`video_player`库加载和播放视频;利用`http`包进行网络资源请求。掌握这些技巧将有助于提升Flutter应用的开发效率和质量。
【Flutter前端技术开发专栏】Flutter中的图片、视频与网络资源加载
|
5月前
|
Dart
Flutter 学习之图片的选择、裁切、保存
Flutter 学习之图片的选择、裁切、保存 在Flutter中,我们可以通过调用系统的图片选择器来选择一张图片,也可以通过使用插件来实现图片的裁切和保存。
108 0
|
6月前
|
缓存 编解码 JavaScript
快速掌握 Flutter 图片开发核心技能
快速掌握 Flutter 图片开发核心技能
76 0
|
7月前
|
存储 缓存 编解码
Flutter笔记:图片的 precacheImage 函数
precacheImage 是 Flutter 中提供的一个函数。顾名思义,pre预先、cache缓存、Image图片,很容易看出 precacheImage 函数用于预加载图像并将其缓存到图像缓存中。这个函数是非常有用的,因为它可以在用户实际需要显示图像之前,提前将图像加载到内存中,以提高图像的加载速度。这对于提供更好的用户体验和性能非常重要,特别是当项目中有多个图像需要显示时。
85 0
|
10月前
|
存储 Android开发
Flutter控件之图片Image封装
Flutter中偏偏原生的控件,少了很多需要又常用的属性,比如宽高,比如内外边距,又比如点击事件,如果不采取封装,视图的结构会一层嵌套一层,徒增很多的冗余代码,所以,为了简洁代码,还有为了拓展原生组件没有的属性,就不得不进行一次简单的封装,使其在调用的时候,可以很方便的实现某些功能。
|
11月前
|
容器
Flutter的AspectRatio控件实现视频播放、图片播放按照长宽比缩放
Flutter的AspectRatio控件实现视频播放、图片播放按照长宽比缩放