Flutter webで外部リンクを開く

Flutter とは？

Flutterは１つのコードでiOSとAndroidアプリケーションを作成することができるGoogleのUIフレームワークです。
以下のような特徴があります。
- モダンなリアクティブフレームワーク
- 速い2Dのレンダリングエンジン
- 速く開発するためのツール
- 既製のウィジェット

全体を体系的に学ぶには、Udacity のFlutterのコースがオススメです。GoogleのFlutter開発支援チームの方が講師として教えてくれます。

FlutterはWebに対応した！

Flutterは１つのコードでiOSとAndroidアプリケーションを作成することができる

と言いましたが、WebのUIとしてもビルドすることができるようになりました。
とは言っても以前から flutter_web というpackageによって、webで利用することはできました。

しかし、このようなブラウザをサポートするプラグインを入れなくても、webで動くようになります。

In future, we plan to generate PWA configuration files to support Progressive Web Apps.

将来的にはPWAのサポートもされるようになるようで、これからさらにFlutterは熱くなりそうです。

Flutter webを使えるようにする

まず Flutter のインストールは以下を参考にします。
https://flutter.dev/docs/get-started/install

次に、Webアプリが構築できるようにします。以下を参考にします。
https://flutter.dev/docs/get-started/web
やることは簡単で、以下をするだけ。

 $ flutter channel master
 $ flutter upgrade
 $ flutter config --enable-web

おそらく、Webアプリとしてビルドできるようになると以下のようになると思います。

$ flutter devices
2 connected devices:

Chrome          • chrome          • web-javascript • Google Chrome 77.0.3865.90
Headless Server • headless-server • web-javascript • Flutter Tools

デバッグには、Chromeが必要なのでChromeが入ってない場合はインストールが必要です。

Webアプリを実行する時は

$ flutter run -d chrome

ビルドする時は、

$ flutter build web

です。

Flutter web で 外部リンクを開く

Flutterでは外部リンクを開く際に、 url_launcher というパッケージを利用することが多いと思います。
https://pub.dev/packages/url_launcher

Supports iOS and Android.

しかし、現在[2019-10-14]では、Webで使用できないと思われます。実際使用しましたが、使用できませんでした。

redditのFlutterDevでも質問がありました。やっぱりFlutter webでは使えないっぽい。
https://www.reddit.com/r/FlutterDev/comments/brar5u/how_can_i_open_the_link_in_flutter_for_web/

そして、このFAQにWebでの使い方の代替案がありました。 dart:html パッケージを使用します。

import 'dart:html' as html';

_launchURL(url) {
  html.window.open(url, '');
}

この関数をInkWellやbuttonのonPressedなどに当てることで同様の処理ができるようになりました。

dart:js パッケージでもいけます。

import 'dart:js' as js;

_launchURL(url) {
  js.context.callMethod("open", [url]);
}