Set up Vim for Flutter

There are various ways of installing Vim plugins. I use vim-plug in my examples here but I’ll add links to instructions for each plugin so you can do it your own way.

Dart

As Flutter uses the Dart language, install Dart support for Vim. I add the following to my ~/.vimrc:

" Between the 'plug#begin()' and 'plug#end()' lines
Plug 'dart-lang/dart-vim-plugin'

Then I restart Vim and run :PlugInstall.

This adds syntax highlighting and auto-indentation of Dart code.

Language Servers

Language Servers/LSPs (LSP = Language Server Protocol but both terms are often used interchangeably) give your editor information about the structure of a language and enable it to do syntax highlighting and code completion, along with deeper functionality such as allowing you to jump to the definition of a function, do refactoring etc.

LSPs are used in Visual Studio for a lot of its advanced functionality but they can also be used in Vim. There’s more than one way of doing this but I use coc-nvim (despite the name it works in modern versions of Vim, not just Neovim).

Install the coc.nvim plugin in Vim

Using vim-plug I add the following to my ~/.vimrc:

" Between the 'plug#begin()' and 'plug#end()' lines
Plug 'neoclide/coc.nvim', {'branch': 'release'}

Again, I restart Vim and run :PlugInstall.

For other ways of installing just follow the instructions .

Install a Flutter LSP

Install the Flutter language server in CoC, coc-flutter. This provides lots of helpful functionality for working with Flutter in Vim as described in the link.

:CocInstall coc-flutter

This LSP needs to know where the Flutter SDK is installed. In Vim, run :CocList FlutterSDKs and make sure it finds at least 1 SDK. If not, add a line to CoC settings (:CocConfig):

"flutter.sdk.path": "$HOME/.local/flutter/bin"

You can find the correct path with which flutter in the terminal.
Originally, I had installed my Flutter SDK at /usr/bin. That caused invisible errors with coc-flutter as it couldn’t access the path properly to find the Flutter SDK. I was having trouble getting this step working. I then moved the Flutter SDK to $HOME/.local/flutter and everything started to work properly

coc.nvim settings

To change CoC settings the command :CocConfig can be used in Vim. On my system it opens up the file ~/.vim/coc-settings.json. You can open/edit this file directly but depending on your Vim configuration it may be in a different location.

Here are some of the settings I prefer:

{
  "diagnostic.checkCurrentLine": true,
  "diagnostic.enableMessage": "jump",
  "colors.enable": true,
  "suggest.noselect": true,
  "inlayHint": false
}

"diagnostic.checkCurrentLine": true,

By default, Coc will show you a diagnostic error or warning when your cursor is over the word causing the problem. Setting this to true means you only have to be on the same line as the error to see the dialog, not the exact word.

"diagnostic.enableMessage": "jump",

This diagnostic popups can be really helpful, but it’s all a bit frenetic for me, I’m a prefers-reduced-motion kind of person. Setting this to jump means they don’t pop up automatically, but can still be shown when I want to see them. I also add this line to ~/.vimrc:

nmap <silent> gh <Plug>(coc-float-hide)
nmap <silent> gl <Plug>(coc-diagnostic-info)

Which allows me to show/hide the diagnostics with gh/gl respectively.

"colors.enable": true,

This setting is for another CoC addition called coc-highlight. I installed this in Vim with:

:CocInstall coc-highlight

This adds various types of colour highlighting, but the one I was most interested in is how it will detect any colours (eg RGB or hex) in your code and change the colour of their text to give you a preview of them. This feature is enabled with the colors.enable line as above.

"suggest.noselect": true,

When you start typing a word, CoC will default to inserting its first suggested autocompletion word. This is a bit more ‘help’ than I like, so I add this setting to make the process more intentional.

"inlayHint": false,

By default CoC inserts inlay hints, for example if you haven’t added a type hint to indicate what kind of widget is being referred to somewhere, it will insert the <Widget> hint for you as a piece of magical ghost text.

These bizarre bits of text appear in the middle of lines of code, except they aren’t really there, you can’t select them or delete them and if you’re moving your cursor around it acts as if they don’t exist. I’m sure some people enjoy them, and for those people I’m glad that they exist. For me, they are disgusting, obnoxious devil-warts.

Thankfully, they can be vanquished by adding this line to the CoC settings.