Share content Using Social Media in Flutter

Share content using social media in Flutter app like text, image, video and file. In this blog, I will explain how to send content easily using the Flutter package on social media.

Introduction :

The entire user experience is improved by allowing users to share content from your app to other applications. This tutorial will teach you how to use the Share Plus plugin to create content sharing in Flutter apps.

1. Depend on it :

The first thing we have to do after creating the app is to add these dependencies in the pubspec.yml file.

dependencies:
  flutter:
    sdk: flutter
 
  cupertino_icons: ^1.0.2
  share_plus: ^4.1.0
  http: ^0.13.5
  path_provider: any
  image_picker:
  file_picker: ^5.2.1

dependencies:

flutter:

sdk: flutter

cupertino_icons: ^1.0.2

share_plus: ^4.1.0

http: ^0.13.5

path_provider: any

image_picker:

file_picker: ^5.2.1

Note: Find dependencies here.

2. Install it :

You can install packages from the command line:

with Flutter:

$ flutter pub get

1	$ flutter pub get

3. Import it :

Now, you may use it in your Dart code.

import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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 'dart:io';

import 'package:file_picker/file_picker.dart';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.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';

4. Android Native Configuration :

Add this permission to your AndroidManifest.xml file

<uses-permission android:name="android.permission.READ_INTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_INTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permissionandroid:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>
<application
        android:requestLegacyExternalStorage="true"
        android:name="io.flutter.app.FlutterApplication"
        android:label="xxxxxx"
        android:icon="@mipmap/launcher_icon">
        <activity>
                ...
                ...
        </activity>
</application>

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

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

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

<uses-permissionandroid:name="android.permission.MANAGE_EXTERNAL_STORAGE"/>

<application

android:requestLegacyExternalStorage="true"

android:name="io.flutter.app.FlutterApplication"

android:label="xxxxxx"

android:icon="@mipmap/launcher_icon">

...

</activity>

</application>

5. iOS Native Configuration :

Add this permission to your Runner/Info.plist file

<key>NSPhotoLibraryUsageDescription</key>
<string>This app require permission to access gallery</string>

1 2	<key>NSPhotoLibraryUsageDescription</key> <string>This app require permission to access gallery</string>

You may also check our Flutter app development services.

6. Share Text Value :

Sharing text using the TextField with TextEditingController using social media.

Code :

  TextEditingController testController = TextEditingController();

  TextField(
              autofocus: false,
              controller: testController,
              onChanged: (val){
              },
              keyboardType: TextInputType.name,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 10),
               // hintText: "Input Text Value",
                labelText:  "Input Text Value",
                labelStyle: TextStyle(
                    color: Colors.black),
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color:Colors.black,
                        width: 1.0),
                    borderRadius: BorderRadius.zero
                ),
                disabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color:Colors.grey,
                        width: 1.0),
                    borderRadius: BorderRadius.zero
                ),
                focusedErrorBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color: Colors.red,
                        width: 1.0),
                    borderRadius: BorderRadius.zero
                ),
                enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color:Colors.grey,
                      width: 1.0,
                    ),
                    borderRadius: BorderRadius.zero
                ),
                errorBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color:Colors.red,
                      width: 1.0,
                    ),
                    borderRadius: BorderRadius.zero
                ),
               ),
            ),
                SizedBox(height: 20,),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      if(testController.text.isNotEmpty){
                        await  Share.share(testController.text);
                      }
                    }, child: Text("Share Text Message", style: TextStyle(color: Colors.white),)),

TextEditingController testController = TextEditingController();

TextField(

autofocus: false,

controller: testController,

onChanged: (val){

keyboardType: TextInputType.name,

decoration: InputDecoration(

contentPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 10),

// hintText: "Input Text Value",

labelText: "Input Text Value",

labelStyle: TextStyle(

color: Colors.black),

focusedBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.black,

width: 1.0),

borderRadius: BorderRadius.zero

disabledBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.grey,

width: 1.0),

borderRadius: BorderRadius.zero

focusedErrorBorder: OutlineInputBorder(

borderSide: BorderSide(

color: Colors.red,

width: 1.0),

borderRadius: BorderRadius.zero

enabledBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.grey,

width: 1.0,

borderRadius: BorderRadius.zero

errorBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.red,

width: 1.0,

borderRadius: BorderRadius.zero

SizedBox(height: 20,),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

if(testController.text.isNotEmpty){

await Share.share(testController.text);

}

}, child: Text("Share Text Message", style: TextStyle(color: Colors.white),)),

