Share Content with the Flutter Share Plugin

Paul Halliday

Are you creating a Flutter application that has content users may want to share with their friends or coworkers? Take advantage of the native platform share dialog using the share plugin. Let’s see how it’s done.

Video Version

I recorded a short video that illustrates the following concepts, in case you prefer in a video version:

Creating a new Flutter project

As always, we’ll start off by setting up a new Flutter project and adding the plugin:

# New Flutter project
$ flutter create f_share

# Open this up inside of VS Code
$ cd f_share && code .

Adding the Share plugin

Head over to your pubspec.yaml and add the following plugin:

dependencies:
  flutter:
    sdk: flutter

  share: ^0.6.2+3

Scaffolding Our Project

We can then go ahead and update our main.dart file to contain a HomePage found at f_share/home.dart:

import 'package:f_share/home.dart';
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

Our HomePage will be a simple StatefulWidget that contains an AppBar and an empty Container. As you may be able to tell from the appBar title, we’re creating a list of Alligators that we may want to share with our friends!

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My favourite Alligators"),
      ),
      body: Container()
    );
  }
}

Alligators

Let’s create an Alligator class inside of alligator_model.dart which contains a name and description, we’ll use this to generate our list in a moment:

import 'package:flutter/foundation.dart';

class Alligator {
  String name;
  String description;

  Alligator({@required this.name, @required this.description});
}

We can then create a List<Alligator> inside of HomePage and display them on screen:

import 'package:f_share/alligator_model.dart';
import 'package:flutter/material.dart';
import 'package:share/share.dart';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  List<Alligator> alligators = [
    Alligator(
        name: "Crunchy", description: "A fierce Alligator with many teeth."),
    Alligator(name: "Munchy", description: "Has a big belly, eats a lot."),
    Alligator(
        name: "Grunchy", description: "Scaly Alligator that looks menacing."),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My favourite Alligators"),
      ),
      body: Column(
          children: alligators
              .map((Alligator alligator) => Card(
                    child: Column(
                      children: <Widget>[
                        ListTile(
                          title: Text(alligator.name),
                          subtitle: Text(alligator.description),
                        )
                      ],
                    ),
                  ))
              .toList()),
    );
  }
}

Adding the Share functionality

In order to make it so that whenever the user clicks on a ListTile, we’ll hook into the onTap functionality, calling a share function:

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("My favourite Alligators"),
    ),
    body: Column(
        children: alligators
            .map((Alligator alligator) => Card(
                  child: Column(
                    children: <Widget>[
                      ListTile(
                        title: Text(alligator.name),
                        subtitle: Text(alligator.description),
                        onTap: () => share(context, alligator),
                      )
                    ],
                  ),
                ))
            .toList()),
  );
}

share(BuildContext context, Alligator alligator) {
  final RenderBox box = context.findRenderObject();

  Share.share("${alligator.name} - ${alligator.description}",
      subject: alligator.description,
      sharePositionOrigin: box.localToGlobal(Offset.zero) & box.size);
}

The main part of this is the Share function where we can supply a text and optional subject, which we’re using to pass this to our messages app in this example:

Share screenshot

Note that we need to ensure that we pass in the sharePositionOrigin for iPad devices by capturing the context.findRenderObject().

You should now be able to take advantage of the native platform share functionality inside of your Flutter apps!

  Tweet It

🕵 Search Results

🔎 Searching...

Sponsored by #native_company# — Learn More
#native_title# #native_desc#
#native_cta#