Emacs as an IDE: Flutter
Tags: Emacs Programming 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
:lang section, uncomment dart and add
+flutter. Dart and
Flutter use yaml configuration files for dependencies so you can optionally
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
(setq lsp-dart-sdk-dir "FLUTTER_DIR/bin/cache/dart-sdk") (setq lsp-dart-flutter-sdk "FLUTTER_DIR") (setq flutter-sdk-path "FLUTTER_DIR")
SPC h r r) your configuration and you are good to go. You can
read more about the features of
At this point most commands you could do in say Android Studio are some variant
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.