Result :

https://mobikul.com/wp-content/uploads/2023/09/Screen-Recording-2023-09-09-at-3.48.16-PM-1.mov

7. Share Image :

Sharing image using the string image URL.

Code :

 String imagePath = "https://images.pexels.com/photos/574324/pexels-photo-574324.jpeg?auto=compress&cs=tinysrgb&w=800";
Container(
                  child:Image.network(imagePath)

                ),
                SizedBox(height: 20,),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.black
                  ),
                    onPressed: ()async{
                    final uri = Uri.parse(imagePath);
                    final res = await http.get(uri);
                    final bytes = res.bodyBytes;

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

                    await Share.shareFiles([path]);

                    }, child: Text("Share Image", style: TextStyle(color: Colors.white),)),

String imagePath = "https://images.pexels.com/photos/574324/pexels-photo-574324.jpeg?auto=compress&cs=tinysrgb&w=800";

Container(

child:Image.network(imagePath)

SizedBox(height: 20,),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final uri = Uri.parse(imagePath);

final res = await http.get(uri);

final bytes = res.bodyBytes;

final temp = await getTemporaryDirectory();

final path ='${temp.path}/image.jpg';

File(path).writeAsBytesSync(bytes);

await Share.shareFiles([path]);

}, child: Text("Share Image", style: TextStyle(color: Colors.white),)),

Result :

https://mobikul.com/wp-content/uploads/2023/09/Screen-Recording-2023-09-09-at-3.58.53-PM.mov

8. Share Image Using Gallery :

To get gallery images and share them using social media.

Code :

 ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final imagePath = await ImagePicker().pickImage(source: ImageSource.gallery);

                      if(imagePath ==null)
                        return;

                      await Share.shareFiles([imagePath.path]);

                    }, child: Text("Pick Gallery Image and Share", style: TextStyle(color: Colors.white),)),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final imagePath = await ImagePicker().pickImage(source: ImageSource.gallery);

if(imagePath ==null)

return;

await Share.shareFiles([imagePath.path]);

}, child: Text("Pick Gallery Image and Share", style: TextStyle(color: Colors.white),)),

Result :

https://mobikul.com/wp-content/uploads/2023/09/Screen-Recording-2023-09-09-at-4.00.18-PM-2.mov

9. Share Image Using Camera :

To get images using a camera and share them using social media.

Code :

ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final imagePath = await ImagePicker().pickImage(source: ImageSource.camera);

                      if(imagePath ==null)
                        return;

                      await Share.shareFiles([imagePath.path]);

                    }, child: Text("Pick Camera Image and Share", style: TextStyle(color: Colors.white),)),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final imagePath = await ImagePicker().pickImage(source: ImageSource.camera);

if(imagePath ==null)

return;

await Share.shareFiles([imagePath.path]);

}, child: Text("Pick Camera Image and Share", style: TextStyle(color: Colors.white),)),

Result :

https://mobikul.com/wp-content/uploads/2023/09/Screen-Recording-2023-09-09-at-4.01.17-PM.mov

10. Share Video Using Gallery :

To get gallery videos and share them using social media.

Code :

 ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final imagePath = await ImagePicker().pickVideo(source: ImageSource.gallery);

                      if(imagePath ==null)
                        return;

                      await Share.shareFiles([imagePath.path]);

                    }, child: Text("Pick Gallery video and Share", style: TextStyle(color: Colors.white),)),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final imagePath = await ImagePicker().pickVideo(source: ImageSource.gallery);

if(imagePath ==null)

return;

await Share.shareFiles([imagePath.path]);

}, child: Text("Pick Gallery video and Share", style: TextStyle(color: Colors.white),)),

Result :

https://mobikul.com/wp-content/uploads/2023/09/Screen-Recording-2023-09-09-at-4.03.17-PM.mov

11. Share Video Using Camera :

To get videos using a camera and share them using social media.

Code :

 ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final imagePath = await ImagePicker().pickVideo(source: ImageSource.camera);

                      if(imagePath ==null)
                        return;

                      await Share.shareFiles([imagePath.path]);

                    }, child: Text("Pick Camera video and Share", style: TextStyle(color: Colors.white),)),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final imagePath = await ImagePicker().pickVideo(source: ImageSource.camera);

if(imagePath ==null)

return;

await Share.shareFiles([imagePath.path]);

}, child: Text("Pick Camera video and Share", style: TextStyle(color: Colors.white),)),

Result :

