While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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.

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:

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!