Share option in Flutter: share

Sharing content is a very common action across social, quiz, videos, etc. applications. The sharing icon is very common to us and appears to be weird if it is not present. Flutter doesn't provide an easy functionality for sharing content.

In this article, we are going to implement the sharing option in our application with the help of the share_plus package. The share_plus plugin is an easy way to share content via your social apps like Facebook, Whatsapp, etc. and all the content you want will be shared. Normally for sharing a dialog window appears and asks for the platform where we want to share in Android and IOS devices. But this package supports all the platforms and work accordingly to your needs.

Installation of package

Install the share_plus package by using the following command or adding share_plus to the pubspec.yaml file.

flutter pub add share_plus

This command adds the latest plugin version on pub.dev.

Syntax

The following syntax is used to Share simple text content.

Share.share("Check out my latest tutorial $link");

If you want to share to Emails, use the following syntax to add a subject.

Share.share("Check out my latest tutorial $link",
              subject: "AllAboutFlutter: $title");

For sharing images using the share_plus plugin, use the following syntax.

Share.shareFiles([(file.path)],
    text: "Check my latest tutorial $link");

In this example, we have created an application with some ListTiles that have a share option. On clicking the share option, the share option dialog appears from where we need to choose our desired application to share in like Facebook, Whatsapp, etc.

Code

import 'package:flutter/material.dart';
import 'package:share_plus/share_plus.dart';

class ShareOptionTutorial extends StatelessWidget {
  const ShareOptionTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Share Option Tutorial"),
      ),
      body: ListView(
        children: [
          myListTile(
            "Flutter Switch",
            "https://www.allaboutflutter.com/post/flutter-switch",
          ),
          myListTile(
            "Gesture Detector in Flutter",
            "https://www.allaboutflutter.com/post/gesture-detector-in-flutter",
          ),
          myListTile("Flutter Dismissible Tutorial",
              "https://www.allaboutflutter.com/post/flutter-dismissible-tutorial"),
          myListTile("GridView Class Tutorial",
              "https://www.allaboutflutter.com/post/gridview-class-tutorial"),
          myListTile(
              "Flutter: SharedPreferences tutorial | How to setup SharedPreferences ?",
              "https://www.allaboutflutter.com/post/flutter-sharedpreferences-tutorial-how-to-setup-sharedpreferences"),
        ],
      ),
    );
  }
}

Widget myListTile(String title, String link) {
  return ListTile(
    title: Text(title),
    minVerticalPadding: 8.0,
    tileColor: Colors.blueAccent,
    trailing: IconButton(
      onPressed: () {
        Share.share("Check out my latest tutorial $link");
      },
      icon: const Icon(Icons.share),
    ),
  );
}

Output

In this example, we are going to add a subject to our message so that we can share it to our emails also.

Code

import 'package:flutter/material.dart';
import 'package:share_plus/share_plus.dart';

class ShareOptionTutorial extends StatelessWidget {
  const ShareOptionTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Share Option Tutorial"),
      ),
      body: ListView(
        children: [
          myListTile(
            "Flutter Switch",
            "https://www.allaboutflutter.com/post/flutter-switch",
          ),
          myListTile(
            "Gesture Detector in Flutter",
            "https://www.allaboutflutter.com/post/gesture-detector-in-flutter",
          ),
          myListTile("Flutter Dismissible Tutorial",
              "https://www.allaboutflutter.com/post/flutter-dismissible-tutorial"),
          myListTile("GridView Class Tutorial",
              "https://www.allaboutflutter.com/post/gridview-class-tutorial"),
          myListTile(
              "Flutter: SharedPreferences tutorial | How to setup SharedPreferences ?",
              "https://www.allaboutflutter.com/post/flutter-sharedpreferences-tutorial-how-to-setup-sharedpreferences"),
        ],
      ),
    );
  }
}

Widget myListTile(String title, String link) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: ListTile(
      title: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
        ),
      ),
      tileColor: Colors.blueAccent,
      trailing: IconButton(
        onPressed: () {
          Share.share("Check out my latest tutorial $link",
              subject: "AllAboutFlutter: $title");
        },
        icon: const Icon(Icons.share),
      ),
    ),
  );
}

Output

In this example, we are sharing images stored in the assets folder of our application. So we have first loaded the image to a temporary directory of our device and then passed the image path in the temporary directory. So we need the path_provider plugin. First install it using the following command and then proceed to the example code.

flutter pub add path_provider

Code

import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path_provider/path_provider.dart';
import 'package:share_plus/share_plus.dart';

class ShareOptionTutorial extends StatelessWidget {
  const ShareOptionTutorial({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Share Option Tutorial"),
      ),
      body: ListView(
        children: [
          myListTile(
            "Flutter Switch",
            "https://www.allaboutflutter.com/post/flutter-switch",
          ),
          myListTile(
            "Gesture Detector in Flutter",
            "https://www.allaboutflutter.com/post/gesture-detector-in-flutter",
          ),
          myListTile("Flutter Dismissible Tutorial",
              "https://www.allaboutflutter.com/post/flutter-dismissible-tutorial"),
          myListTile("GridView Class Tutorial",
              "https://www.allaboutflutter.com/post/gridview-class-tutorial"),
          myListTile(
              "Flutter: SharedPreferences tutorial | How to setup SharedPreferences ?",
              "https://www.allaboutflutter.com/post/flutter-sharedpreferences-tutorial-how-to-setup-sharedpreferences"),
        ],
      ),
    );
  }
}

Widget myListTile(String title, String link) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: ListTile(
      title: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
        ),
      ),
      tileColor: Colors.blueAccent,
      trailing: IconButton(
        onPressed: () async {
          final ByteData bytes =
              await rootBundle.load('assets/images/AllAboutFlutter.png');
          final Uint8List list = bytes.buffer.asUint8List();

          final tempDir = await getTemporaryDirectory();
          final file =
              await File('${tempDir.path}/AllAboutFlutter.png').create();
          file.writeAsBytesSync(list);
          await Share.shareFiles([(file.path)],
              text: "Check my latest tutorial $link");
        },
        icon: const Icon(Icons.share),
      ),
    ),
  );
}

Share option in Flutter: share_plus

Installation of package

Syntax

Example: Sharing Text

Code

Output

Example: Share via Email

Code

Output

Example: Share images

Code

Output

Did you find this article valuable?