Flutter実行環境の構築(Android StudioとXcode)

概要

急遽Flutterの検証を行う必要があったので備忘録兼ねて構築からインストールまでを記事にまとめたいと思います。
iOSでの実行も確認したいので、Xcodeでの実行もまとめていますが、メインはAndroid Studioでの環境構築となります。

各種手順

Android Studioと各種ツールのインストール
Xcodeインストール
Flutterインストール
Android Studioに対するFlutterプラグインのインストール
Flutterプロジェクト作成
Flutterの各種初期設定(初回のみ)
Flutterアプリケーション起動確認

Android Studio

インストールまで

Android Studio公式に接続して「Download Android Studio」をクリック

利用規約の「同意します」にチェックを入れダウンロード
下記のファイルがダウンロードされるので実行

Windows:android-studio-ide-183.5522156-windows
Mac:android-studio-ide-183.5522156-mac.dmg

Windowsの場合
ダウンロードされたexeファイルを実行して「Next」をクリック

「Next」をクリック

「Next」をクリック

「Install」をクリック

完了したら「Next」をクリック

Macの場合
上記のファイルを実行して生成される「Android Studio.app」をアプリケーションフォルダに入れた後appを実行する

初期設定

インストールが完了したAndroid Studioを起動する

「Do not import settings」にチェックがついた状態で「OK」をクリック

「Don't send」をクリック

「Next」をクリック

「Custom」にチェックが入っていることを確認して「Next」をクリック
「Standard」の場合、テーマ選択以降は省略される

好きな方のテーマを選択して「Next」をクリック

※「Custom」の場合表示
インストールするコンポーネントとAndroid SDKのインストール先を指定して「Next」をクリック

Android SDKのインストール先を変更した場合
Flutterはデフォルトインストール先を基にしてAndroid SDKを確認するので、変更した場合は
環境変数ANDROID_HOMEを作成し、パスはAndroid SDK Locationを指定すること

※「Custom」の場合表示
「Next」をクリック

インストール構成を確認して「Finish」をクリック

「Finish」をクリック

HAXMのインストールに失敗した場合

HAXM installation failedと表示された場合

HAXM公式サイトに接続後、「Downloads」欄のhereをクリック

対応するOSのzipをダウンロード

zipを解凍後にできたアプリケーションを実行
「続ける」をクリック
Windows: intelhaxm-android.exe
Mac: IntelHAXM_7.5.1.dmg

インストール先の変更が必要でなければ「インストール」をクリック

インストール後に下記の図のメッセージが表示される場合は機能拡張を許可する必要がある

「システム環境設定」の「セキュリティとプライバシー」を開き、ダウンロードしたアプリケーションの実行許可下部にIntel HAXMへの権限を確認する文章が追加されているので「許可」をクリック

実行確認

Macの場合
MacでAndroidエミュレータが起動しない(HAXMが起動しない)とき
kextstat | grep intelを実行した場合に何らかの文字列が出力されたらインストールが完了している

HAXMのアンインストール

HAXMで何らかの不具合が発生している場合は一旦アンインストールしてインストールをし直した方が良い

Windowsの場合
Intel Hardware Accelerated Execution Manager（HAXM) インストールとアンインストール
【インストール先もしくはダウンロードしたファイル先】/silent_install.bat -uを実行する

Macの場合
sudo 【インストール先もしくはインストール時にダウンロードしたファイル先】/silent_install.sh -uを実行する

Android Studioの日本語化

2020/06/01追記
Flutterの場合Android Studioの日本語化を実行するといくつかのタブが表示されなくなるといった現象が発生するようです。
記事には残しておきますが実行しない方がよいでしょう。

Android Studio / IntelliJ IDEA の日本語化と設定
MacでAndroid Studioを日本語化する

Pleiades プラグインに接続して使用しているOSのプラグインをダウンロード

ダウンロードされたzipファイルを解凍後、以下のアプリケーションを起動
Mac: 解凍先/pleiades-mac/setup.app

「選択」をクリックして先ほどインストールした「【インストール先】/Android Studio/bin/studio64.exe」もしくは「Android Studio.app」をクリックして「開く」を選択

設定に問題がないことを確認して「日本語化」をクリック

Android Studioを起動して日本語化されていることを確認する

AVDの作成

