【2021年度】MacOSでのFlutter開発環境構築 | M1 MacBook/Android Studio対応

【Mac M1】Android Emulatorが起動できない時の対処法 |Android Studio環境構築

「MacでFlutterの開発環境を構築したい」

「FlutterのSDK、Android Studio、Xcodeのセットアップ方法が知りたい」

「M1 MacBookでFlutterの開発環境構築を終えたけどAndroid Emulatorが使えない…」

このような疑問にお答えします。

本記事を読めば、Android StudioをIDEとしたMacBook(M1含む)でのFlutter開発環境構築ができます。

本記事だけでFlutterの環境構築を全て終えられるので、記事の上から順にFlutterの開発環境をしてみてください。

読者の方でセットアップを所々終えている方は下にある解説ページリンクから必要なパートだけ確認できます。また、下にある解説ページでは解説動画に沿ってセットアップを行えるので、文面だけでセットアップをするのが不安な方にもおすすめです(この記事と内容は同じ)。

M1 MacではAndroid EmulatorをAndroid Studioで起動できないので、M1 Macユーザーはこちらの記事でAndroid Emulatorのセットアップを行ってください。

ティファ

それではMacbookでのFlutter環境構築の手順を紹介していくよ!

目次

Flutter SDKのインストール方法

\ 動画解説が必要な方はこちら /

Flutter SDKのダウンロード方法

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

Flutter SDKのダウンロードはこれで完了だよ。

Flutter SDKのインストール方法:pathを通す(zsh/bash別)

STEP
下準備:使用しているパソコンのシェル(zsh/bash)を確認
  • 「terminal」を開き「echo $SHELL」とコマンドを入力すると使用しているシェルが確認できます。
//使用しているシェルを調べる
echo $SHELL
SDKのインストール4
この場合シェルは「zsh」です。

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

STEP
pathを通す:その1
//bashの場合
vim ~/.bash_profile

//zshの場合
vim ~/.zshrc

使用しているシェルに応じて上記のコマンドを入力して「Enter」をクリックします。

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

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

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

STEP
pathを通す:その3
:wq!

最後に「:wq!」とコマンドを入力し変更を上書きすればFlutter SDKのインストールは完了です。

STEP
pathが通っているか確認
which flutter

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

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

terminalで上記の文字が出力されれば無事pathが通っています。

ティファ

これでMacBookでのFlutter SDKのインストールは完了だよ!

FlutterをAndroid Studioでセットアップする方法

\ 動画解説が必要な方はこちら /

Android Studioのインストール&セットアップ方法

STEP
Android Studioをダウンロードする
Android StudioでFlutterをセットアップする方法1
Android StudioでFlutterをセットアップする方法1-1

Flutterの「Set up an editor」ページを開き、「Android Studio」 > 「Download Android Studio」の順にクリックしAndroid Studioをダウンロードされます。

STEP
Flutter/Dartのプラグインをインストール:その1
Android StudioでFlutterをセットアップする方法2

Android Studioのダウンロード/インストールが完了したら、Android Studioを開き右下にある「Configure」>「Plugins」の順にクリックします。

STEP
Flutter/Dartのプラグインをインストール:その2
Android StudioでFlutterをセットアップする方法3

「Plugins」を開いたら、左上にある検索バーで「Flutter」と検索し、「Flutter」と表示されたプラグインをインストールします。プラグインがインストールされると「Installed」と表示されます。

Android StudioでFlutterをセットアップする方法4

Dartのプラグインも同様にインストールします。

STEP
Flutter/Dartのプラグインがインストールされている確認
Android Studio新規プログジェクト作成1

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

ティファ

Android Studioのセットアップが完了したら一度、Flutterの新規プロジェクトを作成してみよう!

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

STEP
Flutterの新規プロジェクトを作成:その1
Android StudioでFlutterをセットアップする方法5

Android Studioを開いたら「Create New Flutter Project」をクリックします。

STEP
Flutterの新規プロジェクトを作成:その2
Android Studio新規プログジェクト作成2

