FlutterでiOSとAndroidのアプリを同時に作れて便利じゃん!って思ってたら、なんとWebページも同時に作れるらしくて便利じゃん!って思ったので、ちょっと試してみました。
Flutterの環境が整っている前提で手順を解説していきます。
Flutter for Webを試す手順
環境構築するために、コマンドプロンプトに以下を入力
1.betaチャネルに切り替えるらしい
flutter channel beta
2.Flutterをアップグレードするらしい
flutter upgrade
3.Configファイルを書き換えるらしい
flutter config --enable-web
なんと、これで環境構築が完了した。
実行可能なデバイスを見てみる
以下をコマンドプロンプトに入力してみる。
flutter devices
Google Chromeが入っている環境では以下の表示になった。
Downloading package sky_engine... 2,927ms
Downloading flutter_patched_sdk tools... 16.3s
Downloading flutter_patched_sdk_product tools... 15.5s
Downloading darwin-x64 tools... 47.1s
Downloading darwin-x64/font-subset tools... 5.5s
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 87.0.4280.88
サンプルアプリを動かしてみる
※既存(beta版ではない)プロジェクトにWeb版を追加する場合
以下のコードを入力すればいいみたい。(AndroidStudioのターミナルとかでいいのかな。)
flutter create .
1. flutterのプロジェクトを作成する
AndroidStudioからでもターミナルからでもOK。ターミナルの場合は以下を入力。
flutter create プロジェクト名
2.作成されたプロジェクトを開く(自分の場合、AndroidStudio)
そしたら、デバイスを選ぶところに『Web』が追加されているので選択する。

3.ビルドする
ちゃんちゃん♪

まとめ
思ったよりも簡単にflutter for webを試せました。
実は、大変なのはここからのようです。というのも、プラグインがWeb版に対応していなかったり、JavaScriptの関数とやらを使おうとすると結構たいへんらしい。また、ドキュメントも整備されきっていないので、ソースコードから読み解く必要があるっぽい。
それでもあなたはFlutter for Webを使いますか?
ここまで読んでいただきありがとうございます。
コメント