第一章環境構築

まずは開発環境を準備します。
今回は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時間くらいで終わりました。
比較的手軽に導入できる部類だと思います。