More than 1 year has passed since last update.

[Flutter] ゼロからAndroidエミュレータ上で"Hello, World!"するまで

Posted at 2023-05-05

はじめに

こんにちは、yuzu_juiceです🥂
最近、スマホアプリ開発系の友人と会話をしたときにFlutterを知り、自分でも少し触ってみたくなりました。
お試し的に、Androidエミュレータ上でHello, World!したので、その手順を自分の備忘録として残しておきます。

目指すところ

Androidエミュレータ上でアプリを実行し、Hello, World!と表示させる

環境構築

2023/05/02時点の手順です。今後はバージョンや画面が変わる可能性があるので、ご留意ください。

Android環境でのHello Worldには、以下3つの環境構築が必要です。

Visual Studio Code
Flutter
Android Studio

Visual Studio Code

Visual Studio Codeのインストールをする(詳細は割愛)
https://code.visualstudio.com

Visual Studio CodeにFlutterの拡張機能を入れる

Flutter

手順自体は、公式ドキュメントにあります。以下は、手順の要約を記載

下記URLをクリック
https://docs.flutter.dev/get-started/install

Windowsをクリック

遷移先で少し下にスクロールし、flutter_windows_3.7.12-stable.zipをクリックすると、sdkがダウンロードされる

ダウンロードしたsdkをunzipし、出てきたflutterというフォルダをC:\直下に配置します。

C:\flutter\binをユーザ環境変数(Path)に設定します。

cmdを起動し、Pathが通っているか確認します。

>where flutter
C:\flutter\bin\flutter
C:\flutter\bin\flutter.bat

Android Studio

公式からダウンロードします。
https://developer.android.com/studio

Download Android Studio Flamingoをクリック

すべてそのままNextを押し、インストールします

環境構築ができているか確認

>flutter doctor
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.1555], locale ja-JP)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[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, please use
      `flutter config --android-sdk` to update to that location.

[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.3)
[!] Android Studio (not installed)
[√] VS Code (version 1.77.3)
[√] Connected device (2 available)
[√] HTTP Host Availability

Windows Version, Android toolchain, ChromeにXが付いている…
今から、AndroidでHello Worldをするので、Android toolchainは√にする必要がある。

Unable to locate Android SDKの解決

Android Studioを起動し、More ActionsからSDK Managerをクリック

Android SDK LocationのEditをクリック

そのままNextをクリック

Acceptをクリックし、Nextをクリック

少し待ち、この画面が表示されればFinishをクリック

このパスをコピー

flutterにパスを教えてあげる

>flutter config --android-sdk C:\Users\xxx\AppData\Local\Android\Sdk
Setting "android-sdk" value to "C:\Users\xxx\AppData\Local\Android\Sdk".

ここでもう一度flutter doctorする。なんかXが増えてる…

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.1555], locale ja-JP)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[!] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
    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.
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.3)
[√] Android Studio (version 2022.2)
[√] VS Code (version 1.77.3)
[√] Connected device (2 available)
[√] HTTP Host Availability

cmdline-tools component is missingの解決

SDK Tools > Android SDK Command-line Toolsにチェックを入れ、Applyをクリックしてインストール

Android license status unknownの解決

下記コマンドを入力し、ライセンスを承認する

>flutter doctor --android-licenses

以上で、Android toolchainのエラーはなくなった。

>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.7.12, on Microsoft Windows [Version 10.0.22621.1555], locale ja-JP)
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.2)
[X] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.4.3)
[√] Android Studio (version 2022.2)
[√] VS Code (version 1.77.3)
[√] Connected device (2 available)
[√] HTTP Host Availability