🧑🏫
flutter webにおけるurl launcherのtips
対象読者
- flutterで外部リンクを開くアプリを開発している
- firebase hostingでアプリを公開する（flutter web）
概要
flutterにて外部リンクを開きたい際に、url_launcherパッケージのlaunchUrlメソッドを用いることが多いと思います。
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日を費やしました。この記事が皆さんの時間節約に役立てば幸いです。
参考リンク
Discussion