3
5

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 5 years have passed since last update.

macOS CatalinaでFlutterの開発環境構築時の手順と注意

Posted at

Flutterとは

従来では、objective-CとswiftはiOSアプリ、java(kotolin)はAndroidアプリ、といったように、それぞれのプラットフォーム毎に開発言語が異なっていたが、
xamarin、react native、unityなど、一度の開発でiOSもAndroidもどっちも作れちゃう、いわゆるクロスプラットフォーム開発が注目されつつある。
とはいえ、まだまだswiftやkotolinでの開発は根強く、むしろクロスプラットフォーム開発は思ったより伸びていない(というか衰退しているような)。
そんな中、googleが開発したflutterもクロスプラットフォーム開発ができるというもの。
ちなみにflutterは言語名ではない。言語はdartと呼ばれるプログラミング言語を使う。

Flutter開発環境を構築

何をインストールするの?

FlutterとAndroid Studioを使います。

Flutterをインストール

以下のFlutter公式サイトからzipをダウンロード
https://flutter.dev/docs/get-started/install/macos

zipを解凍する際は任意のフォルダでOKです。
例)

cd /Users/cotatsu/

自分のルートディレクトリに解凍する場合はこれ。
「cotatsu」の部分は自分のユーザー名に変更すること。

unzip ~/Downloads/flutter_macos_v1.12.13+hotfix.5-stable.zip

※zip名は今後変更になるかもしれないのでその都度ご確認を。

flutterフォルダが作成され、たくさんファイルが入ります

PATHを通す

flutterコマンドを使いたいわけです。なので以下の様にパスを登録

export PATH="$PATH:/Users/cotatsu/flutter/bin"

もちろん、ディレクトリの位置によってパスは変わるので柔軟に対応をお願いします。
「flutter/bin」はそのままでOKです。
「/Users/cotatsu」ところは各々変更を。

PATHが通ったか確認

flutter doctor

このコマンドを打つと。。

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.5, on Mac OS X 10.15.2 19C57, 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 11.3)
    ✗ 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.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.27.2)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

こんな感じのが結果が返ってくる。

“idevice_id”は、開発元を検証できないため開けません。

というエラーメッセージが出た場合。

なんかよくわからないんですが、

catalinaとの相性が悪いみたい

以下のコマンドを叩いて修正。

sudo xattr -d com.apple.quarantine /Users/cotatsu/flutter/bin/cache/artifacts/libimobiledevice/idevice_id

例によって、「/Users/cotatsu」の部分は各々変更をお願いします。

こちらの記事を参考にしました(ありがとうございます!!)
https://qiita.com/hiesiea/items/474c652fb6f9ba1ba4ed

再びコマンドを打つ。

flutter doctor

エラーメッセージ出ず!!

Android Studioをインストール

以下の公式サイトからインストール
https://developer.android.com/studio/?hl=ja

android-studio-ide-191.6010548-mac.dmg

みたいなファイルができるのでクリックしてインストール。

Android Studioのインストールまでは流れでやってください(投げやり)

Android Studio上でFlutterインストール

Android Studioをインストールしたら、アプリを立ち上げる。

右下の「Configure>Plugins」を選択。

検索窓で「Flutter」と打てば、Flutterが出てくるのでインストール。

完了すればAndroid StudioでFlutter開発が可能になります。

スクリーンショット 2020-01-10 1.53.33.png

↑こちらの画像の様に「Start a new Flutter project」と出れば問題なし!

いざ開発っっ!

とりあえず今回はここまで。
トラブルはあるもののそんなに大変ではなかった。

3
5
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
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?