【2021年度】MacOSでのFlutter環境構築 | M1チップ/Android Studio対応

【2021年度版】Flutter環境構築
この記事がおすすめな人!
  • MacOSでFlutterの環境構築をしたい
  • FlutterのSDK、Android Studio、Xcodeのセットアップ方法が知りたい
  • Android StudioでMac M1に対応した「Android Emulator」を使用したい

MacOSでFlutterアプリ開発を始めるためのFlutterの環境構築の手順を紹介します。

この記事一つでFlutterの環境構築を全て終えることができるので、記事の上から順に、Flutterのセットアップを試みてください。

また、Mac M1で環境構築をなさる方はAndroid Studioにデフォルトで備わっている「Android Emulator」を使用できないので、記事の最後で別に「Android Emulator」のセットアップ方法を紹介しています。

既にFlutterのSDK、Android Studioのセットアップを所々終えている方は、必要なパートだけ下の解説ページから確認できます。また、下の各解説ページでは解説動画に沿ってセットアップを行えるので、文面だけでセットアップをするのが不安な方は、ぜひ上から順に下の解説ページでセットアップをしてみて下さい。(この記事と内容は同じです。)

スポンサーリンク

FlutterのSDKをインストール

手順

  1. Flutterの「SDK Install」ページを開き「MacOS」をクリックします。
  2. 「MacOS install」ページを開いたら「Get the Flutter SDK」をクリックし、 FlutterのSDKをダウンロードします。
  1. ダウンロードしたzipファイルを解凍し「flutter」フォルダを取得します。
zipファイル解凍
  1. ユーザーフォルダ直下で「Developer」フォルダを作り、先ほど取得した「flutter」フォルダを「Developer」フォルダに移動させます。また、フォルダ名を「Developer」としましたが好みの名前で大丈夫です。以下、flutterフォルダが格納されているフォルダを「Developer」として説明をしていきます。
flutterフォルダ保存

pathを通す

  1. 「terminal」を開きます。
  2. 自分のコンピューターで使っているシェルを確認。シェルが分からない方はterminalで「echo $SHELL」とコマンドを入力し、「Enter」をクリックすると使用しているシェルが確認できます。
//使用しているシェルを調べる
echo $SHELL

コマンドを入力してterminalで出力されたのが「/bin/bash」ならシェルは「bash」、「/bin/zsh」ならシェルは「zsh」です。

シェル確認
この場合シェルは「zsh」です。
  1. 使用しているシェルに応じて下記のコマンドを入力して「Enter」をクリックします。
//bashの場合
vim ~/.bash_profile

//zshの場合
vim ~/.zshrc

次に、pathを通すために「i」をクリックしてINSERTモードに切り替えます。また、下記のようにpathを入力し「Enter」をクリックし「esc」をクリックしてINSERTモードを終了します。

export PATH="$PATH:(flutterフォルダまでのpathを入力)/bin"

//例
export PATH="$PATH:Users/ユーザーフォルダ/Developer/flutter/bin"

INSERTモードを終了したら「:wq!」とコマンドを入力し変更を上書きすれば一通りのpathを通す作業は完了です。

:wq!
  1. 一度terminalを再起動してpathが通っているか確認します。terminal再起動後に「witch flutter」とコマンドを入力し「Enter」をクリックします。
which flutter

terminalで次のようなコードが出力されれば無事pathが通っています。

/Users/ユーザーフォルダ/Developer/flutter/bin/flutter

これでMacOSでのFlutterのSDKのインストールは完了です!

Android Studioのダウンロード

手順

  1. Flutterの「Set up an editor」ページを開き、「Android Studio」 > 「Download Android Studio」の順にボタンをクリックするとAndroid Studioのダウンロードが始まります。
Android studio download1
Android studio download1

Android StudioにFlutter/Dartのプラグインをインストール

