Share to social media (Custom code implementation) failing

Custom Code

Hi FlutterFlow Community,

I'm working on a feature to allow users to download an image (hosted on Firebase) and then immediately share it via WhatsApp. I've set up two custom actions for this, but I'm encountering issues getting the flow to work correctly.

The Goal:

  1. User taps a 'Share' button.

  2. The downloadImageToLocalPath custom action runs, taking an image URL as input.

  3. This action should download the image and return its local file path as a String.

  4. The shareImageToSocialApp custom action runs, taking the local file path from the first action as input.

  5. This action should open the WhatsApp share dialog with the downloaded image.

Custom Action 1: downloadImageToLocalPath (Returns String)

Dart

import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:path_provider/path_provider.dart';

Future<String> downloadImageToLocalPath(String? imageUrl) async {
  if (imageUrl == null || imageUrl.trim().isEmpty) {
    return '';
  }
  try {
    Uri parsedUri = Uri.parse(imageUrl);
    final response = await http.get(parsedUri);

    if (response.statusCode == 200) {
      final tempDir = await getTemporaryDirectory();
      String extension = 'jpg';
      final contentType = response.headers['content-type'];
      if (contentType != null) {
        if (contentType.contains('image/png')) extension = 'png';
        else if (contentType.contains('image/gif')) extension = 'gif';
        else if (contentType.contains('image/webp')) extension = 'webp';
      } else {
        String path = parsedUri.path.toLowerCase();
        if (path.endsWith('.png')) extension = 'png';
        else if (path.endsWith('.gif')) extension = 'gif';
        else if (path.endsWith('.jpeg')) extension = 'jpg';
        else if (path.endsWith('.webp')) extension = 'webp';
      }
      final fileName = '${DateTime.now().millisecondsSinceEpoch}.$extension';
      final filePath = '${tempDir.path}/$fileName';
      final file = File(filePath);
      await file.writeAsBytes(response.bodyBytes);
      return filePath;
    } else {
      return '';
    }
  } catch (e) {
    return '';
  }
}

Custom Action 2: shareImageToSocialApp (Accepts String)

Dart

import 'package:social_sharing_plus/social_sharing_plus.dart';

Future<void> shareImageToSocialApp(String? imagePath) async {
  if (imagePath == null || imagePath.trim().isEmpty) {
    return;
  }
  try {
    await SocialSharingPlus.shareToSocialMedia(
      SocialPlatform.whatsapp,
      'Price', // You might want to pass this as a parameter too
      media: imagePath,
      isOpenBrowser: true,
    );
  } catch (e) {
    // Error handling
  }
}

FlutterFlow Setup:

  • I have added social_sharing_plus to my pubspec.yaml dependencies in FlutterFlow.

  • My action flow on the button is:

    1. downloadImageToLocalPath (with URL input, output named localImagePath).

    2. shareImageToSocialApp (with localImagePath from the previous action as input).

  • The return type for downloadImageToLocalPath is set to String.

The Problem:

When I run this in test mode or on a device, the sharing action doesn't seem to work as expected. It doesn't trigger at all. Unfortunately, local run has failed on my device so I'm flying blind. I'm not getting specific errors, making it hard to debug.

Any help or suggestions would be greatly appreciated!

Thanks,

What have you tried so far?
  • Built Custom Actions: I've implemented the two custom actions (downloadImageToLocalPath and shareImageToSocialApp) using the code provided in my post.

  • Added Dependencies: I have added social_sharing_plus to the pubspec.yaml dependencies within FlutterFlow and recompiled.

  • Tested: I have tested this flow in both FlutterFlow's Test Mode and Run Mode on different devices/simulators.

  • Basic Debugging: While I haven't seen specific errors related to file paths or the sharing mechanism, the expected outcome (WhatsApp share dialog with the image) isn't occurring.

  • Community/Docs Search: I've searched the community forums and FlutterFlow documentation for issues related using social_sharing_plus.

Did you check FlutterFlow's Documentation for this topic?
Yes
3
3 replies