How to Integrate Social Media Sharing in FlutterFlow

In FlutterFlow, navigate to Custom Code in the left sidebar. Click Pubspec Dependencies. Click Add Dependency. Search for share_plus and add it — use version ^10.0.0 or the latest stable version. Click Save. Wait for the package to compile. Once compiled, you can import it in Custom Actions using import 'package:share_plus/share_plus.dart'. The share_plus package works on iOS, Android, and web. On web, it falls back to the Web Share API where supported, and opens a new tab for sharing otherwise.

In Custom Code, click Add Custom Action. Name it shareContent. Add three String parameters: shareText (the message to share), shareUrl (the URL to include), and contentId (for tracking — the ID of the post, product, or content being shared). In the action body, write the sharing logic. For text + URL: call Share.share('$shareText\n$shareUrl'). For sharing an image from a network URL: first download the image bytes with http.get, save to a temp file using path_provider's getTemporaryDirectory(), then call Share.shareXFiles([XFile(tempFile.path)], text: shareText). Click Save and Compile Code to verify there are no import errors.

1import 'package:share_plus/share_plus.dart';
2import 'package:cloud_firestore/cloud_firestore.dart';
3
4Future shareContent(
5  String shareText,
6  String shareUrl,
7  String contentId,
8) async {
9  final String fullText = '$shareText\n$shareUrl';
10
11  await Share.share(
12    fullText,
13    subject: shareText,
14  );
15
16  // Track the share event in Firestore
17  await FirebaseFirestore.instance
18      .collection('share_events')
19      .add({
20    'contentId': contentId,
21    'sharedAt': FieldValue.serverTimestamp(),
22    'shareText': shareText,
23  });
24}

On the page with shareable content, add an IconButton widget. Set the icon to Icons.share (the standard share icon recognized across platforms). In the widget's On Tap action flow, add an Action → Custom Actions → shareContent. Bind the parameters: shareText to a string like 'Check out [content title]' built from page state or query data, shareUrl to the deep link URL for this content item (or your app's web URL if deep links aren't set up yet), and contentId to the content document ID from the Backend Query. On iOS, tapping this button opens the share sheet. On Android, it opens the Android share dialog.

For rich link previews when users share your URL on WhatsApp, Twitter, or iMessage, your app needs Open Graph meta tags. In FlutterFlow, click the Publish icon in the top-right corner. In the publish dialog, locate the Metadata section. Fill in: Title (the og:title — what appears as the link card heading, max 60 chars), Description (the og:description — the preview subtitle, max 155 chars), and OG Image (upload a 1200×630px image — this appears as the card thumbnail). Click Save, then click Publish or Update. After publishing, test your OG tags using https://www.opengraph.xyz/ — paste your app URL and verify the preview renders correctly.

Firebase Dynamic Links lets you create URLs that open your FlutterFlow app to a specific page when tapped on a mobile device, and fall back to the app store or web URL if the app isn't installed. In Firebase Console, navigate to Engage → Dynamic Links. Click Get Started. Set a URL prefix (e.g., yourapp.page.link). Create a new Dynamic Link: set the Long Link to your content URL, the iOS/Android behavior to Open the app if installed, and the fallback to the App Store/Play Store link. In FlutterFlow, add the firebase_dynamic_links package to Pubspec Dependencies. Create a Custom Action that initializes the dynamic links listener on app startup: FirebaseDynamicLinks.instance.getInitialLink() for cold start and onLink.listen() for foreground deep links. Each listener navigates to the target page using the extracted path parameter.