If you are such developers who love vim and use it instead of other IDEs and you are a Flutter developer, you are in the right place. In the continue, it is described how to configure vim to support Dart programming language and Flutter framework.
It is assumed that you are familiar with vim and know how to install plugins.
Support dart files
To support dart filetype, syntax highlight, and indention, There is a vim plugin that is called dart-vim-plugin. If you use Vundle to manage the vim plugins, you can simply add this to your .vimrc.
Plugin 'dart-lang/dart-vim-plugin'
After adding dart-vim-plugin to your vim, it supports dart syntax and highlights your code.
Also, you can format and analyze your code by :DartFmt and :DartAnalyzer respectively.
Auto completion
There are two plugins to add the Dart autocompletion to vim:
dart-lsc-vimcoc.nvim
Dart LSC VIM
The Dart SDK comes with an analysis server that can be run in Language Server Protocol (LSP) mode. The dart-lsc-vim plugin help to register the dart analysis server as a language server by using vim-lsc. Again, by using Vundle you can easily install both vim-lsc-dart and vim-lsc as below:
Plugin 'natebosch/vim-lsc'
Plugin 'natebosch/vim-lsc-dart'
If you are a fan of vim-plug then you can use:
Plug 'natebosch/vim-lsc'
Plug 'natebosch/vim-lsc-dart'
By adding g:lsc_auto_map to true, you apply all defaults keymaps of vim-lsc.
let g:lsc_auto_map = v:true
The default keymaps of vim-lsc are:
- 'GoToDefinition':
<C-]>, - 'GoToDefinitionSplit': [
<C-W>],<C-W><C-]>], - 'FindReferences':
gr, - 'NextReference':
<C-n>, - 'PreviousReference':
<C-p>, - 'FindImplementations':
gI, - 'FindCodeActions':
ga, - 'Rename':
gR, - 'DocumentSymbol':
go, - 'WorkspaceSymbol':
gS, - 'SignatureHelp':
gm,
CoC.nvim
CoC.nvim is an intellisense engine for vim (>= 8.1) and neovim (>=0.3.1). It is a completion framework and language service client which supports extension features of VSCode.
You can install CoC.nvim by adding the line below to .vimrc if you have Vundle.
Plugin 'neoclide/coc.nvim'
After installing coc.nvim by Vundle, you should change the brach to release in ~/.vim/bundle/coc.nvim.
cd ~/.vim/bundle/coc.nvim
git checkout release
If you use vim-plug, you can add the line below to .vimrc.
Plug 'neoclide/coc.nvim', {'branch': 'release'}
After adding coc.vim plugin to vim to enable flutter support you should install coc-flutter by running this command in vim
:CocInstall coc-flutter
You can add configuration to have go-to definition, find references, go-to implementation and etc. You can check CoC.nvim's README file for more configuration.
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
I hope this tutorial helps you to configure your vim easily to use it as a Flutter IDE.
Your feedback is also highly appreciated.
Top comments (21)
Hello, Thanks for the Great tutorial:
However am getting this error when I open a "main.dart" file in vim
"Developer/flutter_app/lib/main.dart" 111L, 4371C
Error detected while processing function lsc#dart#register[1]..117_FindCommand[1]..117_FindDart:
line 8:
Could not find a
dartexecutableAny Help?
Well what you have to do is install dart on your system, or make sure that the path to the executable is added to your environment variables.
Yeah I see everyone doing this, i set it up and it works flawlessly but how do I connect my application to the emulator, like with visual studio code when I just run flutter run it runs on the emulator.
There are different commands that you can run which are mentioned in the coc-flutter repo:
github.com/iamcco/coc-flutter
For your particular problem there are two commands you should run:
:CocCommand flutter.emulators
This list the installed emulators on your devices, just select the one and press Enter
Inorder to run the current application
:CocCommand flutter.run
This is similar to flutter run
Now you can bind these two commands into a keybinding and use that keybinding instead
nnoremap leader e :CocCommand flutter.emulators CR
nnoremap leader r :CocCommand flutter.run CR
** I am not able to put the leader as a tag. Dev doesn't allow that.
I really loved the refactor code of the vs code, how do I make it work with coc-flutter, as of now, I only see the option to extract my widget. I wanted to wrap with current widget with another widget. Is there a way around? Am I missing something?
I'm also searching for a way to do that in nvim
I'm looking for a way to auto-import missing imports. I'm able to do that with Java, but no luck with dart/flutter yet. Any tips?
Just found a way to do that, just typing: ga
Thanks for this post. Vim <3
Also, you can use
:CocActionfor more actions like sorting imports, removing unused imports and so on.Does someone knows how to avoid this warning?
[dart_omit_local_variable_types] [I] Omit annotations for local variables.
I just want to work indicating the data type of the variables, not only with 'var' keyboard
Sorry sorry hahaa I found what I wanted. Just needed to add the next lines to the analysis_options.yaml
linter:
rules:
- camel_case_types
- omit_local_variables_types: false
And it works perfectly.
I must say that coc.nvim is by far best intellisense engine for vim/neovim.
I use it for go, c++, flutter/dart, bash, latex and never got disappointed.
I couldn't agree more.
Great article, good job Morteza
Thanks Majid 🙏
Thaks works perfect
A tip for
asdf(asdf-vm.com/) users:reslving to the shim my not work. Try
let g:lsc_dart_sdk_path='~/.asdf/installs/flutter/2.5.3-stable/github.com/akinsho/flutter-tools.nvim