Flutter: url_launcherで非推奨になったメソッドを修正したら、ブラウザが起動しなくなった

※当サイトは、アフィリエイト広告を利用しています

結論:「launchUrl」メソッドの「mode:」プロパティに、「LaunchMode.externalApplication」を設定する 

2022/5/20 Flutter エラー・バグ日記

 

アプリからWebページを開くための「url_launcher」パッケージを更新したら、今まで使っていた「launch」メソッド(ブラウザを起動するメソッド)に、非推奨のマーク(取り消し線)が表示された。

 

本記事はライトな日記思考で書いているので、詳細説明はしておらず、基本、テキストのみで画像とかは載せておりません。。m(_ _)m

解説記事ではないため、解決していない内容や、その時々の間違った解釈を述べてしまっている可能性が大いにありますので、何卒、ご了承ください。

 

調べてみると、「launchUrl」メソッドに変更された模様。

 

URLが有効か否かチェックする「canLaunch」メソッドも、「canLaunchUrl」メソッドに変更されていた。

 

こちらのChangelogを見ると、バージョン6.1.0から変更されたらしい。

 

そこで、そのままメソッド名を変更して実行したところ、URLリンクをタップするとエラーになってしまった。

 

理由は、新しい「launchUrl」メソッドの引数が、これまでの単純なURLの文字列ではなく「Uri」型に変更されたためだった(よく読むと、上記Changelogに書いてあった。。)。

 

※後で調べて知ったが、「launchUrlString」、「canLaunchUrlString」というメソッドも用意されており、これらを使えば、引数は従来どおりURLの文字列のままでも大丈夫だった。

 

そこで、「Uri.parse(URLの文字列)」のように「Uri」型のプロパティに変換した上で、「launchUrl」メソッドの引数に設定し、再実行。

 

すると今度はブラウザが起動せず、アプリ内にWebページが開くようになってしまった。

 

以前の「launch」メソッドでは、アプリ外にブラウザが起動する仕様だった。

 

アプリ内にWebページが開くのは、スマートに見えて格好良いのだが、こちら側で仕様を選択できないのはちょっと困る。。。

 

そこでソースを調べると、新しい「launchUrl」メソッドには、「LaunchMode」型の引数を取る「mode:」というプロパティがあり、ここでWebページをどう開くかを設定する仕様になっていた。

 

iOSとAndroidでは、デフォルトだと(「mode:」プロパティを設定しないと)「LaunchMode.inAppWebView」が設定されており、アプリ内Webビューの形でページが開かれる仕様になっている模様。

 

外部のブラウザを開きたい場合は、「LaunchMode.externalApplicationを設定すれば良いと分かったので、以下のようにしたら、無事、ブラウザが起動して、Webページを開けるようになった。

 

// 注:既成ライブラリ内の名称と区別するため、自作した変数・メソッド・クラス名の末尾には「O」を付けて表記

// 「externalUrlO」は、開きたいWebページのURLの文字列(String型)
void launchExternalUrlO({required externalUrlO,}) async{

  // パッケージのバージョン6.1.0以降では、URLの文字列を、Uri型に変換する必要あり
  final urlO = Uri.parse(externalUrlO);

  // URLが有効な場合は、「launchUrl」メソッドを実行
  if (await canLaunchUrl(urlO)) {
    await launchUrl(
      urlO,

      // デフォルトだとアプリ内WebViewになっているので、
      // ブラウザを起動させたい場合は、この引数が必要になった
      mode: LaunchMode.externalApplication,
    );

  // URLが無効の場合はエラーをスロー
  } else {
    throw 'Could not Launch $urlO';
  }

}

 

いつの間にか大きく仕様が変わって戸惑ったが、、今まではプラットフォームごとに異なる設定方法だったものが、統一的な設定方法に修正されて使いやすくなった、ということだと理解。

 

\一般的なエラー対処法をまとめた記事はこちら/

 

リリースしたアプリ(全てFlutterで開発)

 

個人アプリ開発で役立ったもの

おすすめの学習教材

超初心者向けでオススメな元Udemyの講座/

 

 \キャンペーン時を狙えば安価で網羅的な内容が学べる(日本語訳あり)/

 

\Gitの基礎について無料で学べる/

 

おすすめの学習書籍

実用的image_pickerに関してかなり助けられた/

 

Dartの基礎文法を素早くインプットできる/


Dart入門 - Dartの要点をつかむためのクイックツアー

タイトルとURLをコピーしました