3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

macOS CatalinaでFlutterの環境構築をしたのでメモ

Last updated at Posted at 2020-04-19

まえがき

せっかく社会人になったのでアプリでも作って不労所得を得ようと思った.swiftは書いたことあるけど,最近はiOSとAndroidの開発が同時にできるFlutterの方が流行ってるっぽいので,ひとまず環境だけ設定してやろうと思った.Macです.備忘録的なもの.だいたいこういうのは公式をなぞっておいたほうがいい(しらんけど).クリーンインストールしたので,2020年4月19日現在では(ほぼ)最新のはず.

やること

開発環境と必要なツール等

  • macOS Catalina 10.15.4
  • brew
  • git

flutterのインストール等

gitでとりあえずflutterのインストール
ホームディレクトリでやった.

cd
git clone https://github.com/flutter/flutter.git -b stable

以下を.bashrcやら.zshrcやらに追記

export PATH="$PATH:`pwd`/flutter/bin"

依存ツール?等を以下のコマンドで確認

flutter doctor

すると,以下のように怒られる(一部抜粋)

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4 19E266, 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/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME 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

以下をすればよさそう

  • brewでandroid-studioをインストール
  • Appstoreからxcodeをダウンロード

android-studioは以下でおk.

brew cask install android-studio
brew install java # 念のため

もう一回flutter doctorすると以下.

You have not agreed to the Xcode license agreements, please run 'sudo xcodebuild -license' from within a Terminal window to review and agree to the Xcode license agreements.
Building flutter tool...
Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel unknown, v0.0.0-unknown, on Mac OS X 10.15.4 19E266, locale ja-JP)
    ✗ Command exited with code 69: git -c log.showSignature=false log -n 1 --pretty=format:%ad --date=iso
      Standard error: 
      You have not agreed to the Xcode license agreements, please run 'sudo xcodebuild -license' from within a Terminal window to
      review and agree to the Xcode license agreements.

[✗] 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/setup/#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
      You may also want to add it to your PATH environment variable.

[!] Xcode - develop for iOS and macOS (Xcode 11.4.1)
    ✗ Xcode end user license agreement not signed; open Xcode or run the command 'sudo xcodebuild -license'.
    ✗ Xcode requires additional components to be installed in order to run.
      Launch Xcode and install additional required components when prompted or run:
        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 (version 3.6)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
⣽Error executing simctl: 69

You have not agreed to the Xcode license agreements, please run 'sudo xcodebuild -license' from within a Terminal window to review
and agree to the Xcode license agreements.


[!] Connected device
    ! No devices available

よくわからんが,Android toolchainにおいては,いったん起動してなんやかんやしろと言われているので,いわれるがままに起動したところ,xcodeの関係でエラーがおこったので先に

sudo xcodebuild -license

を実行し,途中でagreeと打てと言われるのでうった.cocoapodsのエラーは

sudo gem install cocoapods

で解消した.

Android Studioに関してはちょっとハマったのでこちらを参考にさせていただいたり,こちらを参考にさせていただいたりした.結局,Android Studioを起動して,SDKとflutter, dartの設定ができればクリア.この間何度かdoctorを繰り返してチェックをつけていけばおk.最終的に適当にiphoneをつなげた上で,

$flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4 19E266, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4.1)
[✓] Android Studio (version 3.6)
[✓] Connected device (1 available)

となり,幸せな気持ちになった.公式では,flutterのパスを追加しろってこの次に書いてあるが,一番はじめに.zshrcに記述していれば多分いらないと思う(しらんけど).

iOSでサンプルアプリ

よくわからないが以下を実行した.

sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

以下を実行すると,iOSのシミュレータが出てくる.

open -a Simulator

以下でサンプルアプリのディレクトリが作成され,runするとボタンぽちぽちアプリがでてくる.

flutter create my_app
cd my_app
flutter run

こんなん.
スクリーンショット 2020-04-19 18.49.56.png

手元のiphoneにも入れられるっぽいが,あとでどうとでもなりそうなので省略.

Androidでサンプルアプリ

ひとまずエミュレータでやる(Androidデバイス持ってない).
Android studioを開き,次の要領で実行.

  • ConfigureからAVD Managerを選択
  • Create Virtual Device...
  • 適当にphoneを選択,適当にダウンロード(結構でかいサイズなので注意).
  • finishになるまで適当に進み,再生ボタンみたいなやつを押すとエミュレータが起動.
  • 先ほどのmy_appのディレクトリでflutter runをすると,先ほどと同じアプリが起動.

flutter runの初回はなぜか失敗した気がするが,二回やったらなぜかできた.
こんなん.
スクリーンショット 2020-04-19 19.18.29.png

とりあえず目的は完了した.

まとめ

flutter doctorでオールグリーンになるまでがそこそこめんどくさかった.
新規のアプリを作るときは,flutter create hogeして,そこのファイルをいじくればいいっぽい?
しょぼくてもいいのでなんか適当に作っていこうと思います.

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?