https://mobikul.com/wp-content/uploads/2023/09/Screen-Recording-2023-09-09-at-4.04.08-PM.mov

12. Share File Using Gallery :

To get gallery files using the FilePicker package and share them using social media.

Code :

ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final filePath = await FilePicker.platform.pickFiles();
                     List<String>? files = filePath?.files.map((e) => e.path).cast<String>().toList();
                      if(files ==null)
                        return;

                      await Share.shareFiles(files);

                    }, child: Text("Pick File and Share", style: TextStyle(color: Colors.white),)),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

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

List<String>? files = filePath?.files.map((e) => e.path).cast<String>().toList();

if(files ==null)

return;

await Share.shareFiles(files);

}, child: Text("Pick File and Share", style: TextStyle(color: Colors.white),)),

Result :

https://mobikul.com/wp-content/uploads/2023/09/Screen-Recording-2023-09-09-at-4.06.27-PM.mov

Full Implementation :


import 'dart:io';
import 'package:file_picker/file_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.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';

class ShareUIPage extends StatefulWidget {
  const ShareUIPage({Key? key}) : super(key: key);

  @override
  State<ShareUIPage> createState() => _ShareUIPageState();
}

class _ShareUIPageState extends State<ShareUIPage> {
  TextEditingController testController = TextEditingController();
  String imagePath = "https://images.pexels.com/photos/574324/pexels-photo-574324.jpeg?auto=compress&cs=tinysrgb&w=800";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.greenAccent,
      appBar: AppBar(
        backgroundColor: Colors.greenAccent,
        title: Text("Share File Using Gallery "),),
      body: Container(
        padding: EdgeInsets.all(10),
        height: MediaQuery.of(context).size.height,
        width:double.infinity ,
        child: SingleChildScrollView(
          child: Center(
            child: Column(
              children: [
              TextField(
              autofocus: false,
              controller: testController,
              onChanged: (val){
              },
              keyboardType: TextInputType.name,
              decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 10),
               // hintText: "Input Text Value",
                labelText:  "Input Text Value",
                labelStyle: TextStyle(
                    color: Colors.black),
                focusedBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color:Colors.black,
                        width: 1.0),
                    borderRadius: BorderRadius.zero
                ),
                disabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color:Colors.grey,
                        width: 1.0),
                    borderRadius: BorderRadius.zero
                ),
                focusedErrorBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                        color: Colors.red,
                        width: 1.0),
                    borderRadius: BorderRadius.zero
                ),
                enabledBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color:Colors.grey,
                      width: 1.0,
                    ),
                    borderRadius: BorderRadius.zero
                ),
                errorBorder: OutlineInputBorder(
                    borderSide: BorderSide(
                      color:Colors.red,
                      width: 1.0,
                    ),
                    borderRadius: BorderRadius.zero
                ),
               ),
            ),
                SizedBox(height: 20,),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      if(testController.text.isNotEmpty){
                        await  Share.share(testController.text);
                      }
                    }, child: Text("Share Text Message", style: TextStyle(color: Colors.white),)),

                SizedBox(height: 20,),

                Container(
                  child:Image.network(imagePath)

                ),
                SizedBox(height: 20,),
                ElevatedButton(
                  style: ElevatedButton.styleFrom(
                    primary: Colors.black
                  ),
                    onPressed: ()async{
                    final uri = Uri.parse(imagePath);
                    final res = await http.get(uri);
                    final bytes = res.bodyBytes;

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

                    await Share.shareFiles([path]);

                    }, child: Text("Share Image", style: TextStyle(color: Colors.white),)),

                SizedBox(height: 20,),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final imagePath = await ImagePicker().pickImage(source: ImageSource.camera);

                      if(imagePath ==null)
                        return;

                      await Share.shareFiles([imagePath.path]);

                    }, child: Text("Pick Camera Image and Share", style: TextStyle(color: Colors.white),)),

                SizedBox(height: 20,),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final imagePath = await ImagePicker().pickVideo(source: ImageSource.camera);

                      if(imagePath ==null)
                        return;

                      await Share.shareFiles([imagePath.path]);

                    }, child: Text("Pick Camera video and Share", style: TextStyle(color: Colors.white),)),
                SizedBox(height: 20,),
                ElevatedButton(
                    style: ElevatedButton.styleFrom(
                        primary: Colors.black
                    ),
                    onPressed: ()async{
                      final filePath = await FilePicker.platform.pickFiles();
                     List<String>? files = filePath?.files.map((e) => e.path).cast<String>().toList();
                      if(files ==null)
                        return;

                      await Share.shareFiles(files);

                    }, child: Text("Pick File and Share", style: TextStyle(color: Colors.white),)),

              ],
            ),
          ),
        ),
      ),
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

