Motivation

I have been using Neovim since 2022 as my primary coding editor, but since I work in frontend mostly for my office, setting up Neovim for JavaScript environment has not been that much of a challenge. Just installed the LSP servers with Mason and thats pretty much it. All the other configurations were mostly for customizing the editor.

But recently, I got involved into a Flutter project. Since I was using Flutter after almost like 4 years, so I did not want to take any risk at first and just wanted the project to get started. So, I was using Android Studio to write and debug the project, of course with IdeaVim plugin. But even after using IdeaVim, I was missing all the vim motions I was comfortable with in my vim editor. The development workflow was smooth with Android Studio, but writing code has become so dificult after using Neovim for so many years. It was not end of the world, but I was getting annoyed everytime I typed some vim motion unmindfully and it was not working. At first, I decided to configure IdeaVim keybindings to adjust with at least the important vim motions I need. But, it was just not enough.

So, last weekend, I decided to put an end to this misery and get my hands dirty to configure my neovim for flutter.

Research phase

At first, I wanted to explore what options I have available for flutter in neovim. I checked if there is a stable LSP server or not. Got it in Mason. Cool! Then, I checked if there is a stable DAP support for dart and flutter or not. During this time, I came across this amazing plugin: flutter-tools. This plugin is everything you need to have an IDE like experience in neovim for flutter. It configures the LSP server for you. So, no need for Mason. On top of that, it also supports configuring your DAP adapter within the plugin. Although, it does not provide any DAP server, but guess what! You do not need it. Flutter SDK provides its own DAP server for both flutter and dart. So, if you have nvim-dap and nvim-dap-ui (not necessarily) configured, with only this plugin installed, you are good to go.

Configuration time

After feeling confident enough, I decided to update my neovim configuration. It did not take much time to configure the flutter-tools plugin. The documentation is pretty self explanatory. You just add the following and the LSP already works. And I just added two custom keybindings for hot reload and restart since I am going to use them a lot.

1
    require("flutter-tools").setup {
2
        flutter_path = <YOUR_FLUTTER_SDK_PATH>,
3
        dev_log = {
4
            enabled = false
5
        },
6
        dev_tools = {
7
            autostart = true,
8
            auto_openbrowser = true
9
        }
10
    }
11
    vim.keymap.set('n', 'Fr', [[:FlutterReload<CR>]], {})
12
    vim.keymap.set('n', 'FR', [[:FlutterRestart<CR>]], {})

DAP configuration

We are going to use the default debug adapters that come with Flutter SDK. You can run the Flutter debug adapter with the command: flutter debug_adapter. Similary, you can run the dart debug adapter with the command: dart debug_adapter. If you have Flutter SDK properly setup in your environment variable (Go through this link for that), the debug adapters should work without any issue.

Since we are using executable from Flutter SDK for the DAP adapter, our neovim dap adapter should be of type executable and we just need to add the command in the dap configuration. The setup should look like this:

1
    local FLUTTER_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/flutter"
2
    local DART_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/cache/dart-sdk/bin/dart"
3
    local FLUTTER_COMMAND = 'flutter'
4
    local DART_COMMAND = 'dart'
5

6
     -- dart DAP
7
    dap.adapters.dart = {
8
        type = 'executable',
9
        command = DART_COMMAND,
10
        args = { 'debug_adapter' },
11
        -- windows users will need to set 'detached' to false
12
        options = {
13
            detached = true,
14
        }
15
    }
16

17
    -- Flutter DAP
18
    dap.adapters.flutter = {
19
        type = 'executable',
20
        command = FLUTTER_COMMAND,
21
        args = { 'debug_adapter' },
22
        -- windows users will need to set 'detached' to false
23
        options = {
24
            detached = true,
25
        }
26
    }

Now, for Windows users, the command flutter or dart directly will not work directly. Instead of them, you will need to provide the absolute path to flutter.bat file and dart.exe file in your SDK. So, to combine both windows and linux/macOS configuration together, it looks something similar to this:

1
    local is_windows = vim.loop.os_uname().sysname == "Windows_NT"
2
    local FLUTTER_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/flutter"
3
    local DART_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/cache/dart-sdk/bin/dart"
4
    local FLUTTER_COMMAND = 'flutter'
5
    local DART_COMMAND = 'dart'
6

7
    if is_windows == true then
8
        FLUTTER_SDK_PATH = "<PATH_TO_FLUTTER_SDK>"
9
        DART_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/cache/dart-sdk"
10
        FLUTTER_COMMAND = '<PATH_TO_FLUTTER_SDK>/bin/flutter.bat'
11
        DART_COMMAND = '<PATH_TO_FLUTTER_SDK>/bin/cache/dart-sdk/bin/dart.exe'
12
    end
13

