前语

本文主要将图片的加载，加载办法包含本地和网络，同时引证第三方图片缓存结构档案里，趁便介绍三方结构的引入

flutter中类似github的三方仓库地址、国内服务器地址(推荐)

demo地址(内容在loadImage文件夹中，能够替换main中注释测验效果)

本地图片加载

本地图片的加载，加载之前，先介绍图片的导入与途径装备作业

第一步：创建一个存放图片的目录，放到与 ios、android同级目录即可，一般为 images 或 assets

image.png

第二步：翻开pubspec.yaml文件，在 assets撤销注释在下面，依照下面格局导入途径称号(能够经过拖拽到终端截取)，装备如下所示（看了下图或许现已知道怎样加载android、ios中的资源图片了）

image.png

假如运转失利,能够测验点击pubspec.yaml文件内容的右上方 Pub get 或许 Pub upgrade

image.png

运用 Image.asset 加载本地图片，代码如下所示

//推荐
Image.asset("images/WechatIMG21002.jpeg")
//加载办法2，其间 AssetImage 承继了 ImageProvider，在一些当地需求用到
Image(image: AssetImage('images/WechatIMG21002.jpeg'))

加载android和ios中的资源文件

和一般的本地资源文件加载办法相同，只不过先找到他们的资源途径方位

android的资源方位: android/app/src/main/res

image.png

ios的资源方位: ios/Runner/Assets.xcassets

image.png

然后装备到 pubspec.yaml文件中，如下所示(或许看了前面的图片装备大家就猜到了)

image.png

然后运用 Image.asset 加载，完成如下所示

//加载android的资源图片
Image.asset("android/app/src/main/res/mipmap-mdpi/ic_launcher.png")
//加载一个ios的资源图片
Image.asset("ios/Runner/Assets.xcassets/logo.imageset/logo.png")

网络图片加载

网络图片加载则省去了本地图片的加载过程，直接运用 Image.network 加载，如下所示

//加载办法1
Image.network("https://img0.baidu.com/it/u=2907855715,3034528164&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500")
//加载办法2 NetworkImage 承继了 ImageProvider
Image(image: 
NetworkImage("https://img0.baidu.com/it/u=2907855715,3034528164&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500")),

趁便介绍下FadeInImage，其为突变式显现网络图片，即：下载完毕后，选用突变的办法显现图片，能够李继伟为透明度改变的办法显现图片，使图片显现没那么突兀了（个人感觉也就那样吧，还是直接显现来的爽快）

FadeInImage.assetNetwork(
  placeholder: "images/WechatIMG21002.png", //预览图
  fit: BoxFit.fitWidth, //自适应宽度
  height: 140, //能够设置高度
  image: "https://img0.baidu.com/it/u=2907855715,3034528164&fm=253&fmt=auto&app=138&f=JPEG?w=890&h=500",
),

三方安装以及图片缓存控件运用

图片的缓存结构咱们运用 cached_network_image 结构，并以它的导入过程作为案例演示

执行下面指令即可导入，导入后的依靠也会被放到 pubspec.yaml中

flutter pub add cached_network_image

导入后的依靠也会被放到 pubspec.yaml中，能够在 pubspec.yaml文件中，更改自己想要的版本号，假如提示运转问题，能够在该文件上面点击 Pub get 或 Pub upgrade 更新环境

pubspec.yaml中的依靠如下所示，能够根据状况更改版本号，然后点击右上角 Pub upgrade即可

dependencies:
  cached_network_image: ^3.2.0

导入到工程后，项目文件 import 如下所示（运用体系提示导入更快捷）

import 'package:cached_network_image/cached_network_image.dart';

运用如下所示

//默许运用
CachedNetworkImage(
    imageUrl: "https://img2.baidu.com/it/u=479460895,312746087&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500"
)
//带placeholder和错误占位的
CachedNetworkImage(
    imageUrl: "https://img2.baidu.com/it/u=479460895,312746087&fm=253&fmt=auto&app=120&f=JPEG?w=889&h=500",
    placeholder: (context, url) => CircularProgressIndicator(),
    errorWidget: (context, url, error) => Icon(Icons.error),
 ),
//带加载指示组件的
CachedNetworkImage(
    imageUrl: "http://via.placeholder.com/350x150",
    progressIndicatorBuilder: (context, url, downloadProgress) => 
            CircularProgressIndicator(value: downloadProgress.progress),
    errorWidget: (context, url, error) => Icon(Icons.error),
 ),
//想对图片进行加工或许装修能够走imageBuilder
CachedNetworkImage(
  imageUrl: "http://via.placeholder.com/200x150",
  imageBuilder: (context, imageProvider) => Container(
    decoration: BoxDecoration(
      image: DecorationImage(
          image: imageProvider,
          fit: BoxFit.cover,),
      borderRadius: const BorderRadius.all(Radius.circular(6)),
    ),
  ),
  placeholder: (context, url) => CircularProgressIndicator(),
  errorWidget: (context, url, error) => Icon(Icons.error),
),
CachedNetworkImageProvider 承继了 ImageProvider
CachedNetworkImageProvider(url) 
Image(image: CachedNetworkImageProvider(url)) //也能够经过该办法获取widget

留意：假如项目运转到 ios 模拟器或许iphone，卡到了 pod install指令，假如 pod 自身没什么问题，那么能够翻开podfile文件，将platform 将前面的#去掉，在测验即可

image.png

最后

这里将三方的导入，fluter社区的地址也贴上了，快来测验开发吧

也能够测试一下demo，效果还不错