手順

  1. Flutter/DartのプラグインをAndroid Studioにインストールするために、Android Studioの右下にある「Configure」をクリックした後、「Plugins」をクリックします。
plugins
  1. 「Plugins」を開いたら、左下にある検索バーで「Flutter」を検索するとFlutterのロゴがついたプラグインが表示されるので、右上の「Install」をクリックします。またFlutterのプラグインが無事インストールされると右上に「Installed」と表示されます。
flutter完了

また「Flutter」のプラグインをインストールする際に「Dart」のインストールが必要とポップアップが表示されると思うので一緒に「Dart」もインストールします。Dartのプラグインがインストールされているか検索バーで確認しておいてください。

dart完了
  1. 「Flutter」「Dart」のプラグインのインストールを完了したら、一度Android Studioを再起動します。Android Studioのスタート画面で「Create New Flutter Project」と表示されていたら、無事Android StudioにFlutterがインストールされています。
Android Studioインストール完了

Android StudioでFlutterの新規プロジェクトを作成

手順

  1. Android Studioを開いたら「Create New Flutter Project」をクリックします。
Android Studioインストール完了
  1. 「Flutter SDK path」でFlutterのSDKがインストールされているpathが正しかったら「Next」をクリックします。
  1. 最後にFlutterの新規プロジェクトの設定を行い完了したら「Finish」をクリックします。
Flutterの新規プロジェクト設定
  1. Project name:Flutterのプロジェクト名を指定
  2. Project location:プロジェクトの保存先を指定
  3. Decription:プロジェクトの説明文を指定
  4. Organization:プロジェクト制作者、もしくは企業名を指定
  5. AndroidまたはiOSで使われる言語を指定(デフォルトのままで大丈夫)
  6. Platforms:アプリ開発したいプラットフォームを指定

Xcodeのインストール

手順

  1. App Storeで「Xcode」をインストールします。

Install Xcode」ページを開き、「Mac App Store」> 「View in Mac App Store」>「Open App Store」の順にクリックすると、App Storeの「Xcode」のインストール画面が開くのでMacにXcodeをインストールしてください。また、App Storeを自分で開いて「Xcode」と検索してインストールしても大丈夫です。

Xcode install1
Xcode install2
Xcode install3
Xcode install4
Xcodeのインストールがまだの方は「UPDATE」と表示されてる箇所が「GET」のはずです。

これでXcodeのインストールは完了です。

Xcodeのセットアップ

手順

  1. 「Xcode」をApp Storeでインストールして初めて開くと、いくつかライセンスの確認事項が表示されるので「Yes」と全て答えていきます。
  2. 「terminal」を開き、下記のコマンドを入力し「Enter」をクリックします。
 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  1. 上記のコマンドを入力すると「Password:」と出力されるので、Macでログインするときに使うPasswordを入力し「Enter」をクリックします。
Xcode セットアップ
  1. 「terminal」と「Xcode」を一度終了します。

これでXcodeのセットアップは完了です。

iOS Simulatorのセットアップ

手順

  1. Spotlight Search(メニューバーの右側にある🔍)などで「Simulator」を開くと、iOS Simulatorが自動で表示されます。
Simulator setup1
Simulator setup2

また、iOS SimulatorのiPhoneのデバイスを変更したい場合は「Simulator」のメニューバーで「File」>「Open Simulator」>「iOS」を順にクリックして好きなデバイスに変更できます。

Simulator setup3
  1. Flutterで開発中のアプリをiOS Simulatorで起動させるには、下の画像のように「Simulator」で起動しているデバイスを選択し、「▶️マーク」をクリックします。
Simulator setup4
Simulator setup5
  1. Flutterの「Console」で「Xcode build done.」と表示されれば無事、iOS SimulatorでUIが反映されます。
Simulator setup6
Simulator setup7

これでiOS Simulatorのセットアップは完了です。

Android Emulatorのセットアップ方法

手順

  1. Android Studioの右上にある「AVD Manager」をクリックします。
