flutter share_plus分享功能完美实现----文字

前言

之前发表了一篇文章,文章链接在这里,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)),
            ),
          ),
        ],
      ),
    );
  }
}

4. 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的文章。如果有疑问的话，请在下方留言~