flutter share text image files
flutter share text image files

Hi Guys, Welcome to Proto Coders Point, In this flutter tutorial will learn how to share text, links, images, videos & files(pdf,doc) from your flutter app to another apps like whatsapp, facebook, Instagram

Flutter share_plus package

To share content from our flutter app to another app, we make use of share_plus.

Share plus in flutter is a plugin for sharing app content such as text or files via the platform sharing UI, using ACTION_VIEW in Android & UIActivityViewController in iOS platform.

This share_plus package support all the platform like Android, iOS, macOS, Web, Linux and Windows.

Note: In Windows & Linus only Text sharing is supported using ‘mailto’, File sharing is not supported in windows & Linux.

x
Flutter Share Content like Text, Url, Image, video & Document files using share plus package
Packages used in share files, Images, Text.

  1. Share_plus: will help us in content sharing to another app.
  2. http: used to download image from url (make network call).
  3. path_provider: get the path where image is downloaded.
  4. image_picker: user can pick image or video from galary or camera.
  5. file_picker: helps us in picking any kind of files like pdf, doc, mp4, mp3 etc.

Therefore by using above package we will play with content to share them using share_plus plugin.

Video Tutorial on Share_Plus

Let’s get Started

Step 1: Add required dependencies

Open pubspec.yaml file and under dependencies section add below packages.

dependencies:
  share_plus:
  http:
  path_provider:
  image_picker:
  file_picker:

Step 2: Import all of them where required

Then, to use the packages you need to import them where it’s required (say main.dart)

import 'package:path_provider/path_provider.dart';
import 'package:share_plus/share_plus.dart';
import 'package:http/http.dart' as http;
import 'package:image_picker/image_picker.dart';
import 'package:file_picker/file_picker.dart';

How to share Text & Files in flutter

In Share plus package we have 2 method that let us in sharing content like text and files.

Text Sharing:  Share.share(' your text message here ');
File Sharing:   Share.shareFiles([path], text: 'Image Shared'); // here path is the location of file in your mobile directory.

1. Share Text Message with links to another app using share_plus

Here i have TextField & Button, user can enter text message in TextField & press on share button to share the text to another app for example like Whatsapp by using share_plus methods.

TextEditingController textdata = TextEditingController();

  
Padding(
                padding: const EdgeInsets.only(left: 8, right: 8),
                child: TextField(
                    controller: textdata,
                    decoration: const InputDecoration(
                        border: OutlineInputBorder(),
                        label: Text('Enter Message'))),
              ),

    ElevatedButton(
      child: const Text('Share Text'),
         onPressed: () async {
           if (textdata.value.text.isNotEmpty) {
                final url = 'https://protocoderspoint.com/';
                await Share.share('${textdata.value.text} ${url}');
            }
         },
  ),

2. Share image from assets folder of flutter project

 ElevatedButton(
                child: const Text('Share Assets Folder Image'),
                onPressed: () async {
                  ByteData imagebyte = await rootBundle.load('assets/images/image1.jpg');

                  final temp = await getTemporaryDirectory();
                  final path = '${temp.path}/image1.jpg';

                  File(path).writeAsBytesSync(imagebyte.buffer.asUint8List());

                  await Share.shareFiles([path], text: 'Image Shared');


                },
              ),

3. Download image from url & share it

Here we will download image from a url using http package & store it into temporary directory & then get the path of downloaded image using path provider & share the image file using share_plus.

          Image.network(imageurl),

              ElevatedButton(
                child: const Text('Share Image'),
                onPressed: () async {
                  final imageurl = 'define your image url here';
                  final uri = Uri.parse(imageurl);
                  final response = await http.get(uri);
                  final bytes = response.bodyBytes;

                  final temp = await getTemporaryDirectory();
                  final path = '${temp.path}/image.jpg';

                  File(path).writeAsBytesSync(bytes);

                  await Share.shareFiles([path], text: 'Image Shared');
                },
              ),

4. Pick image or video from galary or camera & share it

Pick image from Galary and share it

ElevatedButton(
                child: const Text('Share From Galary'),
                onPressed: () async {
                  //pick image from Galery
                  final imagepick = await ImagePicker().pickImage(source: ImageSource.gallery);
                  if(imagepick == null){
                    return;
                  }
                  await Share.shareFiles([imagepick.path]);
                },
              ),

Pick image from camera and share it

ElevatedButton(
                child: const Text('Share From Camera'),
                onPressed: () async {
                  //pick image from Camera
                  final imagepick = await ImagePicker().pickImage(source: ImageSource.camera);
                  if(imagepick == null){
                    return;
                  }
                  await Share.shareFiles([imagepick.path]);
                },
              ),

Pick videos from galary and share it using shareplus package

ElevatedButton(
                child: const Text('Share From Camera'),
                onPressed: () async {
                final imagepick = await ImagePicker().pickVideo(source: ImageSource.gallery);
                  if(imagepick == null){
                    return;
                  }
                  await Share.shareFiles([imagepick.path]);
                },
              ),

5. File picker – pick document files & share it

ElevatedButton(
                child: const Text('Pick document Files and share it'),
                onPressed: () async {

                  final result = await FilePicker.platform.pickFiles();

                  List<String>? files = result?.files
                      .map((file) => file.path)
                      .cast<String>()
                      .toList();

                  if (files == null) {
                    return;
                  }

                  await Share.shareFiles(files);
                },
              ),

Complete Source Code – GitHub