Flutter 图片终极全家桶

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

extended_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;
              },
            ),

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

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

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

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

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

    Image(
      image: ExtendedNetworkImageProvider("", cache: true),
    );
复制代码
  • 支持Web,小姐姐在线Demo
  • 提供获取缓存图片的各种方法
  • 方便获取图片的原数据(image的toByteData方法性能不佳)
flutter_image_editor

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

flutter_wechat_assets_picker

出自Flutter劝退师Alex之手, 是一个对标微信的多选资源选择器,99%接近于原生微信的操作,纯Dart编写,支持选择的同时也支持预览资源。支持如下功能:

  • 图片资源支持
  • 视频资源支持
  • 国际化支持
  • 自定义文本支持

原文章

结语

最最后放上Flutter Candies全家桶,真香。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Flutter提供了多种方式来进行图片压缩,以下是其中几种常用的方法: 1. 使用flutter_image_compress库:这是一个Flutter插件,可以用于对图片进行压缩。你可以通过在pubspec.yaml文件中添加依赖来使用该库。使用该库的示例代码如下: ```dart import 'package:flutter_image_compress/flutter_image_compress.dart'; Future<void> compressImage(String imagePath) async { final result = await FlutterImageCompress.compressWithFile( imagePath, quality: 85, // 设置压缩质量,范围为0-100 ); if (result != null) { // 压缩成功,result为压缩后的图片数据 // 可以将result保存到文件或上传到服务器 } else { // 压缩失败 } } ``` 2. 使用flutter_native_image库:这是另一个Flutter插件,可以用于对图片进行压缩和调整大小。你可以通过在pubspec.yaml文件中添加依赖来使用该库。使用该库的示例代码如下: ```dart import 'package:flutter_native_image/flutter_native_image.dart'; Future<void> compressImage(String imagePath) async { final compressedFile = await FlutterNativeImage.compressImage( imagePath, quality: 85, // 设置压缩质量,范围为0-100 ); if (compressedFile != null) { // 压缩成功,compressedFile为压缩后的图片文件 // 可以将compressedFile保存到文件或上传到服务器 } else { // 压缩失败 } } ``` 3. 使用第三方云存储服务:你还可以使用第三方云存储服务,如七牛云、阿里云等,它们提供了图片处理的API,可以通过调用API来实现图片压缩。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值