1.1　VScodeのインストール

　本書での開発には、VSCodeを使って開発していくことを想定してます。なので、まずはVSCodeのダウンロード・インストールを行います。VSCodeを使用しない方は、読み飛ばしていただいで構いません。

　１．VSCodeの公式サイトからインストーラーをダウンロードしてきます。¹

　２．ダウンロードしたインストーラーを実行すれば、基本的にインストールは完了です。

　このふたつの手順でVSCodeのインストールはできましたが、Flutterを使う上ではプラグインを使用することが推奨されているので、これも入れていきます。

　３．VScodeを開き、プラグインの項目をクリックします。

　４．プラグインの検索で「Flutter」と入力してプラグインを検索します。

　５．インストールをクリックして、プラグインのインストールは完了です。

1.2　macOS

　macOSでのFlutter環境構築を進めていきます。

Flutterのインストール

　Flutterの本体をインストールしていきます。

　１．公式サイトからFlutterのSDKのzipファイルをダウンロードしてきます。²

　２．1でダウンロードしたzipファイルを展開します。

　このとき展開した場所がFlutterのpathになりますので、今回はユーザーの直下(/User/ユーザー名)に展開しました。

　３．展開ができたらFlutterのパスを通します。

　.bashrcや.zshrcなど、お使いのシェルの設定ファイルに、以下のFlutterのパスを記述します。

export PATH=$PATH:/Users/ユーザー名/flutter/bin

　このとき、flutterフォルダーにあるbinフォルダーを指定することを注意してください。その後 source ~/.bashrc や source ~/.zshrc を実行すればパスが通ったはずですので、確認してみましょう。

　ターミナル上でflutterのコマンドが使えればパスが通っているので、flutter doctor コマンドを実行してみましょう。このコマンドはflutterを使っていく上で環境構築ができているかを確認するコマンドなので、この章ではよく使っていきます。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter
(Channel stable, 2.2.3,
 on macOS 11.5.2 20G95 darwin-x64, locale ja-JP)
[!] Android toolchain
- develop for Android devices (Android SDK version 30.0.2)
× Cannot execute
/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/bin/java
to determine the version
[!] 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
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.54.3)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

　このようなメッセージが表示されれば、flutterのインストールとパスの通しは完了です！上のメッセージではXCodeとAndroid Studioの構築ができていないので、進めていきましょう。

XCode

　iOSのアプリを作っていく上では、XCodeのインストールが必須になりますので進めていきます。XCodeの構築はそこまで難しくないので、サクッと進めます。

　１．AppStoreで「XCode」と検索するとXCodeが出てきますので、インストールボタンをクリックします。

　２．ダウンロードとインスールが完了したら、1度XCodeを起動します。

　３．パッケージ管理システムのcocoapodsをインストール

　iOSのパッケージ管理をするcocoapodsをrubyのgemをインストールします。

gem install cocoapods

　これでXCodeの構築が完了しました。flutter doctorコマンドで確認してみましょう。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter
(Channel stable, 2.2.3,
on macOS 11.5.2 20G95 darwin-x64, locale ja-JP)
[!] Android toolchain
- develop for Android devices (Android SDK version 30.0.2)
× Cannot execute
/Library/Java/JavaVirtualMachines/1.6.0.jdk/Contents/Home/bin/java
to determine the version
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] VS Code (version 1.54.3)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

　これで残りはAndroid Studioだけになりました、

Android Studioのインストール

　残りは、Androidでの開発を進めていくために必要なAndroid Studioのインストールです。

　１．公式サイトからAndroid Studioのインストーラーをダウンロードしてきます。³

　２．ダウンロードができたらインストーラーを起動して、手順に沿ってインストールを進めます。

　３．インストールが完了したらAndroid Studioを起動します。

　４．起動ができたらwelcome画面からMore Actionをクリックした「SDK Manager」を選択します。

　５．SDK Manager画面に移動したら「SDK Tools」タブに移動して、以下のSDKを選択します。

　・Android SDK Build-Tools

　・Android SDK Command-line Tools(latest)

　・Android Emulator

　・Android SDK Platform-Tools

　・Android SDK Tools (Obsolete)

　これらを選択してOKをクリックして、インストールが進みます。

　６．Android StudioとJavaのパスを通す

　flutterのパスを通したファイル(.bashrcや.zshrc)を開いて、以下を記述します。

export PATH=$PATH:/Applications/"Android Studio.app"/\
Contents/jre/jdk/Contents/Home/bin
export JAVA_HOME=/Applications/"Android Studio.app"/\
Contents/jre/jdk/Contents/Home/

　これを追記して保存したら、source ~/.bashrc や source ~/.zshrc を実行して完了です。

　それでは、flutter doctorを実行してみましょう。

$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter
(Channel stable, 2.2.3,
on macOS 11.5.2 20G95 darwin-x64, locale ja-JP)
[✓] Android toolchain
- develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.54.3)
[✓] Connected device (1 available)

• No issues found!

　もし [✓] Android Studio (version 2020.3) の項目がチェックになっていなかったら、Androidのライセンスを承認します。といってもコマンドをひとつ実行して、質問に答えていくだけです。

$ flutter doctor --android-licenses

　コマンドを実行したらいくつか質問が出てくるので、 y を押していくと完了です。