ゼロから始めるFlutter、VS CODEでHelloWorldをする
１，はじめに
最近開催された、技術書典において、Flutterで開発をする本を購入した。
その本の記載情報と、ネット上の情報を片手に、FlutterでHelloWorldをする一連の動作を検討した。
とはいえ、上記の本はAndroid Studioで環境を構築するものであった。
だが、私はVisual Studio Codeで開発がしたい。
そこで、今回はFlutterをVS CODEで使用するための一連の流れを記事にした。
２，開発環境の構築
(1) Flutterとは
今回、Flutterの開発環境を構築しようとしている。
このFlutterとは、Google社が開発したモバイルアプリ開発用のフレームワークである。
これを使用することで、AndroidとiOSの両方で動作するアプリを容易に開発できるとされている。
(2) 開発環境
今回、Flutter ( v0.9.4 )を導入する環境は下記の通りである。
- Windows 10
- Visual Studio Code
(3) Flutterのインストールと動作確認
(a) Flutter
(i) ダウンロード
Flutterを公式サイトからダウンロードする（下記URL参照）。
https://flutter.io/get-started/install/
ダウンロードしたのち、ファイルを展開する。
なお、FlutterコマンドはGitを内部的に使用している。
そのため、Git未導入の場合、Gitをインストールする必要がある。
(ii) 動作確認
Windows版であれば展開したフォルダ内に存在する「flutter_console.bat」を実行する。
Figure 1
上記Figure１のような画面が表示されれば起動成功である。
次に、「flutter doctor」コマンドを実行し動作確認をする。
この際、Android Studioの有無などの検査が行われる。
Figure 2
上記Figure 2のように動作確認が実施されていればよい。
なお、筆者の環境では、下記の診断結果が出力された。
G:\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, v0.9.4, on Microsoft Windows [Version 10.0.17134.345], locale ja-JP)
[X] Android toolchain - develop for Android devices
X Unable to locate Android SDK.
Install Android Studio from: https://developer.android.com/studio/index.html
On first launch it will assist you in installing the Android SDK components.
(or visit https://flutter.io/setup/#android-setup for detailed instructions).
If Android SDK has been installed to a custom location, set $ANDROID_HOME to that location.
[X] Android Studio (not installed)
[√] VS Code, 64-bit edition (version 1.28.1)
[!] Connected devices
! No devices available
! Doctor found issues in 3 categories.ご覧の通り、本稿の本節の執筆時点では、Android開発用のSDKやAndroid Studioをインストールしていないことが指摘されている。
また、開発用PCとデバイスをUSB等で接続していないことも指摘されている。
診断結果はどうであれ、こうした診断が実施されていれば、Flutterの導入は成功しているといえる。
(iii) 環境変数の追加
FlutterへのパスをWindowsの環境変数に追加する。
この際、先ほど展開した Flutterフォルダ内にある「bin」フォルダに対してのパスを張る。
例えば、「C:\flutter\bin」等を環境変数「PATH」に追加する。
(iv) Android SDK等のインストール
本節は、上記(ii)においてFlutterから問題を指摘された方向けである。
詳細は省くが、下記のURLより各々インストール等をしても良い。
なお、筆者の環境では、Android Studioのインストール後に「flutter doctor」を実行したところ、下記のような指摘を受けました。
[!] Android toolchain - develop for Android devices (Android SDK 28.0.3)
X Android licenses not accepted. To resolve this, run: flutter doctor --android-licensesFlutterからの指示通り「flutter doctor –android-licenses」を実行した。
Figure 3
以下 Google の各種のライセンスに同意しますか、という画面が続く。
Figure 4
これで、ライセンスへの同意が完了となる。
(b) Visual Studio Code用のFlutter拡張機能のインストール
もちろん、コマンドラインだけでもFlutterの開発はできる（例えば「flutter create project-name」など）。
しかし、今回はVisual Studo Codeを用いて開発をしたいため、下記２点の拡張機能を導入する。
(4) HelloWorldプロジェクトの作成
上記の(1)から(3)までが完了すれば、FlutterとVS CODEを用いた開発環境の構築は完了したといえる。
そこで、次にHelloWorldプロジェクトを作成したい。
(a) 新規プロジェクトの作成
まず、VS CODEのメニュー「表示」の中から「コマンドパレット」を選択する。
Figure 7「表示」⇒「コマンドパレット」
次に、コマンドパレットを選択すると出てくる「Flutter: New Project」を選択する。
Figure 8 「コマンドパレット」⇒「Flutter: New Project」
すると、プロジェクト名を入力するテキストボックスが出てくるので、任意のプロジェクト名を入力する。
Figure 9 「Flutter: New Project」⇒「プロジェクト名入力」
上記のFigure 9でプロジェクト名を入力し「Enter」キーを押下する。
すると、プロジェクトファイル等を保存するフォルダを指定するダイアログが表示される。
ダイアログを操作し、任意の場所を指定してよい。
Figure 10 「プロジェクト名入力」⇒「プロジェクトファイル等の保存場所指定」
「Select a foldor to create the project in」ボタンを押下すると、プロジェクトで使用するファイルの作成が始まる。
上記のボタン押下後、ファイルの生成が完了するまで30秒程度かかるので、画面の前で待機します。
Figure 11 「フォルダ選択」⇒「プロジェクトファイル一式の生成」
以上で、プロジェクトの作成は完了である。
(b) Hello World
(i) Flutterの構成確認
開発を開始する前に、一度「flutter doctor」コマンドを実施し、不足がないかを確認する。
Figure 12 「Flutter doctor」
大きな問題が指摘されていない事を確認後、VS CODEに戻る。
(ii) Androidの仮想マシンの作成 ( VS CODE )
本節は、Androidの仮想マシンを作成していない方向けである。
その為、Androidの仮想マシンの作成が完了している方は、(iv)まで読み飛ばしてほしい。
VS CODE上で仮想マシンを作成したかったが、筆者の環境では作成できなかった。
そのため、Android Studioを用いて作成する方法を下記(iii)に記載した。
しかし、VS CODEからでも作成は可能と思われるため、テキストは残しておく。
Androidの仮想マシンの作成が未完了だと、VS CODEの下部バーに「No Devices」という表示が出る。
Figure 13 「No Devices」
この場合、上記Figure 13の「No Devices」をクリックする。
すると、新たなAndroid仮想マシン作成の項目が表示されるため、クリックする。
Figure 14 「No Devices」⇒「Create New」
すると、「Creating emulator」というメッセージが表示され、仮想マシンが作成されるかのように見える。
Figure 15 「Create New」⇒「Creating emulator」
しかし、筆者の環境では、仮想マシンは作成される事はなかった。
メッセージを調べると、下記の通りであった。
Figure 16 「Creating emulator」⇒「エラーメッセージ」
No suitable Android AVD system images are available. You may need to install these using sdkmanager, for example:
sdkmanager "system-images;android-27;google_apis_playstore;x86"仕方がないので、Android Stuioの方から、SDK Managerを呼び出し仮想マシンを作成する。
(Iii) Androidの仮想マシンの作成 ( Android Studio )
Android Stduio の「Tool」を選択し「SDK Manager」を選択する。
Figure 17 「Android Studio」⇒「Tool」⇒「SDK Manager」
すると、下記のような画面が表示される。
Figure 18 「SDK Manager」⇒「SDK Tools」
上記Figure 18の画面上で、「Android Emulator」を選択し「Apply」ボタンを押下する。
そうすると、確認画面が表示されるので、「OK」ボタンを押下する。
Figure 19 「SDK Manager」⇒「Apply」
すると、下記のようにインストールする画面が表示される。
Figure 20 「Apply」⇒「インストール画面」
この処理は完了するまでに、時間がかかる。
Figure 21
これで、仮想マシン用のソフトウェアのインストールが完了した。
なお、人によってはFigure 18の画面の「SDK Platforms」から、任意のAndroid実行環境を選択することもあるだろう。
次に、仮想マシン自体の作成を行う。
Android Studioから「Tool」を選択し「AVD Manager」を選択する。
Figure 22 「Android Studio」⇒「Tool」⇒「AVD Manager」
選択すると、下記のような画面が表示される。
そこで「Create Virtual Device」ボタンを押下する。
Figure 23 「AVD Manager」
すると、下記のような画面が表示される。
Figure 24 「AVD Manager」⇒「Create Virtual Device」
端末を選択し「Next」ボタンを押下し、仮想マシンで動作させるAndroid OSを選ぶ。
Figure 24 「Create Virtual Device」⇒「Next」
OSのバージョンについては、SDK Platformが導入されているバージョンのOSを選ぶとよいと思われる。
この際、青文字になっている「Download」テキストをクリックする。
Figure 25 「Next」⇒「Download」
しばらく待つと、完了画面が表示される。
Figure 26
「Finish」ボタンを押下し、先ほどダウンロードしたAndroid OSを選択して「Next」ボタンを押下する。
Figure 27
すると、下記Figure 28のような画面が表示される。
Figure 28
この画面まできたら、「Finish」ボタンを押下する。
しばらくすると、下記Figure 29のような画面が表示される。
Figure 29
ここまでくれば、仮想マシンの作成は完了である。
(iv) HelloWorldプロジェクトのコンパイル
まず、先ほどのFigure 13の所に「No Devices」と表示されているかを確認する。
ここに「No Devices」が表示されていた場合、「No Devices」を押下し、起動したい仮想マシン名をクリックする。
Figure 30 「No Devices」押下⇒起動したい仮想マシン名をクリック
しばらくすると、仮想マシンが立ち上がり、HelloWorld プログラムが実行される。
Figure 31
３，まとめ
最初のアプリが動作したのが、環境等構築開始から6時間経過した後だった。
途中コンパイラがメモリ不足でクラッシュしたり、メモリ不足で仮想マシンが起動しなかったりと、やたらとメモリをAndroid開発は食うなと思った。
まだ、Flutterを用いて何かをしたりはしていないが、今日はもう疲れた。
メモリをめちゃくちゃ食う重たいAndroid Studioや仮想マシンはもうこりごり・・・
ハイブリッドアプリの方が気楽だったし私には向いているのだろうなと、少し思った。
最近のコメント