🧑‍🏫

flutter webにおけるurl launcherのtips

に公開
Firebase
Flutter
Dart
Firebase Hosting
FlutterWeb
tech

対象読者

  • flutterで外部リンクを開くアプリを開発している
  • firebase hostingでアプリを公開する（flutter web）

概要

flutterにて外部リンクを開きたい際に、url_launcherパッケージのlaunchUrlメソッドを用いることが多いと思います。
https://pub.dev/packages/url_launcher
flutter webでは、launchUrlで新たなタブでURLを開く際に、一工夫必要です。

元々のコードとその問題点

Future<void> _launchUrl(Uri url) async {
  if (await canLaunchUrl(url)) {
    launchUrl(url);
  } else {
    print('Cannot launch url: $url');
  }
}

私は最初、以上のコードをonPressedで実行するTextButtonウィジェットを配置していましたが、クリックしても外部リンクが開きませんでした。

修正後コード

Future<void> _launchUrl(Uri url) async {
  if (await canLaunchUrl(url)) {
    launchUrl(
      url,
+     mode: LaunchMode.platformDefault,
+     webOnlyWindowName: '_blank'
    );
  } else {
    print('Cannot launch url: $url');
  }
}

簡単に言えば、挙動をより明確に指定しました。

  • modeは、主にiOSとAndroidで必要な設定であり、webではあまり意味ないです。
  • webOnlyWindowNameは、flutter web専用の設定です。
    • _blankは、新しいタブで外部リンクを開きます。
    • _selfは、現在のページのまま外部リンクを開きます。

まとめ

この問題の解決にほぼ1日を費やしました。この記事が皆さんの時間節約に役立てば幸いです。

参考リンク

https://pub.dev/packages/url_launcher
https://pub.dev/documentation/url_launcher/latest/url_launcher/launchUrl.html

Discussion