Chapter 06

　04.環境構築

kazutxt

2023.03.22に更新

概要

Flutterの環境構築の手順は下記の公式サイトに記載されています。

Flutterでは、下記の通り開発したいプラットフォームに合わせてツールをインストールする必要があります。

Android : Android Studio
iOS : Xcode
Web : Chrome

Webアプリ

Webアプリは、ブラウザ上で動作するアプリケーションです。
環境構築としては、Chromeのインストールのみとなりますので、本節後続の「環境構築(Windows)」と「環境構築(macOS)」の項でインストール手順を解説します。

デスクトップアプリ

デスクトップアプリは、各OS のデスクトップ上で動作するアプリケーションです。
Flutterでは、Windows/macOS/Linuxでモバイルアプリと同じようにPC上で動作するアプリを作れます。
開発できる環境は、WindowsのデスクトップアプリはWindows、macOSのデスクトップアプリはmacOS、LinuxのデスクトップアプリはLinuxとなります。
Windowsのデスクトップアプリの環境構築方法は、「環境構築（Windows）」の項で解説します。macOSのデスクトップアプリは環境構築が不要のため省略し、Linuxのデスクトップアプリは前述の通り対象外とさせて頂きます。

環境構築(Windows)

1. Gitのインストール

下記の公式サイトからインストーラをダウンロードします。
https://git-scm.com/download/win

案内に従ってインストールを行います。

リリースノートは見る必要がないのでチェックを外して完了します。

2. FlutterSDKのインストール

下記の公式サイトからFlutterSDKをダウンロードします。

ダウンロード後にzipファイルを解凍すると、「flutter」フォルダがありますので、適切なフォルダに配置してください。
Cドライブ直下に、「src」というフォルダを作成しその下に「flutter」フォルダを配置しパスを通す例を掲載します。

スタートメニューの「設定」>「システム」>「バージョン情報」>「システムの詳細設定」>「環境変数」からパスを通します。

パスが通ったことを確認します。

ターミナル

> flutter --version
Flutter 3.0.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cd41fdd495 (5 days ago) • 2022-06-08 09:52:13 -0700
Engine • revision f15f824b57
Tools • Dart 2.17.3 • DevTools 2.12.2

3. Chromeのインストール

下記の公式サイトからインストーラをダウンロードしインストールします。

4. Android Studioのインストール

下記の公式サイトからインストーラをダウンロードします。

案内に従ってインストールを行います。

Android Studioを起動し、初期設定を行います。

5. VSCodeのインストール

下記の公式サイトからVSCodeのインストーラをダウンロードします。
https://code.visualstudio.com/download

案内に従ってVSCodeのインストールを行います。

日本語化とFlutterのプラグインをインストールします。

6. Visual Studioのダウンロード

Windowsデスクトップアプリには、Visual StudioのC++のワークロードが必要になるため、ダウンロードとインストールをします。

まず、Visual Studioのダウンロードサイトにアクセスします。

無料で利用できるコミュニティ版をダウンロードします。

インストールの際に、ワークロードのタブの「C++によるデスクトップ開発」にチェックを入れてから、「インストール」をクリックします。

環境構築(macOS)

1. FlutterSDKのインストール

まず、macOSのプロセッサの種類を確認します。
デスクトップのAppleメニューから「このMacについて」を選択し、概要タブのプロセッサから確認できます。

下記の公式サイトからFlutterSDKをダウンロードします。
プロセッサの種類にあったFlutterSDKを選択します。

ダウンロード後にzipファイルを解凍すると、「flutter」フォルダがありますので、適切なフォルダに配置してください。

ホームディレクトリ直下に、「src」というフォルダを作成しその下に「flutter」フォルダを配置しパスを通す例を掲載します。

ターミナル

