How to Set Up Neovim for Flutter

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

• Flutter
• Dart
• Neovim

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.

And that's it. You're now ready to create the most impressive apps with Flutter and Dart using the terminal and Neovim. Best of luck!