Flutter環境構築 with emacs

ここ数日、FlutterでAndroidアプリを書く、ということに入門してみています。 Androidアプリの開発自体は大分前(無印Galaxy Sを使っていた頃なので、EclairとかFroyoとかの頃)にすこしだけやったことがあるんですが、そのころと比べるとかなり簡単に、きれいなアプリがシュッと動いて、ちょっとばかし感動しています。

扨、Flutter/Android開発の環境構築ですが、ほとんどのドキュメントがAndroid Studioを前提としており、私のようなemacsユーザがどうしたらいいのか、ちょっとばかし躓きそうなので、メモがてら残しておきます。

なお、基本的な手順は公式サイトに準じます。また、環境はmacOS Catalina バージョン 10.15.1、emacsはbrewで入れるemacs-mac 26.3です。 Flutterのバージョンは執筆時点でv1.12.13+hotfix.5でした。

Flutter SDKのインストール

公式サイトのダウンロードリンクからFlutter SDKをダウンロードしてきて解凍、任意の場所に配置します。私はなんとなくで$HOME/.local/flutter以下に配置しています。

$ wget https://storage.googleapis.com/flutter_infra/releases/stable/macos/flutter_macos_v1.12.13+hotfix.5-stable.zip
$ unzip flutter_macos_v1.12.13+hotfix.5-stable.zip
$ mv flutter $HOME/.local/

配置できたらPATHを通します。私はzshを使っているので、$HOME/.zshrcに以下の行を追加しました。

# Flutter SDK
export PATH="$PATH:$HOME/.local/flutter/bin"

PATHを通したら、flutter --versionでちゃんとPATHが通っているかを確認します。

Android SDKのインストール

公式サイトの手順ではAndroid Studioを入れろとのことですが、emacsを使う予定なので、Android Studioはインストールせず、Android SDKのみをインストールします。 Android Studioのサイトへアクセスし、DOWNLOAD OPTIONS をクリックしてCommand line tools onlyのところからmacOS用のCommand line toolsをダウンロード、Flutter SDKと同様に適宜配置してPATHを通すか、簡単にbrew cask install android-sdkとします。私は今回はbrewで入れました。(Flutter SDKもbrewで配布されていますが、Flutter SDKは少し古かったので、公式からダウンロードしてきた方が良さそうです)

brew cask install android-sdkをしたときにもメッセージが出ますが、android-sdkを使用するにはJDK 8が必要なので、brew cask install adoptopenjdk8としてJDKもインストールしておきます。

インストールできたら、ANDROID_HOME環境変数をandroid-sdkのパス(brewで入れた場合は/usr/local/share/android-sdk)に設定し、android-sdkにもPATHを通しておきます。

# Android SDK
export ANDROID_HOME="/usr/local/share/android-sdk"
export PATH="$PATH:/usr/local/share/android-sdk-tools"
export PATH="$PATH:/usr/local/share/android-sdk/tools/bin"
export PATH="$PATH:/usr/local/share/android-sdk/platform-tools"

PATHが正しく通っていれば、sdkmanagerが使えるようになっているはずなので、次のコマンドでSDKをインストールします。

sdkmanager "platform-tools" "platforms;android-28" "build-tools;28.0.3"

続いて、flutter doctor --android-licensesを実行し、android SDKのライセンスに同意します。

ここまでやったあと、flutter doctorコマンドを実行すると、FlutterおよびAndroid toolchainがOKになると思いますので、あとはお手持ちのAndroid端末のUSBデバッグを有効にし、公式のデモアプリを実行してみましょう。

emacsの設定をする

use-packageを使用している場合は、次の設定を入れてemacsを再起動します

(use-package dart-mode
  :ensure t
  :custom
  (dart-format-on-save t)
  (dart-sdk-path "~/.local/flutter/bin/cache/dart-sdk/"))

(use-package flutter
  :ensure t
  :after dart-mode
  :bind (:map dart-mode-map
              ("C-M-x" . #'flutter-run-or-hot-reload))
  :custom
  (flutter-sdk-path "~/.local/flutter/")
  :hook (dart-mode . (lambda ()
                          (add-hook 'after-save-hook #'flutter-run-or-hot-reload nil t))))

dart-sdk-pathおよびflutter-sdk-pathの値は適宜変更してください。これでdartファイルを変更時にホットリロードが走るようになります。