Japang LY
Japang LY

Reputation: 887

Flutter Hot Reload to multiple devices

Is it possible to connect multiple devices with hot reload? Specifically, both Android and iOS emulators at the same time.

Upvotes: 69

Views: 33138

Answers (9)

Kalpesh Khandla
Kalpesh Khandla

Reputation: 736

Run command in terminal:

flutter run -d all 

or create a script (e.g. runall.sh in root):

#!/usr/bin/env bash
flutter run -d all

and go to "Run" -> "Edit Configurations". Press "+" in upper left corner -> select "Bash". Then set:

Name: runall Script: [path to runall.sh script] Interpreter Path: /bin/bash Select "runall" instead of "main.dart" beside run icon. Performing run (also through shortcut) will now run app on all devices.

Drawback: You'll have to enter "r" followed by Enter in run terminal for hot reload. Icon and shortcut does not work. Hot reload is performed on all devices though.

Just a workaround for now. I'm pretty sure the flutter plugin will cover this soon.

Upvotes: 0

MHMD
MHMD

Reputation: 554

On Android Studio, you can use these shortcuts:

Action Windows / Linux macOS
Flutter Hot Reload Ctrl + \ Cmd + \
Flutter Hot Restart Ctrl + Shift + \ Cmd + Shift + \
Flutter Hot Reload (All Devices) Ctrl + Alt + \ Cmd + Option + \
Flutter Hot Restart (All Devices) Ctrl + Alt + Shift + \ Cmd + Option + Shift + \

You can also edit these by doing the following:

  1. Open Keymap Settings:
  • Windows / Linux: Go to: Settings > Keymap.
  • macOS: Go to: Android Studio > Preferences > Keymap.
  1. Search for "Hot Reload" or "Hot Restart".

  2. Right-click on the action and edit it as you want.

  • make sure the shortcut doesn't conflict with another one.

Upvotes: 0

Chaibedraa Ibrahim
Chaibedraa Ibrahim

Reputation: 81

Step 1: Launch 2 devices (2 emulators || 2 physical || 1 physical & 1 emulator)
Step 2: Launch 2 terminals
Step 3: On the first terminal run the command "flutter run -d "
Step 4: On the second terminal run the command "flutter run -d "

On both terminals, you'll get both devices running, press 'c' to clear the screen, press 'r' to hot reload, and press 'R' to hot restart.

Upvotes: 0

kksal55
kksal55

Reputation: 598

To debug multiple devices concurrently you should set up a launch config for each device that has the deviceId field set (this is the same ID you'd pass to flutter run -d xxx). Open the launch config by clicking Debug -> Open Configurations. Add a compound config at the bottom that will launch both (or more) configurations at the same time:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Current Device",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "Android",
            "request": "launch",
            "type": "dart",
            "deviceId": "android"
        },
        {
            "name": "iPhone",
            "request": "launch",
            "type": "dart",
            "deviceId": "iphone"
        },
    ],
    "compounds": [
        {
            "name": "All Devices",
            "configurations": ["Android", "iPhone"],
        }
    ]
}

Once saved, the compound configuration will show up in the drop-down at the top of the Debug side bar.

Source

Upvotes: 7

Andrey Rankov
Andrey Rankov

Reputation: 2090

This works for me in Android Studio:

  1. Start both emulators / connect devices

  2. Run your code with flutter run -d all

  3. Press r to hot reload

Upvotes: 110

Matthew Rideout
Matthew Rideout

Reputation: 8518

Android Studio Flutter: Hot Reload Multiple Devices

If you are running android to build your Flutter apps, and have launched multiple devices or emulators to preview your Flutter app (and have corresponding "run" tabs down below in the IDE), you may find that saving your project only hot-reloads one of the instances.

Hot Reload Multiple Devices Keyboard Shortcuts: Look at the Run menu to find the keyboard shortcuts for hot reloading multiple devices at once.

These are the default shortcuts on MacOS for hot reloading and hot restarting multiple devices. Notice the (All Devices) variants.

enter image description here

Upvotes: 5

Darshan Kassen
Darshan Kassen

