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.
Packages used in share files, Images, Text.
- Share_plus: will help us in content sharing to another app.
- http: used to download image from url (make network call).
- path_provider: get the path where image is downloaded.
- image_picker: user can pick image or video from galary or camera.
- 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
