FlutterでiOSとAndroidのアプリを同時に作れて便利じゃん！って思ってたら、なんとWebページも同時に作れるらしくて便利じゃん！って思ったので、ちょっと試してみました。
Flutterの環境が整っている前提で手順を解説していきます。
Flutter for Webを試す手順
環境構築するために、コマンドプロンプトに以下を入力
１．betaチャネルに切り替えるらしい
flutter channel beta２．Flutterをアップグレードするらしい
flutter upgrade３．Configファイルを書き換えるらしい
flutter config --enable-webなんと、これで環境構築が完了した。
実行可能なデバイスを見てみる
以下をコマンドプロンプトに入力してみる。
flutter devicesGoogle 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 .１. flutterのプロジェクトを作成する
AndroidStudioからでもターミナルからでもOK。ターミナルの場合は以下を入力。
flutter create プロジェクト名２．作成されたプロジェクトを開く（自分の場合、AndroidStudio）
そしたら、デバイスを選ぶところに『Web』が追加されているので選択する。
３．ビルドする
ちゃんちゃん♪
まとめ
思ったよりも簡単にflutter for webを試せました。
実は、大変なのはここからのようです。というのも、プラグインがWeb版に対応していなかったり、JavaScriptの関数とやらを使おうとすると結構たいへんらしい。また、ドキュメントも整備されきっていないので、ソースコードから読み解く必要があるっぽい。
それでもあなたはFlutter for Webを使いますか？
ここまで読んでいただきありがとうございます。
コメント