Flutterの開発環境をMacOSで構築する

Flutterの開発環境をMacOSで構築する

その他

MacでFlutterの開発環境を構築する方法をメモしておきます。

Flutterをインストール

公式サイトからmacOS用のFlutter(flutter_macos_x.xx.x-stable.zip)をダウンロードします。

ダウンロードしたzipファイルを解凍して、任意のディレクトリに配置します。

Choose your first type of app | Flutter

Configure your system to develop Flutter…
flutter.dev

 

パスを通す

解凍したフォルダを配置したらパスを通していきます。bashの場合は以下のコマンドでパスを通し反映させます。

 

flutter doctorで必要なものを確認する

以下のコマンドを実行することで、Flutterの実行環境で必要なものがわかります。

 

現時点ではFlutterのみインストールしているため、他に必要なものはまだインストールされていないことがわかります。

 

Android Studioをインストールする

公式サイトよりmacOS用のAndroid Studioをダウンロードして、インストールします。

Welcome to Android Studioの画面が出れば完了です。

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders wit…
developer.android.com

 

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

Android Studioの起動画面からConfigure→Pluginsを選択します。すると以下のPluginsの画面が表示されるので、検索ボックスから「Flutter」と入力し、インストールします。

Flutterをインストールすることで同時にDartもインストールできます。

 

デバイスのエミュレーターをダウンロードする

エミュレーターをダウンロードしていきます。

まず起動画面から「Create New Flutter Project」を選択します。

 

「Flutter Application」を選択して次にいきます。

 

Project Nameを入力し、SDKとプロジェクトのパスを指定して次にいきます。

 

Finishをクリックします。

 

完了して編集画面が表示されたらTools→AVD Managerを選択します。

 

「Create Virtual Device」を選択します。

 

エミュレーターに使うデバイスを選択します。

 

System Imageを選択し、次にいきます。

 

最後にFinishをクリックして完了です。

 

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

以下のコマンドでAndroidのライセンスを許可します。ライセンスの許可について聞かれるので「y」で承諾します。

 

Xcodeをインストールする

App StoreからXcodeをインストールします。

‎Xcode on the Mac App Store

Read reviews, compare customer ratings, …
apps.apple.com

「Xcodeは“Macintosh HD”にはインストールできません。macOSバージョンxx.xx.x以降が必要です」とでたら、macOSのバージョンを上げるか、過去のバージョンをインストールできる方法があるようなのでどちらかで対応しましょう。

 

CocoaPodsをインストールする

以下のコマンドでCocoaPodsをインストールします。

 

flutter doctorで実行環境が整ったか確認する

最後にflutter doctorで実行環境が整ったか確認します。以下のようにNo issues found!となったら開発環境は完了です。

 

flutter doctorでFlutter plugin not installedと言われたら

Flutterのプラグインを正常にインストールできたのにnot installedと言われた場合は、以下の方法で解決しました。シンボリックリンクを作成することで認識できるようになったようです。

参考:https://github.com/flutter/flutter/issues/68429

 

VSCodeでFlutterが使える環境を整える

VSCodeを使っているので、Flutterが使えるようにします。

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

まず、拡張機能からFlutterをインストールします。

VSCodeでFlutter新規プロジェクトを作成する

コマンドパレットから「Flutter」と入力して、「Flutter: New Project」を選択します。プロジェクト名を入力し、ディレクトリを指定することでプロジェクトを作成できます。

エミュレーターを起動する場合は右下のNo Device選択することで、iOSとAndroidのエミュレーターを起動することができます。

ホットリロードできるようにする

コマンドパレットから「Debug: Attach to Flutter on Device」を選択することで、ホットリロードができるようになります。