57
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

Organization

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

Flutterとは

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

開発環境構築手順

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

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

下記の公式サイトからFlutterをダウンロードします。
https://flutter.dev/docs/get-started/install/macos
flutter_macos_1.20.3-stable.zip をクリックしてダウンロードします。
※1.20.3の部分はアップデートされると変わります。

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

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

mkdir ~/development
cd ~/development

unzip ~/Downloads/flutter_macos_1.20.3-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にFlutterDartのプラグインをインストールします。
起動画面から
1. Configure->Pluginsを選択
2. 検索ボックスにFlutterと入力
3. 出てきたFlutterという名称のプラグインをインストール
※DartプラグインはFlutterプラグインのインストールと同時にインストールされます。

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

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

起動画面から
1. Start a new Flutter projectを選択
2. Flutter Applicationを選択してNextをクリック
3. Project nameは任意の名前で入力しNextをクリック
4. Company domainは任意の名前で入力しFinishをクリック
5. エディタが表示されたら、メニューバーのTools->AVD Managerを選択
6. Create Virtual Deviceをクリック
7. Category->Phoneを選択されていることを確認し、任意のDeviceを選択してNextをクリック(自分はPixel 3aを選択しました)
8. 任意のOSをDownloadをクリックしてダウンロード(自分はAndroid10.0を選択しました)
9. ダウンロードした項目を選択し、Nextをクリック
10. 設定画面が出てきますが、何もせずに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の拡張機能をインストールする

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

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

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

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

  1. プロジェクトを作成するとVSCodeの右下あたりにNo Deviceと表示されるのでクリック
  2. 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の設定完了です。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
57
Help us understand the problem. What are the problem?