今回は仮想デバイスを作成したいだけなのでHAXMを使用した高速AVDでの構築を行なっておりません。
高速AVDで仮想デバイスを構築したい場合は下記の記事がとても参考になります。
Windowsで高速AVDを利用するまでの手順をものすごく詳しく解説

「ツール」、「AVDマネージャー」をクリックしてAndroid仮想デバイス・マネージャーを起動後、「仮想デバイスの作成」をクリック

任意のハードウェアを選択して「次へ」をクリック

既にシステムイメージのダウンロードが完了している場合は選択するだけで良いが、目的のイメージがインストールされていない場合は
「Download」をクリックし、ダウンロードが完了したら再度選択をして「次へ」をクリックする

構成を変更する場合は各種変更後、「完了」をクリック

シミュレータの起動

「ツール」、「AVDマネージャー」をクリックして作成したデバイスの右側にある「▶︎」をクリック

ばらくするとOSが起動するので動作を確認し、正常に動くことを確認する

完全アンインストール

こちらの記事を書いている最中、Android Studioを壊してしまったので完全アンインストール方法を探していたのですが
Windows、Mac共に削除だけだと消えないそうなのでまとめました。
再インストール前に全ての環境を初期化したい場合は下記を実行すれば全削除を行うことができます。

Windowsの場合

Android studioを完全にアンインストールしたい。

下記フォルダを削除すれば設定を削除して初期化を行う事が可能

# Android SDKのインストール先を変更している場合、下記フォルダではなくANDROID_HOMEのパスを確認する
C:/Users/【ユーザ名】/AppData/Local/Android/sdk
# .AndroidStudioX.Xはバージョン番号によってフォルダ名が異なる
C:/Users/【ユーザ名】/.AndroidStudioX.X
C:/Users/【ユーザ名】/.gradle

Macの場合

MacでAndroidStudioを完全アンインストール

Android SDKを削除する場合のコマンドはrm -r ~/Library/Android*だが、インストール先を変更している場合はANDROID_HOMEのパスを確認すること

Xcode

インストールまで

App Storeを起動してXcodeで検索して「インストール」をクリック

インストールが完了後、初めて起動する場合はライセンス規約が出るので「Agree」をクリック

シミュレータの起動

Xcodeでの起動

「Xcode」、「Open Developer Tool」、「Simulator」をクリック

しばらくするとOSが起動するので動作を確認し、正常に動くことを確認する

Android Studioでの起動

※Flutterの各種設定が終了後に実行可能
画面右上のデバイス表示部分をクリック後、「Open iOS Simulator」をクリック
しばらくするとXcodeでの起動と同じく、エミュレータが起動する

Flutterインストール

SDKインストール

Flutter公式にアクセスして「Get started」をクリック

対応するOSの部分をクリックして以下のファイルをダウンロード
Windows: flutter_windows_v1.5.4-hotfix.2-stable.zip
Mac: flutter_macos_v1.5.4-hotfix.2-stable.zip

Windowsの場合
ダウンロード後に解凍して任意のフォルダに入れる
今回はC:/develop配下に格納した

格納後、環境変数PathにC:/develop/flutter/binを追加する

Macの場合
ダウンロード後に解凍して任意のフォルダに入れる
今回は/Users/ユーザフォルダ/develop配下に格納した

格納後、パスを通すために.bash_profileを編集してパスを追加する

# vimで.bash_profileを編集する
vim ~/.bash_profile

# 実行直後にiキーを押して挿入モードに移行後、以下の行を追加
# 追加後にEscキーを押してノーマルモードに戻った後、:wqで保存してvimを終了させる
export PATH="$HOME/develop/flutter/bin:$PATH"

完了後、.bash_profileを再読み込みする

source ~/.bash_profile

実行確認

完了したら正常にパスが通っていることを確認する

flutter --version

# パスが通っていたら以下のような出力が行われる
Flutter 1.5.4-hotfix.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 7a4c33425d (9 weeks ago) • 2019-04-29 11:05:24 -0700
Engine • revision 52c7a1e849
Tools • Dart 2.3.0 (build 2.3.0-dev.0.5 a1668566e5)

  ╔════════════════════════════════════════════════════════════════════════════╗
  ║                 Welcome to Flutter! - https://flutter.dev                  ║
  ║                                                                            ║
  ║ The Flutter tool anonymously reports feature usage statistics and crash    ║
  ║ reports to Google in order to help Google contribute improvements to       ║
  ║ Flutter over time.                                                         ║
  ║                                                                            ║
  ║ Read about data we send with crash reports:                                ║
  ║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
  ║                                                                            ║
  ║ See Google's privacy policy:                                               ║
  ║ https://www.google.com/intl/en/policies/privacy/                           ║
  ║                                                                            ║
  ║ Use "flutter config --no-analytics" to disable analytics and crash         ║
  ║ reporting.                                                                 ║
  ╚════════════════════════════════════════════════════════════════════════════╝

