Flutter環境構築 with emacs


2 min read
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ファイルを変更時にホットリロードが走るようになります。


Previous article

2019年の振り返り

‌ 2020年に入って早1週間が経過しましたが、皆様いかがお過ごしでしょうか。 一年の振り返り!みたいのはあんまりやるつもりがなかったのですが、あまりにもみんなやっていて目につくので、これはやった方が良い物なのか・・・と思い直し、遅ればせながら振り返ってみようかと思います。 1月そういえば2018年振り返りみたいなブログ書いてないんですが、2019年は心おだやかに生きたいと思っております — nasa9084@某某某某(0x1a) (@nasa9084) January 3, 2019 twitterによると、2019年は心おだやかに生きたいというのが目標だった様子。あまり心穏やかには生きられませんでした。合掌。 そういえば昨年は年明け早々インフルエンザにかかったんでした。 一月はLOCALのイベントに行ったり、YAPC:

emacs/lsp-mode + goplsでGo用のLSP環境を設定する
Next article

emacs/lsp-mode + goplsでGo用のLSP環境を設定する

Language Server Protocol(以下LSP)はこれまでエディタ/IDEが独自に実装する必要があった、補完や定義参照、静的解析によるエラー分析などをサービスとして実現するためのプロトコルです。 LSPを実装したクライアントは、Language Serverを提供している言語であれば何でも補完や定義参照、静的解析といった便利機能を使用することができます。 Microsoftが2016年にその仕様を公開してから、多くのエディタ用のLSPのクライアント実装が作られ、また各種言語用のLanguage Serverも公開されています。 Go言語も例に漏れずLanguage Serverの実装がいくつか存在します。今回は準公式提供のgoplsを使用して設定してみます。 もちろんemacsにも複数のLSP Client実装がありますが、今回はlsp-modeを使用します。 まずはemacs用のパッケージをインストールします。次のモノをpackage-installかpackage-list-packagesか、そのあたりでよしなにインストールします。


GO TOP

🎉 You've successfully subscribed to something tech.!
OK