Flutter for Webを試してみた【手順も解説します】

Flutter for Webを試してみた【手順も解説します】アイキャッチ 備忘録

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を使いますか?

ここまで読んでいただきありがとうございます。

コメント

タイトルとURLをコピーしました