Android Studioプラグインインストール

「ファイル」もしくは「Android Studio」から「環境設定」をクリック

「プラグイン」タブをクリック

上の検索欄にFlutterを入力してEnterキーを押すとプラグイン一覧が検索されるのでFlutterをインストール
※Flutter i18nは多言語対応プラグイン

インストールが完了したら「Restart IDE」をクリックしてAndroid Studioを再起動

Flutterプロジェクト作成

新規にプロジェクトを作成する場合

「ファイル」、「新規」、「New Flutter Project」をクリック
「Flutter Application」をクリックして「次へ」をクリック

「Flutter SDK path」で先程設定したFlutterのフォルダを指定して「次へ」をクリック

「完了」をクリック

既存のFlutterプロジェクトを開く場合

既存のプロジェクトをインポートして開いた場合、Dart SDK is not configuredと表示されることがある
この場合、FlutterとDartのSDKへのパスが設定されていないのでパスを設定する
Dart SDK is not configured横の「Open Dart settings」をクリック
クリック後、SDKのパスを設定するウィンドウが開かれるのでFlutterとDartのSDKに下記を設定する
Flutter: 【インストール先】/flutter
Dart: 【インストール先】/flutter/bin/cache/dart-sdk

設定後、「OK」をクリックすれば環境チェックが行われる

インポート後にエラーが出る場合

'package get' has not been runと出力される

「表示」、「ツール・ウィンドウ」、「ターミナル」とクリック後に下記コマンドを実行する
※flutterコマンドが見つからないというエラーが発生する場合はFlutterの環境変数に誤りがある

flutter packages get

Waiting for another flutter command to release the startup lock...と表示されて進まない
プロセスがロックされてしまっている
flutterコマンドを打った時に"Waiting for another flutter command to release the startup lock..."が出た時の対処法

【FlutterSDKのパス】/bin/cache/lockfileを削除して再実行
※プロセスが全て終了していることを確認すること

プロジェクト起動後に実行すること(初回のみ)

flutter doctorを実行してセットアップを完了するために必要なプラットフォームの依存関係があるかどうかを確認する
基本的には下記のように、実行するべきコマンドが表示されているのでコピーして実行する

[!] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    • Android SDK at /Users/【ユーザ名】/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-29, build-tools 29.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1343-b01)
    # エラー個所は✗、警告箇所は!で示される
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses

Xcode installation is incompleteというエラーが発生する

Xcodeをインストールしただけではコマンドラインツールのバージョンが古いままになっている
下記コマンドを実行してコマンドラインツールのバージョンを更新する

[✗] iOS toolchain - develop for iOS devices
    ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

エラーを解消後、再度flutter doctorを実行して全ての項目に✗が付くことを確認する

アプリケーション実行

Androidでの実行

※Android Studioを実行してプロジェクトを開いていること

Androidデバイスを接続するかエミュレータを起動後、画面右上の「▶︎」をクリックしてFlutterプロジェクトを実行する

iOSでの実行

※Android Studioを実行してプロジェクトを開いていること

Android StudioでiOSのエミュレータを起動後、画面右上の「▶︎」をクリックしてFlutterプロジェクトを実行する

Flutterアップデート

Flutterのバージョンを更新したい場合は以下のコマンドを実行する

flutter upgrade

最後に

Android及びiPhoneの開発経験はあまりないので手順を忘れそうだと思いまとめました
割と突貫で書いているので誤字などあるかもしれません

参考

MacでAndroidエミュレータが起動しない(HAXMが起動しない)とき
Intel Hardware Accelerated Execution Manager（HAXM) インストールとアンインストール
Android Studio / IntelliJ IDEA の日本語化と設定
MacでAndroid Studioを日本語化する
Windowsで高速AVDを利用するまでの手順をものすごく詳しく解説
Android studioを完全にアンインストールしたい。
MacでAndroidStudioを完全アンインストール
flutterコマンドを打った時に"Waiting for another flutter command to release the startup lock..."が出た時の対処法