DEV Community

Cover image for Sharing on Instagram Stories, Facebook stories and more direct shares in Flutter using social_share plugin.
Shekar Mudaliyar💙
Shekar Mudaliyar💙

Posted on

Sharing on Instagram Stories, Facebook stories and more direct shares in Flutter using social_share plugin.

#flutter #dart #ios

A Flutter plugin including a wide variety of sharing options you'll need to share directly to certain popular apps or just share with default native share.
You can use this plugin to share on Instagram Stories, Facebook Stories, Twitter, Sms, Copy to clipboard, Whatsapp, and also default share with or without an image.

This plugin is iOS only! Android is still in progress

So, without wasting more time on intros. Let's start

Create a new Flutter project flutter create social_share_example

Setup

Add the social_share plugin in your pubspec.yaml file

dependencies:
  social_share: ^1.0.0
Enter fullscreen mode Exit fullscreen mode

To install plugins run

flutter pub get
Enter fullscreen mode Exit fullscreen mode

Import plugin to your file

import 'package:social_share/social_share.dart';
Enter fullscreen mode Exit fullscreen mode

Add this to your Info.plist to use the share on Instagram and facebook story 

<key>LSApplicationQueriesSchemes</key>
    <array>
    <string>instagram-stories</string>
    <string>facebook-stories</string>
    <string>facebook</string>
    <string>instagram</string>
    <string>twitter</string>
    <string>whatsapp</string>
    </array>
Enter fullscreen mode Exit fullscreen mode

Add this if you are using the share on facebook. For this, you have to create an app on https://developers.facebook.com/ and get the App ID 

<key>FacebookAppID</key>
<string>xxxxxxxxxxxxxxx</string>
Enter fullscreen mode Exit fullscreen mode

This is all you need to integrate this plugin in your project now lets start using it.

Click-Click-Click

I'm using screenshot plugin to capture the screen.

Let's install that too in your pubspec.yaml file

dependencies:
  screenshot: ^0.1.1
Enter fullscreen mode Exit fullscreen mode

and then

flutter pub get
Enter fullscreen mode Exit fullscreen mode

Then create a raised button to make a button when on clicked we can share.

RaisedButton(
                  onPressed: () async {
                    await screenshotController.capture().then((image) async {
                     // sharing methods here !!
                    });
                  },
                  child: Text("Share"),
                ),
Enter fullscreen mode Exit fullscreen mode

inside the await screentshot function you can add the methods from the plugin using Socialshare class.

shareInstagramStory 

SocialShare.shareInstagramStory(imageFile.path, "#ffffff",
                              "#000000", "https://deep-link-url");
Enter fullscreen mode Exit fullscreen mode

shareInstagramStorywithBackground 

 SocialShare.shareInstagramStorywithBackground(image.path, "https://deep-link-url",
                              backgroundImagePath: backgroundimage.path);
Enter fullscreen mode Exit fullscreen mode

shareFacebookStory 

SocialShare.shareFacebookStory(image.path,"#ffffff","#000000",
                              "https://deep-link-url","facebook-app-id");
Enter fullscreen mode Exit fullscreen mode

copyToClipboard 

SocialShare.copyToClipboard("This is Social Share plugin");
Enter fullscreen mode Exit fullscreen mode

shareTwitter 

//without hashtags
SocialShare.shareTwitter("This is Social Share plugin");

//with hashtags
SocialShare.shareTwitter(
                              "This is Social Share twitter example",
                              hashtags: ["hello", "world", "foo", "bar"]);
Enter fullscreen mode Exit fullscreen mode

shareSms 

//without url link in the message
SocialShare.shareSms("This is Social Share Sms example");

//with url link in message
SocialShare.shareSms("This is Social Share Sms example",url: "https://micro.volvmedia.com/");
Enter fullscreen mode Exit fullscreen mode

shareWhatsapp 

SocialShare.shareWhatsapp("Hello World");
Enter fullscreen mode Exit fullscreen mode

shareOptions

This will open the default native share options

//without an image
SocialShare.shareOptions("Hello world");

//with an image
SocialShare.shareOptions("Hello world",imagePath: image.path);
Enter fullscreen mode Exit fullscreen mode

That's it now you can use the sharing feature on Flutter.

Buy me a ☕ !!

((More coffee == more code) == more fast updates)

Donate

Get in touch!

Feel free to get in touch with me regarding any questions or queries.








Top comments (0)

Read next

marielp profile image

Free training : Numerical Computing With Rust on CPU

Marie -

bhuwan71 profile image

Become a great developer or software engineer

Bhuwan chettri -

abdullah_web_dev profile image

elementor customizee product page

Abdullah Web -

envio profile image

How to Efficiently Access Real-Time & Historical Data on The Fuel Network

Envio -