import 'dart:io';

import 'package:file_picker/file_picker.dart';

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.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';

class ShareUIPage extends StatefulWidget {

const ShareUIPage({Key? key}) : super(key: key);

@override

State<ShareUIPage> createState() => _ShareUIPageState();

}

class _ShareUIPageState extends State<ShareUIPage> {

TextEditingController testController = TextEditingController();

String imagePath = "https://images.pexels.com/photos/574324/pexels-photo-574324.jpeg?auto=compress&cs=tinysrgb&w=800";

@override

Widget build(BuildContext context) {

return Scaffold(

backgroundColor: Colors.greenAccent,

appBar: AppBar(

backgroundColor: Colors.greenAccent,

title: Text("Share File Using Gallery "),),

body: Container(

padding: EdgeInsets.all(10),

height: MediaQuery.of(context).size.height,

width:double.infinity ,

child: SingleChildScrollView(

child: Center(

child: Column(

children: [

TextField(

autofocus: false,

controller: testController,

onChanged: (val){

keyboardType: TextInputType.name,

decoration: InputDecoration(

contentPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 10),

// hintText: "Input Text Value",

labelText: "Input Text Value",

labelStyle: TextStyle(

color: Colors.black),

focusedBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.black,

width: 1.0),

borderRadius: BorderRadius.zero

disabledBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.grey,

width: 1.0),

borderRadius: BorderRadius.zero

focusedErrorBorder: OutlineInputBorder(

borderSide: BorderSide(

color: Colors.red,

width: 1.0),

borderRadius: BorderRadius.zero

enabledBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.grey,

width: 1.0,

borderRadius: BorderRadius.zero

errorBorder: OutlineInputBorder(

borderSide: BorderSide(

color:Colors.red,

width: 1.0,

borderRadius: BorderRadius.zero

SizedBox(height: 20,),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

if(testController.text.isNotEmpty){

await Share.share(testController.text);

}

}, child: Text("Share Text Message", style: TextStyle(color: Colors.white),)),

SizedBox(height: 20,),

Container(

child:Image.network(imagePath)

SizedBox(height: 20,),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final uri = Uri.parse(imagePath);

final res = await http.get(uri);

final bytes = res.bodyBytes;

final temp = await getTemporaryDirectory();

final path ='${temp.path}/image.jpg';

File(path).writeAsBytesSync(bytes);

await Share.shareFiles([path]);

}, child: Text("Share Image", style: TextStyle(color: Colors.white),)),

SizedBox(height: 20,),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final imagePath = await ImagePicker().pickImage(source: ImageSource.camera);

if(imagePath ==null)

return;

await Share.shareFiles([imagePath.path]);

}, child: Text("Pick Camera Image and Share", style: TextStyle(color: Colors.white),)),

SizedBox(height: 20,),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

final imagePath = await ImagePicker().pickVideo(source: ImageSource.camera);

if(imagePath ==null)

return;

await Share.shareFiles([imagePath.path]);

}, child: Text("Pick Camera video and Share", style: TextStyle(color: Colors.white),)),

SizedBox(height: 20,),

ElevatedButton(

style: ElevatedButton.styleFrom(

primary: Colors.black

onPressed: ()async{

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

List<String>? files = filePath?.files.map((e) => e.path).cast<String>().toList();

if(files ==null)

return;

await Share.shareFiles(files);

}, child: Text("Pick File and Share", style: TextStyle(color: Colors.white),)),

);

}

Thanks for reading this article. Send ❤️ if you Like it.

For more understanding please can go through this Link

For more interesting blogs check here.

Abdul Raheem 11 September 2023

. . .

Discuss on Helpdesk

Share content Using Social Media in Flutter

Introduction :

1. Depend on it :

2. Install it :

3. Import it :

4. Android Native Configuration :

5. iOS Native Configuration :

6. Share Text Value :

Code :

Result :

7. Share Image :

Code :

Result :

8. Share Image Using Gallery :

Code :

Result :

9. Share Image Using Camera :

Code :

Result :

10. Share Video Using Gallery :

Code :

Result :

11. Share Video Using Camera :

Code :

Result :

12. Share File Using Gallery :

Code :

Result :

Full Implementation :

Leave a Comment Cancel Reply

Message Sent!