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.
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
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-dartcalls on the
vim-lscplugin 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.
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
If you have any devices connected, you can see them listed with
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!