「Flutter SDK path」でFlutterのSDKがインストールされているpathが正しかったら「Next」をクリックします。

STEP
Flutterの新規プロジェクトを作成:その3
Android Studio新規プログジェクト作成3
チェック項目
  1. Project name:Flutterのプロジェクト名を指定
  2. Project location:プロジェクトの保存先を指定
  3. Decription:プロジェクトの説明文を指定
  4. Organization:プロジェクト制作者、もしくは企業名を指定
  5. AndroidまたはiOSで使われる言語を指定(デフォルトのままで大丈夫)
  6. Platforms:アプリ開発したいプラットフォームを指定

上記のチェック項目を確認して「Finish⑦」をクリックするとFlutterプロジェクトが新規作成されます。

 

Android StudioでiOS Simulatorを起動させる方法

\ 動画解説が必要な方はこちら /

Xcodeのダウンロード・セットアップ方法

STEP
Xcodeのダウンロード方法

Install Xcode」ページを開き、「Mac App Store」> 「View in Mac App Store」>「Open App Store」の順にクリックしてApp StoreからXcodeをインストールします。

iOS Simulatorのセットアップ方法1
iOS Simulatorのセットアップ方法2
iOS Simulatorのセットアップ方法3
iOS Simulatorのセットアップ方法4
ティファ

App Storeを自分で開いて「Xcode」と検索してインストールしても大丈夫だよ!

Xcodeをダウンロードして開くとライセンスの確認事項が要求されるので「Yes」と答えていきます。

STEP
Xcodeのセットアップ方法:その1
 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

「terminal」を開いて上記のコマンドを入力し「Enter」をクリックします。

STEP
Xcodeのセットアップ方法:その2
iOS Simulatorのセットアップ方法5

コマンドを入力すると「Password:」と出力されるので、Macでログインするときに使うPasswordを入力し「Enter」をクリックします。

STEP
Xcodeのセットアップ方法:その3

「terminal」と「Xcode」を閉じれば、Xcodeのセットアップは完了です。

ティファ

Xcodeのセットアップが終わったら、Android StudioでiOS Simulatorを起動させてみましょう!

iOS SimulatorをAndroid Studioで起動させる

STEP
iOS Simulatorを起動させる
iOS Simulatorのセットアップ方法6

Spotlight Search(メニューバーの右側にある🔍)で「Simulator」と検索、クリックすればiOS Simulatorを起動できます。

iOS Simulatorのセットアップ方法7
STEP
iOS Simulatorのデバイスの変更方法
iOS Simulatorのセットアップ方法8

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

STEP
Android StudioでiOS Simulatorを起動させる
iOS Simulatorのセットアップ方法9
iOS Simulatorのセットアップ方法10

Android Studioで開発したアプリをXcodeのiOS Simulatorで起動させるには、上画像のように「Simulator」で起動しているデバイス②を選択し「▶️マーク」をクリックします。

STEP
Consoleで「Xcode build done.」と表示されればOK
Simulator setup6

Flutterの「Console」で「Xcode build done.」と表示されれば無事、iOS SimulatorでUIが反映されます。

Simulator setup7
ティファ

これでiOS SimulatorをAndroid Studioで起動できたはずです!

Android StudioでAndroid Emulatorを起動させる方法

\ 動画解説が必要な方はこちら /

Android Emulatorのセットアップ方法

こちらの動画でもAndroid Emulatorの起動方法を確認できます。

STEP
Android Emulatorのセットアップ方法:その1
Android Emulatorのセットアップ方法1

Android Studioの右上にある「AVD Manager」をクリックします。

STEP
Android Emulatorのセットアップ方法:その2
Android Emulatorのセットアップ方法2

「Android Virtual Device Manager」が表示されるので「Create Virtual Device」をクリックします。

STEP
Android Emulatorのセットアップ方法:その3
Android Emulatorのセットアップ方法3

「Select Hardware」でAndroid Emulatorで起動させたいデバイスを選択します。今回はAngelaさんの解説動画と同じ「Nexus 6」を選択します。デバイスを選択したら「Next」をクリックします。