Reputation: 715

If you're using VS Code as your Flutter IDE, this is how you can use the VSC launch configuration and tasks to run concurrently from a single launch and have hot reload enabled for all devices.

If you have an issue with executing flutter run -d all this is an alternative solution will which let you specify the devices that should run. Ensure that the devices you specify are available when running flutter devices.

Your current launch.json file may look something like this:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter",
            "type": "dart",
            "request": "launch",
            "flutterMode": "debug"        
        }
    ]
}

Setup

You will need to update this launch.json file and create tasks.json in the same .vscode folder that is in your application's root directory.

Application folder file structure once the VSC config files are created

Paste only the below code into launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Flutter-All",
            "preLaunchTask": "Flutter-Launch-All",
            "type": "dart",
        },
        {
            "name": "Flutter-iOS",
            "preLaunchTask": "Flutter-Launch-iOS",
            "type": "dart",
        },
        {
            "name": "Flutter-Android",
            "preLaunchTask": "Flutter-Launch-Android",
            "type": "dart",
        },
        {
            "name": "Flutter-Web",
            "preLaunchTask": "Flutter-Launch-Web",
            "type": "dart",
        }
    ],
}

Paste only the below code into tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Flutter-Launch-All",
      "dependsOn": [
        "Flutter-Launch-iOS",
        "Flutter-Launch-Android",
        "Flutter-Launch-Web"
      ]
    },
    {
      "label": "Flutter-Launch-iOS",
      "type": "shell",
      "command": "flutter run -d 'iPhone 11' "
    },
    {
      "label": "Flutter-Launch-Android",
      "type": "shell",
      "command": "flutter run -d 'AOSP on IA Emulator' "
    },
    {
      "label": "Flutter-Launch-Web",
      "type": "shell",
      "command": "flutter run -d 'Chrome' "
    }
  ]
}

Replace the device names accordingly ('iPhone 11', 'AOSP on IA Emulator', 'Chrome').

Firing up all devices

Press the F5 key.

And you're done.

If the F5 shortcut to Start Debugging does not work for you, navigate to Debug & Run on the side panel and select the Flutter-All Configuration you've just created and then Run.

Debug & Run Menu > Configuration Selection

You will then see the terminal window appear and will able to switch between the individual hot-reload sessions running (as Tasks in their own shell).

Individual Terminal Sessions with each Flutter Device running concurrently

Some Background

We use 'Compound Tasks' by way of the dependsOn option on a Task and not 'Compounds' which are for Configurations.

As it is not possible to launch Configurations concurrently, only sequentially, we use Tasks which can run concurrently.

Hence, the "Flutter-All" Configuration executes the Tasks of the iOS, Android and Web Configurations.

If using Compounds, a Configuration will need to complete before the next runs which is not what we want. With Tasks we can choose to execute them sequentially however by default they will execute concurrently when using the dependsOn option.

//Do not use this in your launch.json file unless you want to debug one platform at a time.

"compounds": [
    {
        "name": "Flutter-All",
        "configurations": ["Flutter-iOS", "Flutter-Android", "Flutter-Web"]
    }
]

Upvotes: 26

humazed
humazed

Reputation: 76912

In Android studio, if you are running more than one device there is an option Flutter hot reload (All Devices) under run menu

enter image description here

Upvotes: 21

Jefferson
Jefferson

Reputation: 151

It doesn't work if you try to load it straight on Visual Code, but with few steps, you can code using VS Code or any other IDE and hot reload your code apart of the IDE

  1. Load iOS emulator in a terminal

    open -a Simulator

  2. Load Android emulator open ADV in Android Studio and run the wished emulator

  3. Open a terminal to manage Android's hot reload within app's folder run

    flutter run -d [ios-device-id]

  4. Open another terminal to manage iOS's hot reload within app's folder, run

    flutter run -d [android-device-id]

In both terminals you gonna see:

🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".

So, at this point just update your code, save and press "r" in each terminal, it's not simultaneously but it's good enough to keep both simulators opened and the same time and see the result

Upvotes: 12

Related Questions