前回の記事では Flutter の開発環境構築まで行いました。
今回から Flutter プロジェクトの作成と iOS・Android それぞれでの実行までをやって見ます。
Flutter プロジェクトの作成とiOS・Androidの実行まで【開発環境構築②】
コーディングは Visual Studio Code(以下 VSCode)で行っていきます。
VSCode を立ち上げたら 画面左下の歯車マークから Command Palette を選択します。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-14.46.29-1.png)
Flutter と打ち込み、Flutter: New Project を選択します。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-14.51.48-1024x288.png)
すると、以下のようなエラーが出ました。
「Could not find a Flutter SDK.」
Flutter SDK が見つからないと言われています。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.14.52.png)
Locate SDK をクリックして、Flutter SDK を設置したフォルダを指定します。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.19.53-1024x572.png)
VSCode を再起動して、Flutter New Project を選択すると以降エラーは出なくなりました。
先ずは、プロジェクトの名称を指定します。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.24.56-1024x98.png)
プロジェクト名には英子文字・数字・アンダースコアしか使えません。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.28.09-1024x98.png)
続いて、任意のプロジェクト設置場所を選択します。
10秒程でプロジェクトの生成が完了し、以下のような初期画面が表示されれば準備完了です。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.34.30-1024x589.png)
内容はよくわからないので、とりあえず実行してみよう、と言うことで
Run > Start Debugging > Start iOS Simulator
と進んだところ、以下のようにエラーになりました。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.46.50.png)
「Failed to launch iOS Simulator…」
どうやら、Xcode のように自動でシミュレータが起動するような仕様にはなっていないようですね(これはどうにか改善してほしい)。
仕方なく、予め手動で iPhone シミュレータを起動しておいて再度実行して見たところ、何か言われました。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.54.46.png)
「Dart DevTools includes additional tools for debugging…」
エラーではなく、Dart DevTools を使って見ませんか、みたいなことを言っているようです。
よくわからなかったのですが、Always Open をクリックして見ました。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-15.59.15.png)
「Dart DevTools needs to be installed with…」
Dart DevTools を使うには ‘pub global activate devtools’ なるものをインストールする必要があるようです。
重要性は今のところよくわかっていないですが、とりあえず Activate Dart DevTools をクリックすると、ブラウザのタブが開いて以下のようなページが出てきました。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-16.14.07-1024x478.png)
クラッシュレポートなどのデバッグに役立つ情報を取得できたりするようですね。
そのうち別の記事で触れようてみようかと思います。
で、実行画面はどうなったかと言うと
![](https://www.yururiwork.net/wp-content/uploads/2020/05/Simulator-Screen-Shot-iPhone-SE-2nd-generation-2020-05-04-at-16.18.42-576x1024.png)
最初は Hello World だけかと思っていたら、いきなりボタンまで付いていました。
せっかくなので、Android の実行もしてみようと思います。
Command Palette で Flutter: Launch Emulator を探し、Create Android emulator を選択します。
筆者の Android 開発環境は色々と整っていなかったので案の定エラーが出ました。
「No suitable Android AVD system images are available. You may need to install these using sdkmanager…」
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-16.51.03.png)
AVD system image(エミュレータのことです) をインストールしろ、とのことなので対応します。
Android Studio を立ち上げて、Configure から AVD Manager を開きます。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-17.18.55.png)
![](https://www.yururiwork.net/wp-content/uploads/2020/05/Android-Virtual-Device-Manager-2020-05-04-17-20-20-1024x782.png)
様々な端末のエミュレータが選択できます。
今回は Pixel 3 を以下の画面手順に沿ってインストールしてみました。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/Virtual-Device-Configuration-2020-05-04-17-27-17-1024x722.png)
API Level R の Download ボタンをクリックします。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/Virtual-Device-Configuration-2020-05-04-17-28-45-1024x722.png)
ダウンロードとインストールが始まります(結構重いので5分〜10分くらいはかかるでしょうか)。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/SDK-Quickfix-Installation-2020-05-04-17-38-01-1024x793.png)
Finish をクリックし、前の画面へ戻ったら Next をクリックします。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/Virtual-Device-Configuration-2020-05-04-17-40-40-1024x722.png)
エミュレータの名称を変えられますが、今回はデフォルトのままとします。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/Virtual-Device-Configuration-2020-05-04-17-42-21-1024x722.png)
無事、仮想マシン(エミュレータ)が追加されました。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/Android-Virtual-Device-Manager-2020-05-04-17-43-29-1024x782.png)
では、再度 Android で実行して見ましょう。
Command Palette で Flutter: Launch Emulator を探し、「Start Pixel 3 API R」を選択します。
初回は、必要なデータのインストールやライセンスの同意などがエミュレータに対して自動で行われるので起動までに5分前後時間を要しました。
![](https://www.yururiwork.net/wp-content/uploads/2020/05/スクリーンショット-2020-05-04-17.55.22-559x1024.png)
無事、iOS と全く同じ実行結果が表示されました。
これで漸く Flutter の開発・勉強が進みそうですね。
次回からは、Text や Button などの実践的な内容について発信をして行こうと思います。
以上
[…] https://www.yururiwork.net/archives/573 […]