James Williams

Emacs as an IDE: Flutter

In the last post, we did the basic quality of life setup to make Emacs into a general purpose supped up text editor. This post will walk you through setting up Flutter IDE support rivaling that of VS Code or Android Studio.

Before starting you should install Flutter using the instructions on flutter.dev. Make a note of where Flutter is installed on your machine. Some things will work out of the box and others will require paths to be specified.

Adding Flutter and Dart support to Emacs

Again we need to go back to the Doom init.el file (SPC f P) and add enable some options.

In the :lang section, uncomment dart and add +lsp and +flutter. Dart and Flutter use yaml configuration files for dependencies so you can optionally uncomment yaml to enable some basic highlighting.

(dart +flutter +lsp)   ; paint ui and not much else
;; ...
yaml                   ; JSON, but readable

Even if you are able to run Flutter or Dart from a command-line prompt, Emacs doesn't always pick up your path so it's best to specify them. We'll need to declare the following variables:

lsp-dart-sdk-dir          ;; location of Dart SDK
lsp-dart-flutter-sdk-dir  ;; location of Flutter SDK
flutter-sdk-path          ;; location of Flutter SDK

The Flutter SDK needs to be defined for both twice because under the covers there are two different tools providing Flutter support. Given that FLUTTER_DIR is the base directory of your Flutter install, add the following to your config.el file.

(setq lsp-dart-sdk-dir "FLUTTER_DIR/bin/cache/dart-sdk")
(setq lsp-dart-flutter-sdk "FLUTTER_DIR")
(setq flutter-sdk-path "FLUTTER_DIR")

Finally, reload(SPC h r r) your configuration and you are good to go. You can read more about the features of lsp-dart.

At this point most commands you could do in say Android Studio are some variant of lsp-dart-* with mostly key bindings for testing. Running a Flutter app or doing a hot reload is bound to SPC m r. Some of the ones I use a lot that don't yet have bindings are:

lsp-dart-pub-get                ;; executes pub get or flutter pub get
lsp-dart-pub-upgrade            ;; executes pub upgrade or flutter pub upgrade
lsp-dart-show-outline           ;; displays the structure of the Dart file
lsp-dart-show-flutter-output    ;; displays Flutter widget structure

Here's how my flow looks when working with Flutter.