【Mac版】FlutterをAndroid Studioでセットアップする方法 | 新規プロジェクトの作成方法も紹介

【Mac版】FlutterをAndroid Studioでセットアップする方法 | 新規プロジェクトの作成方法も紹介

Flutter SDKのインストールがまだ終わってない方はこちら

「Flutter SDKをインストールを終えたけどAndroid Studioでセットアップする方法が分からない」

「Android StudioでFlutterのプロジェクトを新規作成する方法が知りたい」

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

こちらの解説動画は最新でないため、動画の2分32秒以降は本記事の日本語解説をお読みください。

本記事では、Udemyの人気プログラミング講師であるAngela Yuさんの解説動画に沿ってAndroid StudioでのFlutterセットアップ方法を紹介します。英語での解説動画になるので、動画のステップごとに本記事の日本語解説と見比べながらセットアップするのがおすすめです。

ティファ

それでは、Android StudioでFlutterをセットアップする方法を紹介していくよ!

目次

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をダウンロードされます。(11秒) 

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

Android Studioのダウンロード/インストールが完了したら、Android Studioを開き右下にある「Configure」>「Plugins」の順にクリックします。(54秒:動画と少し異なる)

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

「Plugins」を開いたら、左上にある検索バーで「Flutter」と検索し、「Flutter」と表示されたプラグインをインストールします。プラグインがインストールされると「Installed」と表示されます。(1分20秒:動画と少し異なる)

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

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

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

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

ティファ

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

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

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

Android Studioを開いたら「Create New Flutter Project」をクリックします。(2分32秒)

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でFlutterのセットアップを終えたらやること!

  • iOS Simulatorのセットアップ
  • Android Emulatorのセットアップ

Android StudioでFlutterのセットアップが完了したら、Android Studioで開発したFlutterアプリをiOS Simulator、Android Emulatorで起動できるようにセットアップしましょう。

M1 MacBookでAndroid Studioのセットアップを行った人は、Android StudioのデフォルトでついているAndroid Emulatorが使用できないので対処が必要です。

\ M1 MacBookを使用している方はこちらの記事からAnroid Emulatorをセットアップ /

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