Android Emulator setup1
  1. 「Android Virtual Device Manager」が表示されるので「Create Virtual Device」をクリックします。
Android Emulator setup2
  1. 「Select Hardware」でAndroid Emulatorで起動させたいデバイスを選択します。(この記事では「Nexus 6」のAndroid Emulatorを選択)。デバイスを選択したら「Next」をクリックします。
Android Emulator setup3
  1. 「System Image」でAndroid Emulatorをどのオペレーティングシステムで起動させるか選択します。また「Pie」がおすすめなので「Download」をクリックし、ダウンロードが完了したら「Next」をクリックします。
Android Emulator setup4
  1. 「Android Virtual Device(AVD)」の「Graphics」で「Hardware」を選択し、「Finish」をクリックします。Hardwareを選択することでAndroid Emulatorを早く起動できます。
Android Emulator setup5

これでAndroid Emulatorのセットアップは完了です。

Android Emulatorを起動させる

Android Emulatorを起動させるには下の画像の「Flutter Device Selection」、「AVD Manager」から起動できます。(メニューバーからも起動できる)

Android Emulator launch1

「AVD Manager」からAndroid Emulatorを起動させる場合、「AVD Manager」をクリックした後に「Actions」の「▶️ボタン」をクリックします。

Android Emulator launch2

Mac M1でAndroid Emulatorセットアップする

Android Emulator cant launch

Mac M1を使用されている方はAndroid EmulatorをAndroid Studioで起動させようとすると、AVD Managerのポップアップで「The emulator process for AVD … was killed.」と表示され、Android Emulatorが起動できません。

よって、Android Studioとは別の「Android Emulator」インストールしてAndroid Studionにセットアップします。

Apple M1 and Android Emulator

こちらの解説動画でAndroid EmulatorをMac M1で起動させるセットアップ方法が解説されています。

手順

  1. Githubの「android emulator m1 preview」ページを開き、最新のAndroid Emulatorを選択し「android-emulator-m1-preview.dmg」をクリックしてダウンロードします。現時点(2021/6/1)で「initial Preview v2」が最新です。
Android Emulator download1
Android Emulator download2
  1. ダウンロードしたzipファイルを解凍し、「Android Emulator」をインストールします。
【Mac M1】Android Emulator Install

これで「Android Emulator」のダウンロード/インストールは完了です。

「Android Emulator」をMacで起動できるよう設定

Android Emulator verify1

インストールした「Android Emulator」をMacで開こうとすると、上の画像のようなポップアップが表示され使用できないので、MacのSystem Preference(システム環境設定)で「Android Emulator」を使用できるよう設定します。

  1. 「システム環境設定」で「セキュリティとプライバシー」を開きます。下の画像では英語表示になっていますが、日本語でも操作は同じです。
Android Emulator verify2
  1. 「セキュリティとプライバシー」を開いたら、「”Android Emulator” was blocked from use because it is not from an identified developer.」の右にある「Open Anyway」をクリックすると、ポップアップが表示されるので「Open」をクリックします。
Android Emulator verify3
Android Emulator verify4

すると「Android Emulator」が起動されます。

Android Emulator verify5

これで「Android Emulator」をMacで起動できるようになりました。

インストールしたAndroid Emulatorをセットアップする

  1. 「Android Emulator」を起動し、Android Studioを開きます。
  2. 「Virtual Device」で、Mac M1にインストールした「Android Emulator」を選択します。アプリ開発をしている言語によっては、mobileアプリだけでなく、webアプリも「Android Emulator」で実行できます。

mobileアプリを「Android Emulator」で実行

Android Emulator mobile1
Android Emulator mobile2

webアプリを「Android Emulator」で実行

Android Emulator web1
Android Emulator web2

これでMac M1でも「Android Studio」で「Android Emulator」使用できるようになったはずです。

タイトルとURLをコピーしました