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.