Debug & hot reload Flutter on multiple devices

Debug & hot reload Flutter on multiple devices

When developing/changing UI or even implementing features in Flutter for multiple devices, it is inefficient to only reflect changes on one device. However, running flutter on multiple devices is not built into the default configuration. In this article, I will provide an example and how to set up this configuration in VScode.

Add new configuation in VScode

  1. In debug tab, select Run and Debug dropdown > Select Add Configuration

  2. This will create launch.json file under .vscode folder.

Default configuration file

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "coolors_inspired_flutter",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "coolors_inspired_flutter (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        },
        {
            "name": "coolors_inspired_flutter (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release"
        },
    ]
}

Check connected devices for device id

run flutter devices we need devices id for configuration.

Add devices to the configuration file

We can put any name to a device but, the device id must match the value of the connected devices. If you push this file to the remote repository and other developers pull it, they won't be able to run as the device id is unique to each emulator and device. So better keep this configuration in the local repository.

To run multiple devices we put the device name in the array. The name put in this array must match the device name we put manually.

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "coolors_inspired_flutter",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "coolors_inspired_flutter (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        },
        {
            "name": "coolors_inspired_flutter (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release"
        },
        {
            "name": "iPhone 14 Pro Max Emulator",
            "request": "launch",
            "type": "dart",
            "deviceId": "219457B3-D3F1-4285-8AC6-61E64DAAF132"
        },
        {
            "name": "Pixel 6A Emulator",
            "request": "launch",
            "type": "dart",
            "deviceId": "emulator-5554"
        }
    ],
    "compounds": [
        {
          "name": "All Mobile",
          "configurations": ["Pixel 6A Emulator", "iPhone 14 Pro Max Emulator"]
        }
     ]
}

Select debug target

Managing multiple debug sessions

We can select debug session from both the Run and Debug tab or select from the dropdown in the Flutter helper toolbar.

Run and Debug session.

Flutter helper toolbar.

Conclusion

I have provided an example of the configuration file and how to get the device id to the configuration, I struggled to identify the device id to put it in the configuration and hope this helps other developer save some time. With this configuration, we can debug multiple devices at the same time and hot reload on all devices when changes are made. Tbh, this is satisfying and helps fix bugs and UI on each platform much faster.