Run Flutter apps in multiple platforms parallelly.

Visual Studio Code Configurations file

Hello guys, We will be configuring our Flutter workspace in VS code to develop apps on multiple platforms parallelly. We all might have faced this issue where we want to run flutter apps in multiple devices but used run button on top right corner of VS code(we can debug code 🪲) and the terminal commands(Not debugging option 😔) for another device. Don't you wonder if we can configure such a way that you can debug both the applications at the same time using VS code? Yes, now we will go through that.

Create Flutter project:

Create a flutter project using create command and open in VS code -

$ flutter create demo_app
$ code demo_app

Create launch.json file:

To configure, we need to create a file called launch.json in .vscode folder in the project's root repository. After creating the file copy and paste this code in launch.json.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Windows",
      "program": "lib/main.dart",
      "request": "launch",
      "type": "dart",
      "flutterMode": "debug",
      "args": [
        "-d",
        "windows"
      ]
    },
      {"name": "Web",
      "program": "lib/main.dart",
      "request": "launch",
      "type": "dart",
      "flutterMode": "debug",
      "args": [
        "-d",
        "edge"
      ]
    },
    {
      "name": "Android",
      "program": "lib/main.dart",
      "request": "launch",
      "type": "dart",
      "flutterMode": "debug"
    }
  ],
  "compounds": [
    {
      "name": "All Devices",
      "configurations": [
        "Windows",
        "Web",
        "Android"
      ]
    }
  ]
}

On this configuration you will be able to see option in bottom status bar
When you click on that Web(demo_app) option you will be viewed what configuration you want to use.

There you go choose one option and run the project as you wish 😎.

Android studio Configuration file

From the same project, If you want to do that same in Android studio then create/edit .xml file which exist in .idea\runConfigurations\. If not create one manually without writing code itself. The Steps are as followed -

• When you click on this button you will be viewing an option called edit configurations.
  

• Click on that and in Additional run args enter -d all.

There you go the main_dart.xml file will be created. And the code looks like this -

<component name="ProjectRunConfigurationManager">
    <!-- Edit the name value to change the name of the button-->
  <configuration default="false" name="main.dart" type="FlutterRunConfigurationType" factoryName="Flutter">
    <!--    Write your additional arguments in this value -->
        <option name="additionalArgs" value="-d all" />
    <option name="filePath" value="$PROJECT_DIR$/lib/main.dart" />
    <method v="2" />
  </configuration>
</component>

When you click on that button now, you will be running in all available applications. Hope you guys like it. Thank you and keep coding 🧑🏻‍💻.

Comments

[Pablo Discobar]

if you are interested in Flutter, then read this article - dev.to/pablonax/free-flutter-templ...