Help us understand the problem. What is going on with this article?

Flutter webで外部リンクを開く

Flutter とは?

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

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

FlutterはWebに対応した!

Flutterは1つのコードで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]);
}
taigamikami
大学生 自分の勉強・メモとしてQiitaに投稿しています。おかしいと思う部分は遠慮なくご指摘いただければと思います。 Ruby/Rails/Swift/iOS/Python
https://taigamikami.github.io/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした