How to Build a Social Sharing Feature in FlutterFlow

In FlutterFlow, go to Custom Code and create a new Custom Action named shareContent. Add two parameters: shareText (String) and shareSubject (String, optional). Add the share_plus package as a dependency (pub.dev: share_plus). In the action body, import the package and call Share.share(shareText, subject: shareSubject). This opens the native OS share sheet on both iOS and Android, letting users pick WhatsApp, Twitter, Messages, email, or any other installed app. The shareText parameter will contain the composed message with the deep link URL. Return void from the action.

1// Custom Action: shareContent
2import 'package:share_plus/share_plus.dart';
3
4Future shareContent(
5  String shareText,
6  String? shareSubject,
7) async {
8  await Share.share(
9    shareText,
10    subject: shareSubject ?? '',
11  );
12}

For each piece of shareable content (articles, products, profiles), construct a deep link URL that routes to the correct page in your app. The simplest approach is to use your web app's URL with a path parameter: https://yourapp.com/content/{contentId}. If you use Firebase Dynamic Links, create a link with the deep link pointing to your app's content page and fallback URLs for web. Store the generated link as a Custom Function or compute it inline: 'https://yourapp.com/content/' + contentDocument.id. When the share button is tapped, compose the share message by combining a user-friendly text with the deep link: 'Check out "' + contentTitle + '" on MyApp: ' + deepLinkUrl. Pass this composed string to the shareContent Custom Action.

On each content page or card Component, add an IconButton with the share icon (Icons.share). On Tap Action Flow: first, compose the share message using a Custom Function that takes the content title and ID, returning a string like 'Check out "UX Design Basics" on MyApp: https://yourapp.com/content/abc123'. Then call the shareContent Custom Action with this string as shareText and the content title as shareSubject. For a custom share menu instead of the OS default, create a BottomSheet with specific platform icons (WhatsApp, Twitter, Copy Link). The Copy Link option uses a Custom Action with Clipboard.setData(ClipboardData(text: url)) and shows a SnackBar confirming the link was copied.

Create a share_events collection in Firestore with fields: contentId (String), contentType (String: 'article', 'product', 'profile'), userId (String), timestamp (Timestamp). In the share button's Action Flow, before calling the shareContent Custom Action, add a Create Document action that writes a share event to this collection. This tracks which content is shared most and by whom. On your admin dashboard, query share_events grouped by contentId to show a leaderboard of most-shared content. Add a shareCount field on the content document and increment it with FieldValue.increment(1) for quick display on content cards without querying the events collection.

When users share a link on WhatsApp, Twitter, or Facebook, these platforms read Open Graph meta tags from the URL to generate a preview card with title, description, and image. For your FlutterFlow web deployment, add OG meta tags in the HTML head. Go to your FlutterFlow project settings or custom head tag section and add: og:title (content title), og:description (content summary), og:image (thumbnail URL, minimum 1200x630px for best display), og:url (the canonical URL), and og:type ('article' or 'website'). For dynamic content where each page has different metadata, you need server-side rendering or a Cloud Function that serves the HTML with dynamic OG tags based on the URL path. Without this, all shared links show the same generic preview.