flutter引用图片,flutter图片下载

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

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

二. 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文件下取)。

相关问答

Q1: Flutter中webview添加图片的长按操作

开发过程工我们会用webview显示一些活动或是变动比较频繁的页面,若是webview中包含图片,一般会有保存图片的需求,我们可以采用js交互的形式获取图片的url,话不多说直接看操作

获取点击位置的element,中的src值,即可

补充问题

1、在安卓设备上发现长按手势并没有调用，翻看 webview_flutter 发现需要设置安卓的类型，展示webview之前设置

2、获取到的url也就是开始返回的value值，安卓会带有”“，需要自行去掉

Q2: Flutter 本地图片导入 2倍图 3倍图

1、flutter项目中分别创建assets、images文件夹，在images文件夹下创建 2.0x 和 3.0x文件夹，用来分别存放2倍图3倍图。

层级结构如图下图:

2、在pubspec.yaml进行配置 (注意flutter下 assets:与uses-material-design: 层级结构要左对齐否则会报错 点击查看错误展示 )

3、cd 进入 flutter 项目目录下，终端执行 flutter pub get 命令，使配置生效

4、图片使用

Q3: Flutter_图片分辨率适配及批量拓展使用

flutter开发中，图片的引用是必不可少的，所以为了提高效率和精准度，我们需要对不同分辨率的手机使用相对应的切图图片，本章介绍如何进行 图片分辨率适配 和 图片批量拓展处理 。

flutter中会首先根据系统的devicePixelRatio（每一个逻辑像素包含多少个原始像素，可以通过MediaQueryData.devicePixelRatio来得到）来找对应倍数的文件夹下的图片，如果没有对应倍数，找最接近的。

所以在flutter项目中，我们需要构建对应的倍数像素文件夹

之后再pubspec.yaml中，配置assets文件后就可以使用了（如使用"assets/images/jay.png"，会自动适配该像素下最接近的jay图片）。

使用flutter-img-sync插件批量化处理，具体操作如下

目前还不能处理gif、webp等格式的图片，而且如果和上边介绍的不同像素比适配方案一起使用的话，由于进行了精准定位，所以指定图片后就不能进行像素适配，这是目前还存在的较大问题，所以目前两者方案只能暂时取一使用。