Write, view and share app files — Part II

Step by step, the whole story, in Flutter

In the previous article, we create an app that saves files to the internal app directory and also can view them. We also filtered the view to show only files we want to show the user and not all the files in our app directory, as there are also crash logs and and any internal files we are using in this directory.

In this article, we will enable users to select multiple files and share them. We will share them in two ways — using share_plus plugin, which allows the user to share using whatever app the user wants (WhatsApp, Drive…). However, it doesn’t seem to provide a way for the user to mark “always use this app” or similar, so I will also demonstrate the usage of flutter_email_sender that always shares the files via email.

Part I : Save files to your app directory and view them.

Part II (this article): Select and deselect files and share them via email (with flutter_email_sender) or via anything else using share_plus plugin.

Let’s continue!

You can continue using the app we started in part I, or you can download the app from Gitlab (using the tag Part 1). The app and all its stages are in the Gitlab repository, with the various stages in commits and the end of part 1 as a tag.

Select files

First, we need a method to select specific files. In this example we want multiple selection. For this we will add an additional List<File> called _selectedFiles which will hold the files the user selected.

So in our view_page.dart, we add the _selectedFiles variable and change the onTap() method to add and remove the files from the list on tap.

Run and test, you’ll see the length of the file list changes when we tap.

However, we also need a visual method of showing the user what was selected. We will do two things:

1. Change the App bar text from “View files” to “<n> files selected” when selecting files. We create the text in 1a below and use it in 1b.
2. Change the background of a selected file, where it says 2 here.

Now you can run the app again, and see how the background color changes and the number of files selected changes accordingly :) Great!

Share files using share_plus

Now we need an option to share the files. Let’s add a share icon to our app bar as an action button (shown in purple below).

share icon in app bar

AppBar(title:text,
actions:[IconButton(icon: const Icon(Icons.share),
                    onPressed: (){})]);

When tapping on the button, we want to share all our files. Luckily, there is an excellent plugin for that called share_plus. Let’s install the plugin (I use VSCode and the pubspec assist extension, which makes it really easy).

Sharing is now as easy as await Share.shareFiles(pathlist). You can also share a subject or text like await Share.shareFiles(pathlist,subject,body).

However, we need a List<String> of paths for the share function. We have a List<File>. How to create a list of paths from the list of files?

Easy! Using the map function:

List<String> filenames = 
          _selectedFiles.map<String>((e)=>e.path).toList()

This maps every File in the list to its path, and creates a list from the result.

So inview_page.dart, the build function becomes:

Run and test, and see how you can share your files any way you want!

So, we’re done! Let’s go home and….wait, what? share_plus has no way to remember your preferred method. What if you want to share only by email? Without having to choose it each time?

No problem! flutter_email_sender to the rescue.

Share files using flutter_email_sender

This handy plugin allows you to easily send files by email. It opens the user’s preferred email app (user has to choose it only once) and allows the user to add details to the email before sending it. Like this:

final Email email = Email(
subject: "My awesome files",
body: "Please find attached files.",
attachmentPaths: filePaths,
);
await FlutterEmailSender.send(email);

So we’ll create a function in view_page.dartcalled sendEmail() that sends the email using the plugin:

And we’ll call it from our Share button:

And now we are finally done :)