Zenn
👌

macOS Catalina + Xcode 12 + Flutter 環境を構築する

2020/09/18に公開
Android
Flutter
iOS
sdk
tech

環境

  • macOS Catalina
  • Xcode 12
  • Flutter 12.0.4

macOS Catalinaのクリーンインストール

Flutter環境を作成するだけであれば、クリーンインストールは必要ありませんが、メモとして残しておきます。もしクリーンインストールする場合は、必ず必要なファイルのバックアップを行った上で実行してください。

macOS Catalinaのダウンロードとインストール用USBメモリーの作成

  1. App StoreからmacOS Catalinaをダウンロードします
  2. ダウンロードが完了するとインストーラーが立ち上がりますが、ここではインストールせず終了します
  3. Appleのサイトに書いてある通りにコマンドを実行し、インストール用のUSBメモリーを作成します
# https://support.apple.com/ja-jp/HT201372
$ sudo /Applications/Install\ macOS\ Catalina.app/Contents/Resources/createinstallmedia --volume /Volumes/MyVolume

MyVolumeは用意したUSBメモリーによって異なるので読み替え、書き換えてください。USB32Gというメディア名だった場合、--volume /Volumes/USB32Gなどとなります。

macOS Catalinaのクリーンインストール

  1. 上で用意したUSBメモリーをMacに挿し、optionキーを押しながら起動します
  2. Catalinaのインストールディスクを選択し、リターンキーを押します
  3. macOS復旧の画面がでたら、メニュー > 復旧アシスタント > Macを消去...を選択します
  4. Macを消去の画面がでたら、「Macを消去...」をクリックします
  5. このMacを消去してもよろしいですか？とでたらMacを消去をクリックします
  6. しばらく待つと自動で再起動します
  7. macOSユーティリティの画面がでたら、macOSインストールを選択し続けるボタンをクリックします
  8. macOS Catalinaインストール画面がでたら、続けるをクリックします
  9. インストーラーにそってインストールを進めます

Flutter環境の構築

Xcode 12のインストール

  1. App StoreからXcode 12を検索しインストールします
  2. Xcodeを起動するとLicense Agreementの画面が出てくるので内容を確認しAgreeボタンをクリックします
  3. Xcodeが変更を加えようとしていますという画面が出てくるので、Macの管理者パスワード（ログインパスワード）を入力し、OKボタンをクリックします
  4. Installing components...という画面がでるので、しばらく待ちます
  5. Welcome to Xcodeの画面がでれば終了です

Android Studioのインストール

私は他のツールも利用しているので、JetBrains Toolbox経由でインストールしますが、Android Studioしか利用しない人は、直接Android Studioホームページからインストーラーをダウンロードして、インストールしてください。

  1. https://www.jetbrains.com/ja-jp/toolbox-app/ から.dmgファイルをダウンロードします
  2. .dmgファイルをダブルクリックするとJetBrains Toolboxのディスクがマウントされます
  3. JetBrains ToolboxアプリをApplicationsフォルダにドラッグアンドドロップでコピーします
  4. JetBrains Toolboxアプリを起動すると、「インターネットからダウンロードされたアプリケーションです」と聞かれるので開くをクリックします
  5. JetBrains Toolboxの通知というダイアログが右上にでた場合は、好みに合わせて許可もしくは許可しないをクリックしてください、私は許可しています
  6. JETBRAINS USER AGREEMENT画面は内容を確認し、利用状況を匿名でJetBrainsに送信するときはAllow sending anonymous usage statistics to JetBrainsにチェックを入れた上でAcceptをクリックします
  7. ツール類がずらっと並ぶのでAndroid Studioの右にあるInstallをクリックします
  8. This is the Android Software Development Kit License Agreement画面は内容を確認し、I have read and agree with the avove terms and conditionsにチェックを入れInstall Android Studioをクリックします
  9. しばらく待つとインストールが完了します
  10. JetBrains ToolboxからAndroid Studioを選択し起動します
  11. 「インターネットからダウンロードされたアプリケーションです」と聞かれるので開くをクリックします
  12. Import Android Studio Setting From...画面ではDo not import settingsを選択しOKをクリックします
  13. Data Sharingは内容を読んだ上でDon't sendもしくはSend usage statistics to Googleのどちらかを選択します
  14. Android Studio Setup Wizardが起動したらNextをクリックします
  15. Choose the type of setup you want for Android Studio:画面ではStandardを選択してNextをクリックします
  16. Select UI Themeは好きな方を選んでNextをクリックします
  17. Verify Settingsで内容を確認しFinishをクリックすると追加のダウンロードとインストールが開始されるので、しばらく待ちます
  18. HAXM installationが変更を加えようとしていますと出たら、Macのログインパスワードを入力しOKをクリックします
  19. 拡張機能がブロックされましたとでたらセキュリティ環境設定を開くをクリックします
  20. セキュリティとプライバシー > 一般が開いたら、左下の鍵アイコンをクリックし、出てきた画面にログインパスワードを入力しロックを解除をクリックします
  21. 開発元"Intel Corporation Apps"のシステムソフトウェアの読み込みがブロックされました。の右に出ている許可をクリックします
  22. Android Studio Setup Wizardの画面にSilent installation Pass!とでているのを確認し、右下のFinishをクリックします
  23. インストールおよび基本セットアップが完了しました

