How to show Share for Text, URL, Image or File in Flutter App

In this example, we are going to show you the easiest way to show share panel for plain text, url, image and file. We have used file picker to select file and open share panel for sharing to different social media and website platform. See the example for more details:

First you need to add share_plus Flutter package in your dependency by adding following lines in your pubspec.yaml file. Additonally, add file_picker Flutter package as well to pick file to share.

dependencies:
  flutter:
    sdk: flutter
  share_plus: ^3.0.5
  file_picker: ^1.9.0+1

In this example, we have used old verison of file_picker, current version have many platform issues, you can add the latest file picker plugin as well from its documentation.

Import share package to your script:

import 'package:share_plus/share_plus.dart';

Share.share('Hello Welcome to FlutterCampus', subject: 'Welcome Message');
//subject is optional, and it is required for Email App.

Share.share('Visit FlutterCampus at https://www.fluttercampus.com');

This output is after sharing link to Facebook app.

Share.shareFiles(['${directory.path}/image.jpg'], text: 'Great picture');
Share.shareFiles(['${directory.path}/image1.jpg', '${directory.path}/image2.jpg']);

Add read / write permissions in your android/app/src/main/AndroidManifest.xml before <application> tag for the permisison to read file during sharing.

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>

If you still get the Permission Denied error, add the following line on AndroidManifest.xml file.

<application
      android:requestLegacyExternalStorage="true"
import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/material.dart';
import 'package:share_plus/share_plus.dart';
void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    )
  );
}

class MyApp extends StatefulWidget{
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var  selectedfile;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
          appBar: AppBar(
              title:Text("Share Text, URL, Image or File"),
              backgroundColor: Colors.redAccent,
          ),
          body: Column(
              
              children: [
                  Container(
                    alignment: Alignment.center,
                     child: ElevatedButton(
                       onPressed: (){
                            Share.share('Hello Welcome to FlutterCampus', subject: 'Welcome Message');
                            //subject is optional, and it is required for Email App.
                       },
                       child: Text("Share Plain Text")),
                  ),

                  Container(
                    alignment: Alignment.center,
                     child: ElevatedButton(
                       onPressed: (){
                            Share.share('Visit FlutterCampus at https://www.fluttercampus.com');
                       },
                       child: Text("Share text with URL")),
                  ),

                  Container(
                    alignment: Alignment.center,
                     child: ElevatedButton(
                       style: ElevatedButton.styleFrom(primary: Colors.redAccent),
                       onPressed: () async {
                            selectedfile = await FilePicker.getFile(
                                  type: FileType.custom,
                                  allowedExtensions: ['jpg', 'pdf', 'mp4'],
                                  //allowed extension to choose
                            );

                            setState((){}); 
                       },
                       child: Text("Pick File to Share")),
                  ),

                  Container(
                    alignment: Alignment.center,
                     child: Text(selectedfile == null?"No File Selected":selectedfile.path),
                  ),


                  Container(
                    alignment: Alignment.center,
                     child: ElevatedButton(
                       style: ElevatedButton.styleFrom(primary: Colors.redAccent),
                       onPressed: () async {
                            if(selectedfile == null){
                                print("No any file is selected.");
                            }else{
                                 Share.shareFiles([selectedfile.path], text: "View File");
                            }

                            setState((){}); 
                       },
                       child: Text("Share Picked File")),
                  ),


              ],
          )
      );
  }
}

Menu Screen Share Panel for File Image shaed to Gmail App

In ths way, you can add share feature for plain text, URL, image or file in your Flutter App. 

No any Comments on this Article


Please Wait...