Introduction

File sharing is a very good feature that is used in a lot of apps. In todays' article, we will have a look at how we can create a feature that enables you to pick files, images, and videos and share them with other people via Whatsapp, Instagram, Discord, etc.

So without wasting any time, let's get started.

Project Setup

First of all, let's import the three packages that we will use today. The file picker, the image picker, and share plus. Add them in the pubspec file like this

dependencies:
  flutter:
    sdk: flutter
  image_picker:
  file_picker:
  share_plus:

Now, in your main.dart or wherever you are coding your logic, import both these packages

import 'package:image_picker/image_picker.dart';
import 'package:share_plus/share_plus.dart';
import'package:file_picker/file_picker.dart';

With this, we are done with our project setup. Now let's move on to the logic part.

Coding the Logic

We will break down this into 2 simple steps. The first step is to pick an image/video from your android device. The second step is to share it. For step 1, let's try to pick an image. For that, we will create a function and in that, we will use this piece of code.

// picks the image you selected and stores everything in the variable res.
  final res = await ImagePicker().pickImage(source: ImageSource.gallery);

Yeah, it was just one line of code. This single line will open your file manager, show you all the images and let you choose one image.

Now in our second step, we need to send this image. Here comes the share_plus package. We will need two lines of code this time. One to get the path of this image and second to invoke the inbuilt function provided by the share_plus package.

late String paths = res!.path; // gets the path of the image.
// 'text:' is the text that is shown along with the image. Like a caption
await Share.shareFiles([paths],text: 'Image 1');

So now, our whole function looks like this

Future<void> sendImage()async {
final res = await ImagePicker().pickImage(source: ImageSource.gallery);
late String paths = res!.path;
await Share.shareFiles([paths],text: 'Image 1');
 },

If you want to share a video, just use ImagePicker().pickVideo(source : ImageSource.gallery) instead of .pickImage().

If you want to share a file, we use the file_picker package here. Since we can select multiple files, we will get a list of paths instead of a single path. So we will map them and put them on a list and then we pass it in our share_plus package. We can do it like this

final res = await FilePicker.platform.pickFiles();
List<String?> filePath = res!.files.map((e) => e.path).toList();
await Share.shareFiles(filePath,text: 'List of files');

Let's quickly create three buttons with three different functions. One to share images, second for video, and third for files.

TextButton(
 onPressed: ()async {
     sendImage();
   },
 child: Text("Share an Image")),
TextButton(
 onPressed: ()async {
     sendVideo();
   },
 child: Text("Share a Video")),
TextButton(
 onPressed: ()async {
     sendFiles();
   },
 child: Text("Share Files")),

Run the app on an emulator or your device and quickly test all three features. It will be working fine.

Conclusion

Congratulations! You have successfully learned how to share images, videos, and files. As you saw, it was a very simple process. I hope you learned something new today.

You can appreciate and support my blogs via.

Also, let's connect on Twitter. Follow CSwithIyush for more amazing tutorials, tips/tricks on Flutter & DSA.