かずきのBlog@hatena

すきな言語は C# + XAML の組み合わせ。Azure Functions も好き。最近は Go 言語勉強中。日本マイクロソフトで働いていますが、ここに書いていることは個人的なメモなので会社の公式見解ではありません。

Flutter の開発環境を作ってみたメモ on macOS

Windows に作ったけど、iOS アプリの動作も確認したかったら mac っしょ。ということで macOS にも作ってみました。

Java 1.8 は入っていたので、Android Studio をインストールしました。

developer.android.com

Android Studio を起動したら SDK を入れたりします。

f:id:okazuki:20190609203857p:plain

現時点の最新だと Windows の時と同じバージョンになっちゃうかなぁ…。そうすると、Windows の時と同じ問題が起きないか心配(Flutter の開発環境を作ってみたメモ on Windows 10 - かずきのBlog@hatena)

macOS 版のインストール手順はこちらです。

flutter.dev

~/development の下に flutter フォルダーを展開して PATH に追加するために .bash_profile に以下の行を追加しました。(user name のところは適時ユーザー名に変える)

 export PATH="$PATH:/Users/user name/development/flutter/bin"

引き続き支持されるがままコマンドを打っていきます。

$  flutter precache
$  flutter doctor

すごく色々出ました。

octor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale
    ja-JP)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.0)
    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
    ✗ libimobiledevice and ideviceinstaller are not installed. To install with
      Brew, run:
        brew update
        brew install --HEAD usbmuxd
        brew link usbmuxd
        brew install --HEAD libimobiledevice
        brew install ideviceinstaller
    ✗ ios-deploy not installed. To install:
        brew install ios-deploy
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS platform side's plugin code that
        responds to your plugin usage on the Dart side.
        Without resolving iOS dependencies with CocoaPods, plugins will not work
        on iOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[!] Android Studio (version 3.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.34.0)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

ここに書いてあるものを入れていきます。私は Visual Studio Code で試すつもりなので Android Studio 向けのプラグインはスルーしました。

flutter のこの flutter doctor コマンド本当に環境のチェックしてくれるので、すごく便利ですね。

brew で各種ツールをインストールしていると以下の問題が発生したので対応しました。人によっては必要なのかな?

qiita.com

cocoapod のインストールに死ぬほど時間がかかりました。

Visual Studio Code の flutter を入れると Dart SDK を入れるように言われたので以下のページにしたがって入れます。

dart.dev

こんな感じで

$ brew tap dart-lang/dart
$ brew install dart

Dart が入ったらハローワールドしましょう。 Visual Studio Code を起動して Flutter: Create New Projecthello_world プロジェクトを作りました。こんな感じで作られます。

f:id:okazuki:20190609215630p:plain

おもむろに Flutter: Select Device してせっかくの macOS なので iOS Simulator を選択します。F5 を選択するといい感じに動き始めました。

f:id:okazuki:20190609215949p:plain

適当に書き換えると、ちゃんとライブリロードも動きます。

f:id:okazuki:20190609220057p:plain

いいね。

次のステップ

とりあえず Dart について知らないと話にならないので以下のページで Dart の勉強からかな。

flutter.dev