Flutterとは

Flutterとは、Googleによって開発されたモバイルアプリケーションSDK (Software Development Kit)です。
クロスプラットフォームに対応していて、1つのコードで複数のプラットフォーム(iOS,Androidなど)に対応したアプリケーションを開発することができます。

開発環境構築手順

MacでFlutterの開発を始める為に開発環境を構築していきましょう。
※所要時間約1時間(ダウンロードやインストールをするので時間かかります。)

1.Flutterをダウンロードする

下記の公式サイトからFlutterをダウンロードします。
https://flutter.dev/docs/get-started/install/macos

Apple Silicon Macの場合

重要: Apple Silicon Macにインストールする場合、いくつかの補助ツールでRosetta翻訳環境を利用できるようにする必要があります。これを手動でインストールするには、以下を実行します：

sudo softwareupdate --install-rosetta --agree-to-license

flutter_macos_arm64_3.7.11-stable.zip をクリックしてダウンロードします。
※3.7.11の部分はアップデートされると変わります。

Intel Macの場合

flutter_macos_3.7.11-stable.zip をクリックしてダウンロードします。
※3.7.11の部分はアップデートされると変わります。

2.ファイルを解凍して、PATHを通す

作業ディレクトリを作成して、ダウンロードしたzipを解凍
※作業ディレクトリ名や作成場所は好きなところに作ってください。

mkdir ~/development
cd ~/development

# Apple Silicon Macの場合
unzip ~/Downloads/flutter_macos_arm64_3.7.11-stable.zip

# Intel Macの場合
unzip ~/Downloads/flutter_macos_3.7.11-stable.zip

次にPATHを通します。
[PATH_TO_FLUTTER]
ここには解凍したFlutterのディレクトリを書いてください。
bashの場合

echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.bash_profile
source ~/.bash_profile

zshの場合

echo 'export PATH="$PATH:[PATH_TO_FLUTTER]/flutter/bin"' >> ~/.zshrc
source ~/.zshrc

flutterコマンドが使えるようになっていれば成功です。

3.実行環境に必要なものを確認する

Flutterは

flutter doctor

コマンドを実行することで

問題ないところには✔︎マーク
不足しているものには✖︎印
問題があるところには！マーク

が表示されて実行環境に何が足りないのか教えてくれますので、次は足りないものをインストールしていきましょう。

4.Android Studioをインストールする

下記の公式サイトからAndroid Studioをダウンロードします。
https://developer.android.com/studio/index.html
DOWNLOAD ANDROID STUDIO をクリックし、利用規約に同意してダウンロードします。

ダウンロードが終わったらAndroid Studioを起動し、表示にしたがってインストールをします。
※いろいろと聞かれますが、基本的には全部Next,FinishをクリックすればOKです。

Welcome to Android Studioの画面が出れば成功です。

5.Android Studioにプラグインを導入する

Android StudioにFlutterとDartのプラグインをインストールします。
起動画面から

Configure->Pluginsを選択
検索ボックスにFlutterと入力
出てきたFlutterという名称のプラグインをインストール
※DartプラグインはFlutterプラグインのインストールと同時にインストールされます。

6.デバイスのエミュレータを導入する

Android Studioでデバイスのエミュレータを導入していきます。

起動画面から

Start a new Flutter projectを選択
Flutter Applicationを選択してNextをクリック
Project nameは任意の名前で入力しNextをクリック
Company domainは任意の名前で入力しFinishをクリック
エディタが表示されたら、メニューバーのTools->AVD Managerを選択
Create Virtual Deviceをクリック
Category->Phoneを選択されていることを確認し、任意のDeviceを選択してNextをクリック(自分はPixel 3aを選択しました)
任意のOSをDownloadをクリックしてダウンロード(自分はAndroid10.0を選択しました)
ダウンロードした項目を選択し、Nextをクリック
設定画面が出てきますが、何もせずにFinishをクリック

これでデバイスのエミュレータを導入することができました。

7.Androidのライセンスを許可する

Androidのライセンスを許可しないとflutter doctorを実行した際に！マークが出るので許可していきます。

flutter doctor --android-licenses

上記コマンドを実行するとライセンスに許可するかどうかを聞かれるので yを入力し、Enterを押して許可をしていきましょう。

flutter doctorを実行し、Android toolchainの部分に✔マークがついていれば成功です。

8.Xcodeをインストールする

XcodeはAppStoreからダウンロードできますのでダウンロードしましょう。
最新のMacOSを利用していない場合はダウンロードできない可能性がありますので以下を参考にダウンロードしてください。
Xcode - インストール可能対応バージョン macOS 一覧 / Install Support macOS Version Lists

インストールをすすめて
Welcome to Xcodeの画面が出れば成功です。

9.CocoaPodsをインストールする

CocoaPodsというプラグインも必要なのでインストールします。

sudo gem install cocoapods

パスワードを聞かれますので自分のMacのパスワードを入力しましょう。

10.最後にflutter doctorで確認する

[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.14.6 18G6020, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 4.0)

上記にような表示になっていれば環境構築完了です。

以上、これでFlutterでアプリを開発を始めることができます！

番外編 VSCodeで開発する場合

VSCodeで開発したい場合は、更に設定が必要なのでやっていきましょう。
※VSCodeのインストールは省略します。

1.VSCodeにFlutterの拡張機能をインストールする

Shift+Command+Xで拡張機能を表示
検索ボックスにFlutterと入力
出てきたFlutterの拡張機能をインストール

2.VSCodeでFlutter新規プロジェクトを作成

Shift+Command+Pでコマンドパレットを表示
検索ボックスにFlutterと入力
Flutter:New Projectをクリック
任意のプロジェクト名を入力
プロジェクトを作成するディレクトリを聞かれるので任意の作業ディレクトリを指定する

3.VSCodeでデバイスのエミュレータを起動する

プロジェクトを作成するとVSCodeの右下あたりにNo Deviceと表示されるのでクリック
Start iOS SimulatorまたはStart Pixel3a API 29をクリック ※Androidのエミュレータは設定したデバイスによって違います。

4.最後にflutter doctorで確認する

[✓] Flutter (Channel stable, 1.20.3, on Mac OS X 10.14.6 18G6020, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
[✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
[✓] Android Studio (version 4.0)
[✓] VS Code (version 1.49.0)
[✓] Connected device (1 available)

• No issues found!

上記にような表示になっていればVSCodeの設定完了です。

MacでFlutterの開発環境を構築する手順