flutter 图片加载和预览实现

注:本文只提供了思路，并无完整性demo

使用的是cached_network_image
因为版本变革经常头大 而且需要自己对源码做些修改 建议github fork一下
然后导入自己的地址
类似
dependencies:
cached_network_image:
git: https://github.com/tangtaoit/flutter_cached_network_image.git

首先先简单封装一下方便使用 preview 为占位图
import ‘package:cached_network_image/cached_network_image.dart’;
import ‘package:flutter/cupertino.dart’;
import ‘package:flutter/material.dart’;

class BCImageHelper {
/// 获取默认image
static Widget getImage(String imageUrl,
{double height,
double width,
BoxFit fit,
Widget preview,
int fadeOutDuration,
int fadeInDuration}) {
Widget placeHolderWidget;
if (preview != null) {
placeHolderWidget = preview;
}
if (imageUrl == null || imageUrl == “”) {
return Container(
height: height,
width: width,
);
}
return CachedNetworkImage(
fadeOutDuration: Duration(milliseconds: fadeOutDuration ?? 0),
fadeInDuration: Duration(milliseconds: fadeInDuration ?? 0),
imageUrl: imageUrl,
height: height,
width: width,
fit: fit,
placeholder: placeHolderWidget,
errorWidget: Image.asset(“assets/errorimage.png”),
);
}
}

说明: imageSmallUrl缩略图(一般外部列表中都已经加载完成了) imageBigUrl需要呈现给用户的尺寸图

点击外部列表的缩略图 调用showDialog();

Dialog中图片呈现： BCImageHelper.getImage(imageBigUrl, fit: BoxFit.contain, preview: _preview(imageSmallUrl)),

//缩略图样式。一个帧布局 传回做占位图从而实现预览加laoding的视觉效果
_preview(String imageSmallUrl) {
return Stack(
alignment: AlignmentDirectional.center,
children: [
BCImageHelper.getImage(imageSmallUrl, fit: BoxFit.contain),
CupertinoActivityIndicator(),
],
);
}