Open mobile share sheet using flutter web in mobile browser

Question

I want to share content on social sites using mobile browser in my flutter web site i used share_plus but it is not opening the share sheet just opening the email if i provide subject in it.

 Share.share("This is a text message", subject: "");

Answer 1

Since not all browsers are supported, we can check the availability of the API before attempting to call it from Flutter Web.

On Safari(Mac OS/iOS) and Chrome(Windows/Chrome OS) this works just fine:

I have the following working:

Widget buildShareButton(BuildContext context, Event event) {
  final bool result = _canUseWebShare();

  if (result) {
    logger.i('Using newer share button.');
    return _buildSharePlusButton(context, event);
  } else {
    logger.i('Using fallback share button.');
    return _buildFallbackShareButton(context, event);
  }
}

bool _canUseWebShare() {
  try {
    final js.JsObject navigator = js.context['navigator'] as js.JsObject;
    return navigator.hasProperty('canShare');
  } catch (e) {
    return false;
  }
}

Widget _buildSharePlusButton(BuildContext context, Event event) {
  return IconButton(
    tooltip: 'Share too...',
    icon: Icon(Icons.adaptive.share_outlined),
    onPressed: () async {
      // Using Share Plus
      Share.share(
        '${event.url}\n\n${event.description}',
        subject: event.name,
      );
    },
  );
}

Widget _buildFallbackShareButton(BuildContext context, Event event) {
  return IconButton(
    tooltip: 'Share too...',
    icon: Icon(Icons.adaptive.share_outlined),
    onPressed: () async {
      // older implementation
    },
  );
}

References:

• https://github.com/fluttercommunity/plus_plugins/blob/main/packages/share_plus/share_plus/lib/src/share_plus_web.dart
• https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API
• https://developer.mozilla.org/en-US/docs/Web/API/Navigator/canShare