Download StackFood Multi Restaurant, Food Delivery App with Laravel Admin and Restaurant Panel Buy Full App on $79
Download FlutKit - Flutter UI Kit Most beautiful Flutter UI Kit with 20+ Full App, 450+ Screens. Buy Full Kit on $39
Download Fluxstore Multi Vendor WooCommerce/Dokan Plugin compatible WordPress eCommerce Flutter App. Buy Full App on $79

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 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: ^2.0.4
  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/share.dart';

How to Share plain text:

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

How to Share text with URL:

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

This output is after sharing link to Facebook app.

How to Share Image or File in Flutter App:

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

Full Code Example:

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/share.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")),
                  ),


              ],
          )
      );
  }
}

Output Screenshot:

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...