Run Flutter apps in multiple platforms parallelly.
Tags: flutter, android, desktop, ios
Published: 2021-05-13 16:04:41

# 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 -
```bash
$ 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`.

```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 ![Status bar after adding configurations](https://firebasestorage.googleapis.com/v0/b/krossa-prod.appspot.com/o/tz0wG7ju6BbQynlNcYSD1ruwRh13%2Farticles%2FfXVVZdsJFZsLyGu39ZZk%2Fstatus_bar.png?alt=media&token=ac731616-c1e0-40ec-bed6-1332aff65ddb)
When you click on that `Web(demo_app)` option you will be viewed what configuration you want to use.
![Choose option you want to run in](https://firebasestorage.googleapis.com/v0/b/krossa-prod.appspot.com/o/tz0wG7ju6BbQynlNcYSD1ruwRh13%2Farticles%2FfXVVZdsJFZsLyGu39ZZk%2Fconfigs.png?alt=media&token=bcb32986-710b-462d-9cec-2a66bcf3a94e)

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`.
![config files](https://firebasestorage.googleapis.com/v0/b/krossa-prod.appspot.com/o/tz0wG7ju6BbQynlNcYSD1ruwRh13%2Farticles%2FfXVVZdsJFZsLyGu39ZZk%2Fas_config.png?alt=media&token=07b08ec0-6dc6-413a-bc0a-7e6100c5b283)

- 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 -

```xml
<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 🧑🏻‍💻.