在移动浏览器中使用 flutter web 打开移动共享表

Question

我想在我的 flutter 网站中使用移动浏览器在社交网站上分享内容 我使用了 share_plus 但它不会打开共享表，只是打开电子邮件（如果我在其中提供主题）。

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

Answer 1

由于并非所有浏览器都受支持，因此我们可以在尝试从 Flutter Web 调用 API 之前检查 API 的可用性。

在 Safari（Mac OS/iOS）和 Chrome（Windows/Chrome OS）上，效果很好：

我有以下工作：

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
    },
  );
}

参考资料：

• 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