DEV Community

loading...
Cover image for Run Flutter apps in multiple platforms parallelly.

Run Flutter apps in multiple platforms parallelly.

minnu
404 Bio Not Found...
・2 min read

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
Enter fullscreen mode Exit fullscreen mode

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"
      ]
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

On this configuration you will be able to see option in bottom status bar Status bar after adding configurations
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

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

  • 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>
Enter fullscreen mode Exit fullscreen mode

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 πŸ§‘πŸ»β€πŸ’».

Discussion (1)

Collapse
pablonax profile image
Pablo Discobar

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

Forem Open with the Forem app