必要に迫られたのでFlutterを学びます①～環境構築編～

プログラミングしない系プログラマがスマホアプリの開発のためにFlutterを勉強する話
勉強の時系列順でQiita記事を分割してます

環境構築編　⇐　今ここ
Hello World編
外部パッケージ利用編
StatefulWidget利用編

どうでもいいけど最近のBGMはVtuberのニュイ・ソシエール氏のウイニングポスト実況にしてます。

第一章 環境構築

まずは開発環境を準備します。
今回はWindows版です(ChromeOSでしようと思ったら、ハードが古くてダメだった)。
個人的にエディタを統一したい主義なので、VSCodeで開発できるよう準備します。

下記を参考にしました。
WindowsでFlutterの環境をつくろう
2018年の記事でしたが、基本的にプロセスは変わりませんでした。
先達に感謝です。

また下記も参考にしました。
Flutterの開発環境(Windows + Android Studio)を構築する
AndroidStudioの設定部分で大変参考になりました。

Flutterのインストール

まずはFlutterのインストールページにアクセスします。

少しページを下に動かすと、「Get Started」とあるので、そいつをクリックします。

こんな画面に遷移するので、自身の環境に合わせて選択をしてください。
なおここには表示がないですが、別ページにChromeOS版のFlutterも公開されてますので、
ChromeOSを利用する方はそちらのページに行ってください。

ここからはWindows版の話になりますが
get the Flutter SDKの章に最新版のzipファイルがありますので、それをインストールします。

ダウンロードしたZipファイルは任意の場所に解凍しましょう。
とくにこだわりがない人はCドライブ直下などで良さそうな気もします。
僕のCドライブはSteamのデータでいっぱいなので、Dドライブに入れました。。。

他の言語同様PATHを通す必要があるので、通しました。

PATHが通っているかどうか確認します。

flutter --version
Flutter 1.17.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision f7a6a7906b (11 days ago) • 2020-05-12 18:39:00 -0700
Engine • revision 6bc433c6b6
Tools • Dart 2.8.2

いい感じですね。

さてこのままコマンドプロンプトで不足しているツールを探します。

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.1, on Microsoft Windows [Version 10.0.18363.836], 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.dev/docs/get-started/install/windows#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location.
      You may also want to add it to your PATH environment variable.

[!] Android Studio (not installed)
[!] VS Code (version 1.45.1)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

Android toolChain, Android Studio, VSCodeのFlutter Extentionなどがないんですね。
それでは続いて上記のインストールをしていきましょう。

Android Studioのインストール

どうもflutter doctorの結果を読む限り、AndroidStudioを入れれば、ほとんど解決する気がします。
ということで指定されたURLからAndroidStudioをインストールします。

exeファイルでインストールできるので楽ですね。

基本はNext連打で問題なさそう

ダウンロードしたらとりあえず起動だけさせておきます。
エミュレータの設定など必要になりますので、とりあえずインストールできるものはインストールしときます。

で確認があるので、Finishを押してインストールします。
ちなみに私の環境だと結構時間がかかりました。5分くらい？

終わるとこんな感じ

Intel HAXMを別途インストールしないといけないとか聞いてましたが、ログを見る限り不要そうですね

メイン画面のConfigureからSDKManagerを確認してみると、各Androidのバージョンが確認できます。
今は最新の10.0ですね。

同様にConfigureからPluginを選択します

Eclipse同様marketplaceが起動します。
ここでFlutter系のプラグインをインストールします。
※途中でDartのインストールの有無を聞かれますので、「Yes」を選択してください。

ここで「Restart」することでFlutterのExtentionが反映されることになります。

注意

Restartすると以下のような画面が表示される。

先ほどインストールしたFlutterが反映されているのも確認できます。
ただ先ほどまであった「Configure」が消えてますね。。。

ということで1時間ほど試行錯誤してましたが、、、

表示領域を広げたら表示されるようになりました。
いやー、苛々した

さてもう少しAndroidStudioの準備をします。
エミュレータの設定をしたいので、ConfigureからAVDManagerを選択します。

デフォではNexusが準備されているようです。
試しに再生ボタンを押してエミュレータを起動させてみます。
※ローンチに10秒ほどかかります


予想以上にきれいに起動しますね。
技術の進歩を感じます。

さてこのあたりのPATHも登録しておきます。
ここは皆さんのインストールした先を設定してください。
ANDORID_SDK_ROOT=D:\AndroidSDK

さてこのタイミングでflutter doctorを試します。

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.1, on Microsoft Windows [Version 10.0.18363.836], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
    X Android license status unknown.
      Try re-installing or updating your Android SDK Manager.
      See https://developer.android.com/studio/#downloads or visit visit
      https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.
[√] Android Studio (version 3.6)
[!] VS Code (version 1.45.1)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.

なるほど。ライセンスの登録が必要なわけで。。。
下記コマンドでライセンスの登録をしていきます。

JDKのバージョンが9以上だとエラーが出ると先達の記事にありましたが、
※2020年5月現在でもエラーが出ました(Java10.0.2)
　なので今回はJava1.8.0_171に切り替えて実施してます。

>flutter doctor --android-licenses
<中略>
All SDK package licenses accepted

ということで改めて確認してみます。

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.17.1, on Microsoft Windows [Version 10.0.18363.836], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Android Studio (version 3.6)
[!] VS Code (version 1.45.1)
    X Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

想定通りAndroidStudio関係の準備は整いました。
残るはVSCodeの準備ですね

VSCodeの準備

ここではVSCodeのインストールの解説は行いません。
記憶では普通にインストールすれば、普通にエディタとして開けた気がします。

さてExtentionからFlutterで検索して導入していきます。

インストールが終わったらCSCode上でflutter doctorをしてみます。

いい感じですね。
ここまでで環境構築が完成です。
ニュイポみながら、Qiita書きながらだいたい1時間くらいで終わりました。
比較的手軽に導入できる部類だと思います。