# フォルダの作成
/Users/kazutxt % mkdir src
/Users/kazutxt % cd src 
# ダウンロードしたSDKを移動(解凍したSDKがDownloads配下にあるとします)
/Users/kazutxt/src % mv ~/Downloads/flutter .
# SDKの確認
/Users/kazutxt/src % cd flutter 
/Users/kazutxt/src/flutter % ls  
AUTHORS			PATENT_GRANT		dartdoc_options.yaml	packages
CODEOWNERS		README.md		dev			version
CODE_OF_CONDUCT.md	TESTOWNERS		examples
CONTRIBUTING.md		analysis_options.yaml	flutter_console.bat
LICENSE			bin			flutter_root.iml

viを使ってパスを通します（vi以外で行ってもかまいません）。

ターミナル

# zshのプロファイルを編集します。
% touch .zshrc
% vi .zshrc
# iで編集モードに切り替え
# export PATH=$PATH:/Users/kazutxt/src/flutter/bin を追記。(パスは適宜修正)
# ESCキーを押してから「:wq」で上書き保存

# 反映
% source .zshrc

パスが通ったことを確認します。

ターミナル

% flutter --version
Flutter 3.0.2 • channel stable • https://github.com/flutter/flutter.git
Framework • revision cd41fdd495 (6 days ago) • 2022-06-08 09:52:13 -0700
Engine • revision f15f824b57
Tools • Dart 2.17.3 • DevTools 2.12.2

2. Xcodeのインストール

App StoreからXcodeのダウンロードとインストールを行います。

3. Chromeのインストール

下記の公式サイトからインストーラをダウンロードしインストールします。

4. Android Studioのインストール

下記の公式サイトからインストーラをダウンロードしインストールします。

Android Studioを起動し、初期設定を行います。

5. VSCodeのインストール

下記の公式サイトからVSCodeのインストーラをダウンロードします。

https://code.visualstudio.com/download

日本語化とFlutterのプラグインをインストールします。

環境構築の確認(Windows/macOS共通)

各環境でSDKや必要なツールのインストールが完了したら、環境構築ができたか確認をします。

flutter doctor

flutter doctorコマンドはflutterのインストール状態やバージョンを確認できるコマンドです。なお、-vオプションをつけるとより詳しい情報が表示されます。

コマンドプロンプト

> flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 3.0.2, on Microsoft Windows [Version 10.0.22000.675], locale ja-JP)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Community 2022 17.1.3)
[√] Android Studio (version 2021.2)
[√] VS Code (version 1.68.0)
[√] Connected device (3 available)
[√] HTTP Host Availability

• No issues found!

各記号の意味は下記の通りになります。

✓：問題なし
!：警告あり
×：問題あり/インストールなし

AndroidSDKのSDKの設定でエラーが出る場合

コマンドプロンプト

[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.

上記のエラーが出る場合は、下記の通りパスを確認します。

flutter configコマンドで確認したパスを設定します。

コマンドプロンプト

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

You may need to restart any open editors for them to read new settings.

AndroidSDKのコマンドラインツールでエラーが出る場合

コマンドプロンプト

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    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.

上記のエラーが出る場合は、下記の通りコマンドラインツールをインストールします。

AndroidSDKのライセンスのエラーが出る場合

コマンドプロンプト

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    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
5 of 7 SDK package licenses not accepted. 100% Computing updates...
Review licenses that have not been accepted (y/N)? y

# (ライセンス本文が表示されます)
Accept? (y/N): y
# ※未承認分繰り返し

All SDK package licenses accepted

Xcodeのインストールが不完全であると言われる場合

ターミナル

[✗] Xcode - develop for iOS and macOS
    ✗ 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
        sudo xcodebuild -runFirstLaunch

上記のエラーが出る場合は、下記の通りコマンドを実行します。

ターミナル

% sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
% sudo xcodebuild -runFirstLaunch

CocoaPodsがインストールされていない場合

ターミナル

[!] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14C18
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

上記のエラーが出る場合は、下記の通りCocoaPadsをインストールします。
なお、Homebrewを使ったインストール方法を例示しますが、他の方法でインストールしても構いません。

ターミナル

# Homebrewのインストール(インストール済の場合は省略)
# 最新のコマンドは「https://brew.sh/index_ja」を参照
% /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# 処理結果は省略

# CocoaPodsのインストール
% brew install cocoapods
# 処理結果は省略