Flutter SDKのインストール

  1. https://flutter.dev/docs/get-started/install/macos からflutter_macos_1.20.4-stable.zipをダウンロードします（ダウンロードフォルダにダウンロードしたものとして進めます）
  2. ターミナルを開き、ホームの直下にdevelopmentというディレクトリを作成します
  3. developmentディレクトリ直下に先ほどのzipファイルをunzipします、Safariでダウンロードして自動的にunzipされてしまっている場合（zipファイルが無い場合）は、developmentディレクトリ直下にunzip済みのflutterディレクトリを移動します
  4. zshのPATHにflutter/binを追加します
  5. flutter precacheを実行します、しばらく待つと自動的に終了します
  6. flutter doctorを実行します、現時点で色々とセットアップ不足なので順次セットアップをしていきます
#1
$ mkdir ~/development

#2
$ cd ~/development

#3
$ unzip ~/Downloads/flutter_macos_1.20.4-stable.zip
or
$ mv ~/Downloads/flutter .

#4
$ echo 'export PATH=$PATH:~/development/flutter/bin' >> ~/.zshrc
$ exec $SHELL -l

#5
$ flutter precache

#6
$ flutter doctor

Android licenses not accepted. に対する対応

以下を実行し、内容を確認した上でyを入力しEnterキーを押します。何度か繰り返します。最後にAll SDK package licenses acceptedとでれば完了です。

$ flutter doctor --android-licenses

CocoaPods not installed. に対する対応

以下を実行し、CocoaPodsをインストールします。

$ sudo gem install cocoapods
Password: ← ログインパスワードを入力しEnter

Flutter plugin not installed. Dart plugin not installed. に対する対応

  1. Android Studioを終了している場合は起動します
  2. Welcome to Android Studio画面の右下、ConfigureからPluginsを選択します
  3. Plugins画面のMarketplaceタブを選択した状態で、その下にある入力窓にFlutterを入力します
  4. いくつか出てきますが、Flutterとだけ書かれているプラグインのInstallボタンをクリックします
  5. Third-party Plugin Privacy Noteの内容を読んだ上でAcceptをクリックします
  6. Install Required Plugins画面でDartプラグインもインストールするよう促されるのでInstallをクリックします
  7. Restart IDEボタンをクリックし、IDE and Plugin Updates画面でRestartをクリックします

No devices available. に対する対応

テスト用の端末をつなげるか、iOSデバイスもしくはAndroidデバイスのシミュレータを起動します。

これらの処理を行った上で、再度flutter doctorを実行し、No issures found!とでればセットアップ完了です。

最後に

ひとまず環境構築のみ行い、ドキュメントにまとめました。zenn.devへの投稿テストも兼ねています。

Discussion