MacでFlutterの開発環境を構築する方法をメモしておきます。
目次
Flutterをインストール
公式サイトからmacOS用のFlutter(flutter_macos_x.xx.x-stable.zip)をダウンロードします。
ダウンロードしたzipファイルを解凍して、任意のディレクトリに配置します。
パスを通す
解凍したフォルダを配置したらパスを通していきます。bashの場合は以下のコマンドでパスを通し反映させます。
1 | $ echo 'export PATH="$PATH:[解凍したフォルダを配置したパス]/flutter/bin"' >> ~/.bash_profile |
1 | $ source ~/.bash_profile |
flutter doctorで必要なものを確認する
以下のコマンドを実行することで、Flutterの実行環境で必要なものがわかります。
1 | $ flutter doctor |
現時点ではFlutterのみインストールしているため、他に必要なものはまだインストールされていないことがわかります。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | [✓] Flutter (Channel stable, 1.22.6, on Mac OS X 10.15.2 19C57 darwin-x64, locale ja-JP) [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/docs/get-started/install/macos#android-setup for detailed instructions). If the Android SDK has been installed to a custom location, set ANDROID_SDK_ROOT to that location. You may also want to add it to your PATH environment variable. [✗] Xcode - develop for iOS and macOS ✗ Xcode installation is incomplete; a full installation is necessary for iOS development. Download at: https://developer.apple.com/xcode/download/ Or install Xcode via the App Store. Once installed, run: sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer sudo xcodebuild -runFirstLaunch ✗ CocoaPods not installed. CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side. Without CocoaPods, plugins will not work on iOS or macOS. For more info, see https://flutter.dev/platform-plugins To install: sudo gem install cocoapods [!] Android Studio (not installed) [!] Connected device ! No devices available ! Doctor found issues in 4 categories. |
Android Studioをインストールする
公式サイトよりmacOS用のAndroid Studioをダウンロードして、インストールします。
Welcome to Android Studioの画面が出れば完了です。
Download Android Studio & App Tools - Android Developers
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」で承諾します。
1 | $ flutter doctor --android-licenses |
Xcodeをインストールする
App StoreからXcodeをインストールします。
「Xcodeは“Macintosh HD”にはインストールできません。macOSバージョンxx.xx.x以降が必要です」とでたら、macOSのバージョンを上げるか、過去のバージョンをインストールできる方法があるようなのでどちらかで対応しましょう。
CocoaPodsをインストールする
以下のコマンドでCocoaPodsをインストールします。
1 | $ sudo gem install cocoapods |
flutter doctorで実行環境が整ったか確認する
最後にflutter doctorで実行環境が整ったか確認します。以下のようにNo issues found!となったら開発環境は完了です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 1.22.6, on macOS 11.2 20D64 darwin-x64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 12.4) [✓] Android Studio (version 4.1) [!] Connected device ! No devices available Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 1.22.6, on macOS 11.2 20D64 darwin-x64, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 12.4) [✓] Android Studio (version 4.1) [✓] Connected device (1 available) • No issues found! |
flutter doctorでFlutter plugin not installedと言われたら
Flutterのプラグインを正常にインストールできたのにnot installedと言われた場合は、以下の方法で解決しました。シンボリックリンクを作成することで認識できるようになったようです。
1 | $ ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1 |
参考：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」を選択することで、ホットリロードができるようになります。