DEV Community

loading...

Vim as a Flutter IDE

Morteza Tavanarad
A passionate software engineer with more than 10 years experiences in architechting and developing web and mobile app.
Updated on ・3 min read

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.

Discussion (20)

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
zambranobeicker 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
zambranobeicker 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
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
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 Author

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

Collapse
vladoenter profile image
Vladimir Tamayo

Thaks works perfect

Collapse
feniljain profile image
feniljain

Hello,
I am facing an issue with using this config, my vim occassionally hangs badly before giving me some suggestion or if there's some red highlighting. Can you please help me out?

This is the list of plugins I have.

call plug#begin()
Plug 'preservim/NERDTree'
Plug 'dart-lang/dart-vim-plugin'
Plug 'natebosch/vim-lsc'
Plug 'natebosch/vim-lsc-dart'
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'frazrepo/vim-rainbow'
Plug 'itchyny/lightline.vim'
Plug 'junegunn/fzf.vim'
Plug 'airblade/vim-gitgutter'
Plug 'maxmellon/vim-jsx-pretty'
Plug 'hail2u/vim-css3-syntax'
call plug#end()

Collapse
mhadaily profile image
Majid Hajian

Great article, good job Morteza

Collapse
tavanarad profile image
Morteza Tavanarad Author

Thanks Majid 🙏

Collapse
mathslover profile image
Maths Lover

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 Author

I couldn't agree more.

Collapse
me52676285 profile image
Me

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

Collapse
peekpt profile image
Paulo Bruckmann

silence

Collapse
mitaigit profile image
Mitai
Collapse
navidshad profile image
Navid

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