Androidのメモとか

ポキオの日記です。今日も遅延してない。

FlutterでChrome向けにビルドしようとした時にハマったのでメモ

揚げ物ではないです。

ポキオ Flutter Android Web Chrome

Flutter環境を構築中

前回Big Surの起動メディアを作って、家にある人柱になっても良さそうなMacBook Airにインストールしたわけなんですが。

relativelayout.hatenablog.com

個人的な信条としては必ずクリーンインストールをしないと気が済まないため、せっせと環境を再構築中です。その中でもFlutterの環境を構築しなおした時にハマったのでメモしておきます。

flutter.dev

Flutterっていうのはこれ。これを読んでいる諸兄姉にとっては釈迦に説法かもしれませんが、Googleが開発したクロスプラットフォームなアプリを作れる仕組みです。

flutter.dev

インストール方法も簡単で、ZIPファイルをダウロードして、展開して、パスを通すだけ。

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_1.22.4-stable.zip
$ export PATH="$PATH:`pwd`/flutter/bin"

そして、プロジェクトを作るのもこんな感じ。

$ flutter create fluttertest

これでfluttertestというプロジェクトができちゃいます。

早速Hello, world

あらかじめVS Codeをインストールの上、FlutterとDartプラグインをインストールしておけば、VS Code上で開発ができちゃいます。

ポキオ Flutter Android Web Chrome

さらに、Android Studioがインストール済みで、ADB接続できる実機か仮想デバイスがあればVS Codeからその環境にアプリをインストールして実行することができます。

ポキオ Flutter Android Web Chrome

ここまではいいんですが。問題はここから。

Chromeで実行できない?

クロスプラットフォームの良さみを感じたくて、Chromeで実行しようと思ったわけです。FlutterのオプションでChromeでの実行を有効にしてみます。

$ flutter config --enable-web

これで、ビルド対象をChromeにして実行すれば大丈夫かなぁと思ったんですが・・・。

ポキオ Flutter Android Web Chrome

ビルド対象にChromeが出てきません・・・。

flutter.dev

最初っから本家チュートリアルを見ればよかったんですが、

Flutter has early support for running web applications, but you need to be running the beta channel of Flutter at present.

というわけで、Beta版のFlutterを使わないとChromeで実行できなさそうです。

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

こんな感じで、Beta版に切り替えた後に、再度Chromeでの実行のオプションを有効にして、VS Codeを再起動すると・・・

ポキオ Flutter Android Web Chrome

ビルド対象にChromeが表示されました!Chromeを選択してビルドを行うと・・・

ポキオ Flutter Android Web Chrome

無事にChromeでも実行することができましたー。お疲れ様でした(笑)

基礎から学ぶ Flutter

基礎から学ぶ Flutter

「Androidのメモとか」は、Amazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

このブログは個人的なメモ書きであったり、考えを書く場所であります。執筆者の所属する団体や企業のコメントや意向とは無関係であります。また、このブログは必ずしも正しいことが書かれているとは限らず、誤字脱字や意図せず誤った情報を載せる場合がありえます。それが原因で読者が不利益を被ったとしても、執筆者はいかなる責任も負いません。ありがとうございます。