Flutter 图片全家桶

2020-04-13 本文已影响0人法的空间

大家好，我是戴着口罩眼镜会起雾的200。不得不说Flutter在UI方面，只要是能想到的效果，你用心都能实现。

图片是一个应用中的重要部分，展示，压缩，裁剪，pub三方库应该说是应有尽有。
FlutterCandies 中也有多个关于图片的库,可以说是比较全面了。

extended_image

功能最全面的图片展示库，加粗为最近新增功能

主要功能

缓存网络图片
加载状态(正在加载，完成，失败)
拖拽缩放图片
图片编辑(裁剪，旋转，翻转)
图片预览(跟微信掘金一样)
滑动退出效果(跟微信掘金一样)
设置圆角，边框
支持进度显示
图片预览上滑显示详情(跟图虫一样)

支持进度显示

image

增加loadingProgress参数，用于显示进度。

             ExtendedImage.network(
              'https://raw.githubusercontent.com/fluttercandies/flutter_candies/master/gif/extended_text/special_text.jpg',
              handleLoadingProgress: true,
              clearMemoryCacheIfFailed: true,
              clearMemoryCacheWhenDispose: true,
              cache: false,
              loadStateChanged: (ExtendedImageState state) {
                if (state.extendedImageLoadState == LoadState.loading) {
                  final loadingProgress = state.loadingProgress;
                  final progress = loadingProgress?.expectedTotalBytes != null
                      ? loadingProgress.cumulativeBytesLoaded /
                          loadingProgress.expectedTotalBytes
                      : null;
                  return Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        SizedBox(
                          width: 150.0,
                          child: LinearProgressIndicator(
                            value: progress,
                          ),
                        ),
                        SizedBox(
                          height: 10.0,
                        ),
                        Text('${((progress ?? 0.0) * 100).toInt()}%'),
                      ],
                    ),
                  );
                }
                return null;
              },
            ),

图片预览上滑显示详情(跟图虫一样)

image

当时在制作图片预览功能的时候，就暴露多了足够的api，提供给用户自定义各种效果，
由于Flutter手势的复杂以及冲突，我特意做了一个Demo提供出来。

至此pic_swiper.dart已拥有以下功能:

缩放
平移
上下一页图片
拖动退出预览
上滑显示详情

extended_image_library

为extended_image的基础库，如果你只需要网络图片缓存功能，你可以只引用这个库

    Image(
      image: ExtendedNetworkImageProvider("", cache: true),
    );

支持Web，小姐姐在线Demo
提供获取缓存图片的各种方法
方便获取图片的原数据(image的toByteData方法性能不佳)

flutter_image_editor

image

flutter_image_editor可以说是低调为extended_image量身打造的原生插件，支持旋转裁剪翻转，extended_image负责图片编辑UI，flutter_image_editor提供原生裁剪图片数据能力。由于dart image库在处理图片的效率问题，原生库(期待纯C++库)就有了很大的优势(大图片可以有10倍速度的提升)。