STEP
Android Emulatorのセットアップ方法:その4
Android Emulatorのセットアップ方法4

「System Image」でAndroid Emulatorをどのオペレーティングシステムで起動させるか選択します。また「Pie」がおすすめなので「Download」をクリックし、ダウンロードが完了したら「Next」をクリックします。

STEP
Android Emulatorのセットアップ方法:その5
Android Emulatorのセットアップ方法5

「Android Virtual Device(AVD)」の「Graphics」で「Hardware」を選択し、「Finish」をクリックします。Hardwareを選択することでAndroid Emulatorを早く起動できます。

ティファ

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

Android Emulatorを起動させる方法

STEP
Android Emulatorを起動させる
Android Emulatorのセットアップ方法6

Android Emulatorを起動させるには上画像の「Flutter Device Selection(左の赤枠)」または「AVD Manager(右の赤枠)」から起動できます。

STEP
AVD Manager」からAndroid Emulatorを起動させる場合
Android Emulatorのセットアップ方法7

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

ティファ

これでAndroid StudioでAndroid Emulatorを起動できるようになったはずです!

M1 MacでAndroid Emulatorを起動させる方法

\ 動画解説が必要な方はこちら /

GithubからAndroid Emulatorをインストールする方法

STEP
Android Emulatorをダウンロード
M1 MacでAndroid Emulatorを起動させる1
M1 MacでAndroid Emulatorを起動させる2

Githubの「android emulator m1 preview」ページを開き、最新のAndroid Emulatorを選択し「android-emulator-m1-preview.dmg」をクリックしてダウンロードします。

ティファ

本記事では「initial Preview v2」をダウンロードしていますが、最新のバージョンをダウンロードすれば大丈夫です。

STEP
Android Emulatorをインストール
M1 MacでAndroid Emulatorを起動させる3

ダウンロードしたzipファイルを解凍し、「Android Emulator」をインストールします。

Android EmulatorをM1 Macで使えるよう設定する

M1 MacでAndroid Emulatorを起動させる4

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

STEP
Android Emulatorを使用できるよう設定する:その1
M1 MacでAndroid Emulatorを起動させる5

「システム環境設定」で「セキュリティとプライバシー」を開きます(上画像では英語表示になっていますが、日本語でも操作は同じです

STEP
Android Emulatorを使用できるよう設定する:その2
M1 MacでAndroid Emulatorを起動させる6

「セキュリティとプライバシー」を開いたら、「”Android Emulator” was blocked from use because it is not from an identified developer.」の右にある「Open Anyway」をクリックすると、ポップアップが表示されるので「Open」をクリックします。

M1 MacでAndroid Emulatorを起動させる7
STEP
M1 Macでのセットアップ完了
M1 MacでAndroid Emulatorを起動させる8
ティファ

これでAndroid EmulatorをM1 Macで起動できるようなったので、Android Studioから起動できるようにセットアップする方法を紹介していくよ!

Android StudioからインストールしたEmulatorを起動させる

STEP
モバイルアプリのAndroid Emulatorを起動させる
M1 MacでAndroid Emulatorを起動させる9
  1. インストールした「Android Emulator」と「Android Studio」の両方を開きます。
  2. 「Virtual Device」でM1 Macにインストールした「Android Emulator mobile①」を選択します。
  3. 実行ボタン②をクリックするとモバイルアプリをAndroid Emulatorで起動できます。
M1 MacでAndroid Emulatorを起動させる10
STEP
WebアプリのAndroid Emulatorを起動させる
M1 MacでAndroid Emulatorを起動させる11
  1. インストールした「Android Emulator」と「Android Studio」の両方を開きます。
  2. 「Virtual Device」でM1 Macにインストールした「Android Emulator web①」を選択します。
  3. 実行ボタン②をクリックするとWebアプリをAndroid Emulatorで起動できます。
M1 MacでAndroid Emulatorを起動させる12
ティファ

これでM1 MacでもAndroid StudioでAndroid Emulatorを起動できるようになったはずです!

よかったらシェアしてね!
目次
閉じる