loading...

Vim as a Flutter IDE

tavanarad profile image Morteza Tavanarad 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'

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'

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,

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'

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

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)

I hope this tutorial helps you to configure your vim easily to use it as a Flutter IDE.

Your feedback is also highly appreciated.

Posted on by:

tavanarad profile

Morteza Tavanarad

@tavanarad

A passionate software engineer with more than 10 years experiences in architechting and developing web and mobile app.

Discussion

pic
Editor guide
 

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?

 

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 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 :CocAction for more actions like sorting imports, removing unused imports and so on.

 

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()

 

Thaks works perfect

 

Great article, good job Morteza

 

Thanks Majid 🙏

 

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.

 

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

 
 

let g:lsc_auto_map = v:true
this is where you need to write? .vimrc? example please?

 

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