14
    dap.adapters.dart = {
15
        type = 'executable',
16
        command = DART_COMMAND,
17
        args = { 'debug_adapter' },
18
        options = {
19
            detached = is_windows == false,
20
        }
21
    }
22
    dap.adapters.flutter = {
23
        type = 'executable',
24
        command = FLUTTER_COMMAND,
25
        args = { 'debug_adapter' },
26
        options = {
27
            detached = is_windows == false,
28
        }
29
    }

We also need two DAP configurations: one for Flutter and another for Dart.

1
    dap.configurations.dart = {
2
        {
3
            type = "dart",
4
            request = "launch",
5
            name = "Launch dart",
6
            dartSdkPath = DART_SDK_PATH,                  -- ensure this is correct
7
            flutterSdkPath = FLUTTER_SDK_PATH,            -- ensure this is correct
8
            program = "${workspaceFolder}/lib/main.dart", -- ensure this is correct
9
            cwd = "${workspaceFolder}",
10
        },
11
        {
12
            type = "flutter",
13
            request = "launch",
14
            name = "Launch flutter",
15
            dartSdkPath = DART_SDK_PATH,                  -- ensure this is correct
16
            flutterSdkPath = FLUTTER_SDK_PATH,            -- ensure this is correct
17
            program = "${workspaceFolder}/lib/main.dart", -- ensure this is correct
18
            cwd = "${workspaceFolder}",
19
        }
20
    }

Put it all together

flutter-tools provide a register_configurations property under debugger where you can put your flutter specific DAP configurations and adapter definitions. So, if we include our DAP configuration inside the plugin setup, the entire configuration looks something similar to this:

1
    local is_windows = vim.loop.os_uname().sysname == "Windows_NT"
2
    local FLUTTER_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/flutter"
3
    local DART_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/cache/dart-sdk/bin/dart"
4
    local FLUTTER_COMMAND = 'flutter'
5
    local DART_COMMAND = 'dart'
6

7
    if is_windows == true then
8
        FLUTTER_SDK_PATH = "<PATH_TO_FLUTTER_SDK"
9
        DART_SDK_PATH = "<PATH_TO_FLUTTER_SDK>/bin/cache/dart-sdk"
10
        FLUTTER_COMMAND = '<PATH_TO_FLUTTER_SDK>/bin/flutter.bat'
11
        DART_COMMAND = '<PATH_TO_FLUTTER_SDK>/bin/cache/dart-sdk/bin/dart.exe'
12
    end
13

14
     require("flutter-tools").setup {
15
        flutter_path = <YOUR_FLUTTER_SDK_PATH>,
16
        dev_log = {
17
            enabled = false
18
        },
19
        dev_tools = {
20
            autostart = true,
21
            auto_openbrowser = true
22
        },
23
        debugger = {
24
            enabled = true,
25
            register_configurations = function(_)
26
                dap.adapters.dart = {
27
                    type = 'executable',
28
                    command = DART_COMMAND,
29
                    args = { 'debug_adapter' },
30
                    options = {
31
                        detached = is_windows == false,
32
                    }
33
                }
34
                dap.adapters.flutter = {
35
                    type = 'executable',
36
                    command = FLUTTER_COMMAND,
37
                    args = { 'debug_adapter' },
38
                    options = {
39
                        detached = is_windows == false,
40
                    }
41
                }
42

43
                dap.configurations.dart = {
44
                    {
45
                        type = "dart",
46
                        request = "launch",
47
                        name = "Launch dart",
48
                        dartSdkPath = DART_SDK_PATH,
49
                        flutterSdkPath = FLUTTER_SDK_PATH,
50
                        program = "${workspaceFolder}/lib/main.dart",
51
                        cwd = "${workspaceFolder}",
52
                    },
53
                    {
54
                        type = "flutter",
55
                        request = "launch",
56
                        name = "Launch flutter",
57
                        dartSdkPath = DART_SDK_PATH,
58
                        flutterSdkPath = FLUTTER_SDK_PATH,
59
                        program = "${workspaceFolder}/lib/main.dart",
60
                        cwd = "${workspaceFolder}",
61
                    }
62
                }
63
            end
64
        }
65
    }
66
    vim.keymap.set('n', 'Fr', [[:FlutterReload<CR>]], {})
67
    vim.keymap.set('n', 'FR', [[:FlutterRestart<CR>]], {})

Now with a cool small dap-ui configuration like this, your flutter IDE experience is ready to enjoy in your favourite editor

1
    local dapui = require('dapui')
2
    -- Open dapui automatically when a new debug session is created
3
    dap.listeners.after.event_initialized["dapui_config"] = function()
4
        dapui.open()
5
    end
6
    dap.listeners.before.event_terminated["dapui_config"] = function()
7
        dapui.close()
8
    end
9
    dap.listeners.before.event_exited["dapui_config"] = function()
10
        dapui.close()
11
    end