DEV Community

Morteza Tavanarad
Morteza Tavanarad

Posted on • Updated on

Vim as a Flutter IDE

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'
Enter fullscreen mode Exit fullscreen mode

After adding dart-vim-plugin to your vim, it supports dart syntax and highlights your code.

Dart syntax highlight in vim

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:

  1. dart-lsc-vim
  2. coc.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'
Enter fullscreen mode Exit fullscreen mode

If you are a fan of vim-plug then you can use:

Plug 'natebosch/vim-lsc'
Plug 'natebosch/vim-lsc-dart'
Enter fullscreen mode Exit fullscreen mode

By adding g:lsc_auto_map to true, you apply all defaults keymaps of vim-lsc.

let g:lsc_auto_map = v:true
Enter fullscreen mode Exit fullscreen mode

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,

Dart autocompeltion via vim-lsc-dart

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'
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

If you use vim-plug, you can add the line below to .vimrc.

Plug 'neoclide/coc.nvim', {'branch': 'release'}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Dart autocompletion via coc.nvim

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)
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
edieatha profile image
Edie Atha

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 dart executable

Any Help?

Collapse
 
junery115_25 profile image
Japheth Awah

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.

Collapse
 
junery115_25 profile image
Japheth Awah

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.

Collapse
 
igaurab_55 profile image
igaurab • Edited

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.

Collapse
 
igaurab_55 profile image
igaurab

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?

Collapse
 
haruanm profile image
Haruan Justino

I'm also searching for a way to do that in nvim

Collapse
 
marciofrayze profile image
Marcio Frayze

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?

Collapse
 
marciofrayze profile image
Marcio Frayze

Just found a way to do that, just typing: ga

Thanks for this post. Vim <3

Collapse
 
tavanarad profile image
Morteza Tavanarad

Also, you can use :CocAction for more actions like sorting imports, removing unused imports and so on.

Collapse
 
bakercode profile image
Beicker

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

Collapse
 
bakercode profile image
Beicker

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.

Collapse
 
mathslover profile image
Suraj Pal Singh

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.

Collapse
 
tavanarad profile image
Morteza Tavanarad

I couldn't agree more.

Collapse
 
mhadaily profile image
Majid Hajian

Great article, good job Morteza

Collapse
 
tavanarad profile image
Morteza Tavanarad

Thanks Majid 🙏

Collapse
 
vladoenter profile image
Vladimir Tamayo

Thaks works perfect

Collapse
 
romulocollopy profile image
Rômulo Collopy

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/

Collapse
 
mitai profile image
Mitai
Collapse
 
me52676285 profile image
Me

What about debugging? How do you debug flutter app in vim?

Collapse
 
peekpt profile image
Paulo Bruckmann

silence

Collapse
 
navidshad profile image
Navid

I got it to work after 2 days :D, thanks for this amazing instruction (y)