Flutter In Visual Studio Code


Flutter is not a build system.

  1. Check out my Flutter SDK tutorial series: to install Dart and Flutter.
  2. Automatically formatting code in VS Code. Install the Flutter extension (see Editor setup ) to get automatic formatting of code in VS Code. To automatically format the code in the current source code window, right-click in the code window and select Format Document. You can add a keyboard shortcut to this VS Code Preferences.

I know, it’s a terrible way to start, but you have to accept that you need to produce a build system for Flutter. There are build systems written in Dart (such as this one), and I’m sure this situation will get better, but right now? There isn’t a good build system. So I use the node package manager.

Here is my basic flow:

For Flutter, it’s best to use Android Studio/IntelliJ or Visual Studio (VS) code with Mac/Windows as your operating systems. These IDEs are the best you can find for developing mobile applications. But to use these with Flutter, we will need to use a few plugins.

  1. Run npm init -y.
  2. Edit the produced package.json file to use flutter under the covers.
  3. Run flutter with npm start instead of the usual flutter commands.

Here is my package.json file as an example:

It’s nice and simple. Now, I have a requirement for a pre-build step. I need to copy some JSON configuration files from my backend to my front end so that the code knows where to look. I can easily add it to the package.json:


There are lots of CLI utilities you can use for handling the pre-build steps you want (or you can build your own). The cpy-cli package copies files into a directory (cross-platform, so it works on both Mac and Windows), and the npm-run-all package gives me the run-s command for running NPM tasks sequentially (and thus allowing me to attach the pre-build task to multiple other tasks).

Now when I run npm start, the configuration files are first copied over, and then my application is built and run.

Visual Studio Code

Flutter Visual Studio Code Extensions

I don’t actually develop on the command line, however. When developing using Flutter, I use Visual Studio Code. This has a flutter debugger which I find useful. To run flutter from the debugger, you add a launch configuration. It looks like this:

The problem with this is that it bypasses my nice build system. However, Visual Studio Code can also execute tasks right before launching the debugger. First, define a task. Press Ctrl-Shift-P to bring up the command palette, and select Tasks: Configure Task. You should be able to go through the cofniguration to add the npm: copyClientConfiguration task. In your .vscode/tasks.json file, this is defined thusly:

You can now go back to the launch configuration (stored in .vscode/launch.json), and add it as a preLaunchTask:

Visual Studio Code Tutorial Pdf

When you launch the flutter application from the debug menu, it will first copy your configuration files into the project before building and launching your app. This duplicates the effect that I have configured with the command line build.