【Flutter入門】スマホアプリを作って公開するまでの軌跡！ ①開発環境を作ろう！

Flutter（フラッター）とは、Googleが開発したUIフレームワークです。

存在は知っていたものの、業務ではまったく扱う機会が巡ってこないので、自分で勉強してみることにしました。

最終的には、モバイルアプリを開発して公開したいと考えています。

何はともあれ、まずは開発環境を構築してみたいと思います。

Flutterのダウンロード
Flutter SDKを解凍しよう
flutter doctorでシステムチェックしよう
Android toolchain って何？
- さっそく追加しよう
Visual Studio Code に Flutter をインストール
最後に

Flutterのダウンロード

まずは公式サイトを開いてください。

Flutter - Build apps for any screen

Fluttertransformstheentireappdevelopmentprocess.Build,test,anddeploybeautifulmobile,web,desktop,andembeddedappsfromasinglecodebase.

右上の『Get started』をクリックします。

私は、Windows環境なので「Windows」を選択します。

Flutter SDKをダウンロードします。

Flutter SDKを解凍しよう

先ほどダウンロードしたZIPファイルを解凍してください。

場所は任意の場所で構いません。
ちなみに、公式サイトには、例として
C:\Users\<your-user-name>\Documents
と書かれています。

ただし、C:\Program Files\ のように管理者権限を必要とする場所にはインストールしないようにしてください。

flutter doctorでシステムチェックしよう

解凍したflutterフォルダにある flutter_console.bat を起動してください。
コンソール画面が起動します。

Flutter開発で必要なツールがパソコンにインストールされているか flutter doctor を実行してみます。


        ######## ##       ##     ## ######## ######## ######## ########
        ##       ##       ##     ##    ##       ##    ##       ##     ##
        ##       ##       ##     ##    ##       ##    ##       ##     ##
        ######   ##       ##     ##    ##       ##    ######   ########
        ##       ##       ##     ##    ##       ##    ##       ##   ##
        ##       ##       ##     ##    ##       ##    ##       ##    ##
        ##       ########  #######     ##       ##    ######## ##     ##


 WELCOME to the Flutter Console.
 ===============================================================================

 Use the console below this message to interact with the "flutter" command.
 Run "flutter doctor" to check if your system is ready to run Flutter apps.
 Run "flutter create <app_name>" to create a new Flutter project.

 Run "flutter help" to see all available commands.

 Want to use an IDE to interact with Flutter? https://flutter.dev/ide-setup/

 Want to run the "flutter" command from any Command Prompt or PowerShell window?
 Add Flutter to your PATH: https://flutter.dev/setup-windows/#update-your-path

 ===============================================================================

F:\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version
    10.0.19042.1466], locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for
      more details.
[√] Chrome - develop for the web
[√] Android Studio (version 2020.3)
[√] VS Code (version 1.57.1)
[√] Connected device (2 available)

! Doctor found issues in 1 category.

F:\flutter>

“Android toolchain” に [!] マークが付きました。

“cmdline-tools component is missing”（cmdline-toolsコンポーネントがありません）

と書かれています。

Android toolchain って何？

私の場合、Android Studio はインストール済みです。
でも、Android toolchain は無いらしい。。。

『Android toolchain』って何？

どうやら Android SDK Tools の一部らしいです。

さっそく追加しよう

まずは、Android Studio を起動してください。

メニューバーから「Tools」⇒「SDK Manager」を選択します。

「SDK Tools」のタブを開いて、『Android SDK Command-line Tools (latest)』にチェックが付いているか確認してください。私は、下図のとおりチェックが付いていませんでした。

と、いうわけでチェックを付けて「OK」ボタンをクリックします。

確認メッセージが表示されるので、「OK」ボタンをクリックします。

あとは、インストールが終わるのを待ってください。

再び、flutterのコマンドラインで “flutter doctor” コマンドを実行します。

ただし、下記は先に乗せていたログの抜粋ですが、2個目のバツに
“Android license status unknown.”
となっています。

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for
      more details.

“flutter doctor –android-licenses”を実行してライセンス認証しろと言っているので言われるがままに実行します。

F:\flutter>flutter doctor --android-licenses

何回か「Accept? (y/N): 」と聞かれるので、”y”を入力していってください。

全ての認証が完了したら、再度 flutter doctor を実行して下記のようになっていたら完了です。

F:\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.8.1, on Microsoft Windows [Version
    10.0.19042.1466], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[√] Chrome - develop for the web
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.57.1)
[√] Connected device (2 available)

• No issues found!

F:\flutter>