前言
之前发表了一篇文章,文章链接在这里,flutter zip压缩/解压缩,生成/读取csv文件;
此文章主要实现2大功能,
1.如何把大量数据生成csv文件,放到手机缓存目录中,以及读取csv文件,在app中显示出来
2.如何把手机缓存目录中csv文件,压缩成.zip文件, 以及把.zip文件解压出来
由此引出今天的话题, 已经生成的.zip文件,如何分享出去,方便传播呢?
回到正题
第一步,敲定第三方插件
想实现分享功能,我们常规的做法,就是去pub.dev网站上找找,有没有相关的第三方插件,搜索 "share",结果如下:
image.png
share,这个的插件的Likes =1.5K左右了, 说明很受欢迎, 但是点进去看,作者说以后不会再维护了,建议我们使用share_plus,这个插件.所以我们敲定要使用的第三方插件了,就是share_plus
第二步,我们来填坑---调研插件
从share_plus的作者的readme文件, 与example,都看不出来,最终是什么样的效果,作者也没有给出效果图;
所以我们要进一步,把作者的example的源代码运行起来看.
1.把作者的example/lib/main.dart,代码全部复制;替换我们自己main.dart里面的全部代码.然后会发现有报错,如下图.下面的步骤就是来填坑的
image.png
2.导入另一个第三方库 image_picker: ^0.8.3,并且 flutter pub get一下,获取资源包
3.在项目中新一个image_previews.dart文件,并将下面的代码,拷贝进去,至此share_plus的example里面的代码就不会报错了
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
/// Widget for displaying a preview of images
class ImagePreviews extends StatelessWidget {
/// The image paths of the displayed images
final List<String> imagePaths;
/// Callback when an image should be removed
final Function(int) onDelete;
/// Creates a widget for preview of images. [imagePaths] can not be empty
/// and all contained paths need to be non empty.
const ImagePreviews(this.imagePaths, {Key key, this.onDelete})
: super(key: key);
@override
Widget build(BuildContext context) {
if (imagePaths.isEmpty) {
return Container();
}
final imageWidgets = <Widget>[];
for (var i = 0; i < imagePaths.length; i++) {
imageWidgets.add(_ImagePreview(
imagePaths[i],
onDelete: onDelete != null ? () => onDelete(i) : null,
));
}
return SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(children: imageWidgets),
);
}
}
class _ImagePreview extends StatelessWidget {
final String imagePath;
final VoidCallback onDelete;
const _ImagePreview(this.imagePath, {Key key, this.onDelete})
: super(key: key);
@override
Widget build(BuildContext context) {
final imageFile = File(imagePath);
return Padding(
padding: const EdgeInsets.all(8.0),
child: Stack(
children: <Widget>[
ConstrainedBox(
constraints: const BoxConstraints(
maxWidth: 200,
maxHeight: 200,
),
child: Image.file(imageFile),
),
Positioned(
right: 0,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: FloatingActionButton(
backgroundColor: Colors.red,
onPressed: onDelete,
child: const Icon(Icons.delete)),
),
),
],
),
);
}
}
-
share_plus运行起来,最终效果如下图
share01.gif
第三步,分享.zip文件,最终效果如下
zip_share.gif
分享文件用如下代码,imagPaths是图片的路径,text,是要分享的文字内容
await Share.shareFiles(imagePaths,
text: text,
subject: subject,
sharePositionOrigin: box!.localToGlobal(Offset.zero) & box.size);
但是光传上面的几个参数,测试你会发现不能成功,分享.zip文件,还需要多传一个参数mimeTypes,从share_plus源码可以看到相关说明
image.png
所以我们分享.zip文件代码如下,其中imagPaths参数,传.zip文件的路径,而再也不是图片的路径,其他参数如上面所说
void _onShare(BuildContext context) async {
// A builder is used to retrieve the context immediately
// surrounding the ElevatedButton.
//
// The context's `findRenderObject` returns the first
// RenderObject in its descendent tree when it's not
// a RenderObjectWidget. The ElevatedButton's RenderObject
// has its position and size after it's built.
final box = context.findRenderObject() as RenderBox;
if (imagePaths.isNotEmpty) {
await Share.shareFiles(imagePaths,
mimeTypes: ["application/zip"],
text: text,
subject: subject,
sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
} else {
await Share.share(text,
subject: subject,
sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
}
}
最终得到我们要的效果.
最后补充一下,测试的思路与代码
image.png
String text = '';
String subject = '';
List<String> imagePaths = [];
// 压缩csv文件成zip文件
_zipFiles() async {
Directory documentsDir = (await getApplicationDocumentsDirectory());
Directory desDir = await Directory('${documentsDir.path}/ble').create();
String desPath = desDir.path;
var encoder = ZipFileEncoder();
encoder.zipDirectory(Directory(desDir.path),
filename: desDir.path + ".zip");
print("""生成zip文件路径=$desPath.zip""");
imagePaths.add("$desPath.zip");
_onShare(context);
}
void _onShare(BuildContext context) async {
// A builder is used to retrieve the context immediately
// surrounding the ElevatedButton.
//
// The context's `findRenderObject` returns the first
// RenderObject in its descendent tree when it's not
// a RenderObjectWidget. The ElevatedButton's RenderObject
// has its position and size after it's built.
final box = context.findRenderObject() as RenderBox;
if (imagePaths.isNotEmpty) {
await Share.shareFiles(imagePaths,
mimeTypes: ["application/zip"],
text: text,
subject: subject,
sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
} else {
await Share.share(text,
subject: subject,
sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
}
}
结尾
小伙伴们，今天的分享至此结束! 如果小伴们,觉得有点用的话，或者已经看到这里面来的请加关注及点个赞吧~~ 后续会分享更多有关flutter的文章。如果有疑问的话，请在下方留言~
