1. はじめに

FlutterアプリをmacOS環境で動かすための開発環境の構築手順をまとめています。

macOS環境でFlutterアプリを開発しつつ、iOSやAndroidエミュレータ・実機を使わずにその場でFlutterアプリの動作確認やデバッグが出来るため、とても便利です。

2021/03/04時点でのmacOSのサポート状況はベータ版となっています。ベータ版ですが、Flutter 2.0以降はstableチャネルでも利用可能です！

Linux環境の場合はこちら

2. 環境構築の手順

Flutter SDKインストール

リポジトリからcloneした後、適当なパスに配置してパスを通しておきます。

$ git clone https://github.com/flutter/flutter
$ sudo mv flutter /usr/local/
$ export PATH=$PATH:/usr/local/flutter/bin

Android Studioインストール （オプション）

Android向けにビルドしたり、Androidエミュレータで動作確認をしたい場合にのみインストールして下さい。当然、Android Studioをインストール済みの場合は作業不要です。

https://developer.android.com/studioからmacOS版をダウンロードして適当な場所に置いて、インストールスクリプトを叩きます。

Android Studioのインストールで基本的には次へを押していく感じです。

Xcodeのインストール

ビルドにXcodeが必要なるため、ストアからインストールしてください。

Flutterセットアップ

ターゲット環境をHost PC (macOS) にする設定を行います。参考

$ flutter config --enable-macos-desktop

cocoapodsのインストール

cocoapodsはサンプルをビルドして動かすだけなら不要ですが、プラグインを追加してアプリを作成していくためには必須で必要です。

$ sudo gem install cocoapods

ここまでの状況の確認

以下のコマンドを使うと、flutterを動かすためのインストール状況を診断してくれます。今回はサンプルを動かせればいいので、以下の状態でも大丈夫です。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.13.1-pre.58, on Mac OS X 10.15.1 19B88, locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[!] 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.40.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

3. サンプルを実行してみる

サンプルプロジェクトの作成

$ mkdir sample
$ cd sample
$ flutter create .

実行

$ flutter run -d macos

もしくは、ビルドのみ行いたい場合は以下のコマンドを実行します。

$ flutter build macos

4. デスクトップ向けプラグインの動作確認

プラットフォーム依存のAndroid/iOS向けのプラグインはデスクトップ環境では利用出来ません (Dartのみのプラグインであれば、プラットフォームに依存せずに共通で利用が可能です) 。そのため、用意されているプラグインを使ったテスト済みのサンプルがflutter-desktop-embeddingにあります。これを参考に、デスクトップ向けのプラグインの作成方法を把握することが出来ます。

flutter-desktop-embedding取得

$ git clone https://github.com/google/flutter-desktop-embedding.git

実行

$ cd flutter-desktop-embedding/testbed
$ flutter run

ダークモードも対応してそうです↓