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.
Please Wait...
No any Comments on this Article