Running multiple Flutter apps on VSCode

Introduction

This is a quick guide for you to set up your dev environment on Visual Studio Code so you can run more than one app at the same time.

First, you can start by selecting the 2 apps you want to have with this setup, in my example, I have app1 and app2 inside the same folder:

File structure

After that, you will need or to create or access the launch.json inside /.vscode/ folder:

NOTE: Change the name and path so it fits your app names

File: \.vscode\launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "APP 1",
      "program": "./app1/lib/main.dart",
      "request": "launch",
      "type": "dart",
    },
    {
      "name": "APP 2",
      "program": "./app2/lib/main.dart",
      "request": "launch",
      "type": "dart",
    },
  ],
}

Now when you access the debug option on VSCode on the top you be able to see both apps:

Debug options

If you select one of the apps and press the green play button, this will launch it straight away, should appear something like this on the right side of the VSCode:

VSCode debug options

Ok… but how can I launch one more app?

You just need to click on APP 2 and press play!

Amazing right? Now on the side options, it will show you the 2 apps that are running, you can switch between both to stop, pause, etc…

Well… What about if I want to run it on multiple devices?

That is possible as well :)
All you need to do is to get the device id and add it to the launch.json file e.g:

{
      "name": "APP 2",
      "program": "./app2/lib/main.dart",
      "request": "launch",
      "type": "dart",
      "deviceId": "2314daf8",   // <-- this
    },

Where can I get the device Id?

I will try to update this tutorial in the next few weeks with how to run tasks before running the apps (e.g. running_builder + flutter pub get).

Clap if you like! :)