Flutter: Sharing files using share package
In this article, we will implement the sharing files feature using the share package. Yes, you read it right. But you might be thinking it only supports text share, so how do we do it? and we already have other packages for that.
We’ll use a modified version of the share package for sharing files. And about the already available packages, we have few issues with these packages like, we cannot share a File which we call from a network (like converting an image URL into an image file and then sharing it).
Before starting, If you are new at Flutter Development, you can get started here: https://flutter.dev/docs/get-started/codelab
If you are wondering what is this modified share package, check it here: https://github.com/flutter/plugins/pull/1423
Note: It’s better to fork the above repository and use it. So that we won’t face an issue like the owner changing the files.
Now let’s begin. I’ll implement two logic for sharing files
- Capturing the current screen and sharing that screenshot on a single tap.
- Converting the image URL to an image file and share it with a single tap.
First of all, create two buttons in your app which will call the above two logics and do our work:
So let’s begin.
Screenshot + Share
In this logic, we will capture the current screen, save it as an image file in the device and then Share that file by providing its directory path.
So we need path_provider package for storing the image in the device.
Let’s look into the code:
We are performing Exception Handling before implementing the above logic. Why? because we can possibly face a PlatformException with iOS platform (because of its restrictions).
- You need to wrap your Scaffold widget with RepaintBoundary as a parent and provide key to it because it creates a separate display list for its child. And in this method, we are using RenderRepaintBoundary to use the key and get the current context and build a separate display.
static GlobalKey previewContainer = GlobalKey();- We need import ‘dart:ui’ as ui so that we can convert the boundary into an image.
- Now we need to get storage location path to save the image, for that we are using path_provider package.
- Then we are converting the image into byte array and providing a format of the image(in our case we have .png). And later we are converting the above bytes into Uint8List, and then writing it in the imgFile.
If you are unable to take a screenshot you can add the below code in the method. This issue usually occurs when RenderRepaintBoundary doesn’t work properly.
if (boundary.debugNeedsPaint) {
Timer(Duration(seconds: 1), () => _screenShot());
return null;
}- And finally, we are now sharing the imgFile using Share.shareFile by providing the location of storage. If you face issue in adding the package you can do it like this:
share:
git:
url: git://github.com/himanshusharma89/plugins.git
path: packages/shareThis feature can be used to share reports, data, or charts as a screenshot.
Conversion + Share
In this logic, we will get and convert the image from a URL to an image file, save it in the device and then Share it as we did it earlier. Also in this method, the http package is required.
Here’s the code:
- In this method we have an image URL, we are using the get method to store it in a variable. And then proceeding with the same steps as before.
- But in this case, we are writing response.bodyBytes as bytes.
- And finally we are sharing the file with the Share.shareFile().
This feature can be used to share images from an API call, like sharing an individual product image with a share button/icon.
If you like this article, give a clap! or you can:
Source Code: https://github.com/himanshusharma89/sharefiles
