How to Set Up Neovim for Flutter

February 18, 2021 3 min read

Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. This blog post is for the developers who want to build a great mobile app while also using the terminal and Neovim. It will show you how to set up Neovim for Flutter and its programming language Dart.

Prerequisites

The init.vim File

Neovim uses the init.vim file to configure everything from keymappings to plugins. This file is where we'll start. You can find it in your ~./config/nvim directory. If you don't see it, create it and add the following:

call plug#begin('~/.vim/plugged')

"Dart/Flutter
Plug 'dart-lang/dart-vim-plugin'
Plug 'thosakwe/vim-flutter'
Plug 'natebosch/vim-lsc'
Plug 'natebosch/vim-lsc-dart'

call plug#end()

The Plugins We've Added

We've just added four essential plugins to the init.vim file:

dart-vim-plugin: this plugin gives you syntax highlighting and code formatting for Dart filetypes.
vim-flutter: this plugin allows you to run Flutter commands directly from Neovim. It includes the much-appreciated hot-reload-on-save command that reloads your app when you save your code.
vim-lsc & vim-lsc-dart: these two plugins allow the Language Server Protocol (LSP) to run the analysis server that comes with the Dart SDK. vim-lsc-dart calls on the vim-lsc plugin to register the analysis server as a language server. This is what provides autocompletion support for Dart.

Save the file, restart Neovim, and run :PlugInstall to install the plugin. Then, open lib/main.dart in one of your projects to see the magic happen.

You'll notice that we now have autocompletion, syntax highlighting, and documentation. Good stuff.

In addition, vim-flutter automatically hot-reloads your app once the file is saved. It happens by default, but only when a Flutter process is running. This means that you either need to have an emulator or a real device connected with the app running on it.

Important Flutter Commands

:FlutterRun <args>: calls Flutter Run <args>
:FlutterHotReload: triggers a hot reload on the Flutter process
:FlutterHotRestart: triggers a hot restart on the Flutter process
:FlutterQuit: quits the current Flutter process
:FlutterDevices: opens a new buffer and writes the output of Flutter devices to it
:FlutterSplit: opens Flutter output in a horizontal split
:FlutterEmulators: executes a Flutter Emulator process
:FlutterEmulatorsLaunch: executes a Flutter Emulator --launch process with any provided arguments
:FlutterVisualDebug: toggles visual debugging in the running Flutter process

You can view the documentation for the vim-flutter plugin here.

If you created any Emulators, you can see them listed with :FlutterEmulators.

If you have any devices connected, you can see them listed with :FlutterDevices.

To test anything on a connected device, just run :FlutterRun. This will open a buffer with Flutter logs. Every change that you save will now be reflected on the device, hot-reloaded in all of its glory.