How to organize Flutter import directives in VSCode

After I code a Flutter app for a while, my import directive becomes messy.

It contains unused import that VS code automatically adds for you mixed with the rest of your unordered import directives.

Let's see how we can make it more organized.

Organized imports

We can use the Organized imports command to organize import directives which will remove unused import and sort import packages by their name.

You can use this command by

1. Opening Command Palette.
2. Searching for Organized imports.
3. Hit return to select and use it.

You can also use ⌥ – option + ⇧ - shift + o to directly access to Organized imports command.

Here is an example of what "Organized imports" can do for you.

• Remove unused imports.
• Sort import packages by their name.

You can easily support sarunw.com by checking out this sponsor.

Translate your app In 1 click: Simplifies app localization and helps you reach more users.

Try it for Free

Organize imports on Save

The organize imports command only affects the file you are currently editing.

Running this command all the time for every file is not fun, so it would be better to run it every time you edit and save a file.

To do that, open settings.json, which keeps VS code editor settings.

You do that from the Command Palette, then search for the "Preferences: Open User Settings (JSON)" command.

Then add this to your setting.

{
  // Other settings.
  "[dart]": {
      "editor.codeActionsOnSave": {
          "source.fixAll": true,
          "source.organizeImports": true,
      }
  }
}

This will run the organized imports command when you save your files.