Tired of re-running Flutter code generation? Here’s how to do it with a shortcut in VS Code.

Code generation is a powerful tool. I love it. It can significantly decrease amount of boilerplate code you have to write.

With it, however, we must run terminal commands in order to make our app work. And the command is big: it’s boring to write it every time.

But VS Code is here to simplify our lives.

Photo by Bernard Hermant on Unsplash

Basics

The command that you have to run is the following:

// To build it once
dart run build_runner build
// To «watch» for file changes and generate code on the go
dart run build_runner watch

And if you want to delete the previously generated files, you need to add a parameter:

dart run build_runner build --delete-conflicting-outputs 
// Or
dart run build_runner watch --delete-conflicting-outputs

Pretty big, huh? I wanted to avoid typing it again and again. There were two solutions for me:

• To have this command written in a notepad. I could then open it and copy the command, then insert it to the terminal;
• In the terminal window, I could press the ↑ Up arrow and it would show me the command history. So I could “rerun” it from there. But it was not always a solution as in terminal I have been running other commands as well so sometimes the history was big.

One more problem is that, from my experience, sometimes code generation doesn’t properly work until you run two more commands. I bet you know them.

# This one not only removes the temporary dependency files, but also erases the cache that generator creates:
flutter clean
# Get dependencies again:
flutter pub get

So usually I was just pressing ↑ Up arrow + Enter 3 times. It didn’t feel right.

Create a VS Code task

In VS Code, you can create so-called tasks. Those are predefined commands that can be easily executed. For example, everytime before running your app. Or on a shortcut.

Let’s create our generator task.

Press ⌘Cmnd + ⇧ Shift + P. It will open the command palette. Select Tasks: Open User Tasks.

Command palette

If you don’t have any tasks configured yet, it might open another panel like this:

This panel is opened after running Tasks: Open User Tasks

Select Others. It must open a file called tasks.json:

Just created tasks.json file

And now, we need to modify it by adding our task. Here it is. Copy it and insert it to the tasks array. I’ll explain the config later on.

A VS Code task that allows you to run the flutter generator with a shortcut

Create a VS Code shortcut

Now we need to bind that task to a shortcut.

Open Preferences → Keyboard Shortcuts → Open Keyboard Shortcuts (JSON) as in the GIF:

Opening keyboard shortcuts JSON

Now paste the following shortcut there:

And save the file.

Try it out!

Now you can press ⌘ Cmnd + G in a Flutter project opened in VS Code and observe the result!

Code generation running with a shortcut

We’ve successfully ran the generator. Now we have a watcher running. It is to the right of the terminal window. If you want to terminate it, tap on it, focus the terminal window and press ⌃ control +C.

Result of code generation ran with a shortcut!

If you

Conclusion

This saves me a lot of time as I run code generation pretty often. But now it could be done in a second.

You can also configure it to run on app launch (when you press F5) before your app starts. So this way you will always regenerate the code before running the app.

Personally, I don’t find it’s convenient, so I better run it myself when I’d like to. That’s why this shortcut is a superhero for me.

Reach out to me in Telegram or join my technical blog there. I will be happy to have you there.

Configuration of the task

For more info of what and how can be configured in VS Code tasks, visit the official docs.

Here’s my configuration explained:

A VS Code task that allows you to run the flutter generator with a shortcut. The file with comments.