Flutter hot reload with an embedded device

Jun 1, 2023

Pieter Scholtz

Recently I have come to realize that I have become dependent on hot reload. When it is not available, there are withdrawal symptoms. I get grumpy when I do ctrl-s , and nothing happens ...

It's like when someone asks you, if you want coffee, and then serves you a cup of Ricoffy (Ricoré or whatever it is called in your part of the world)... the first sip is pure disappointment.

Admittedly, hot reload is simply sizzling. If you don't know about it, you can read more here.

Is hot reload possible with embedded devices ?

The answer is ... drum roll ... yes, and it is very easy to setup.

Hot reload is made possible by the Flutter CLI , which is what your IDE is making use of behind the scenes when you press the hot reload button. In order to get hot reload working with an embedded device we have to make use of the "custom-devices" feature provided by the CLI.

All we have to do is explain to the CLI how to find, install, run & uninstall a flutter application on our embedded device.

How to set up an embedded device with the flutter CLI

This is the official documentation found on the Flutter development wiki here.

There is also our video tutorial.

After you have used the CLI to generate a config.json file you can edit it if you need to.

Here is an example :

{
  "$schema": "file:///home/pieter/development/flutter/packages/flutter_tools/static/custom-devices.schema.json",
  "custom-devices": [
    {
      "id": "ti",
      "label": "TI AM6254",
      "sdkNameAndVersion": "TI AM6254",
      "platform": null,
      "enabled": true,
      "ping": [
        "ping",
        "-c",
        "1",
        "-w",
        "1",
        "192.168.151.124"
      ],
      "pingSuccessRegex": null,
      "postBuild": [
        "ssh",
        "root@192.168.151.124",
        "mkdir -p /tmp/${appName}/data/flutter_assets"
      ],
      "install": [
        "scp",
        "-r",
        "-o",
        "BatchMode=yes",
        "${localPath}",
        "root@192.168.151.124:/tmp/${appName}/data"
      ],
      "uninstall": [
        "ssh",
        "-o",
        "BatchMode=yes",
        "root@192.168.151.124",
        "rm -rf \"/tmp/${appName}/data/flutter_assets/*\""
      ],
      "runDebug": [
        "ssh",
        "-o",
        "BatchMode=yes",
        "root@192.168.151.124",
        "flutter-pi /tmp/${appName}"
      ],
      "forwardPort": [
        "ssh",
        "-o",
        "BatchMode=yes",
        "-o",
        "ExitOnForwardFailure=yes",
        "-L",
        "127.0.0.1:${hostPort}:127.0.0.1:${devicePort}",
        "root@192.168.151.124",
        "echo 'Port forwarding success'; read"
      ],
      "forwardPortSuccessRegex": "Port forwarding success",
      "screenshot": null
    },
    {
      "id": "pi",
      "label": "rpi",
      "sdkNameAndVersion": "rpi3",
      "platform": null,
      "enabled": true,
      "ping": [
        "ping",
        "-c",
        "1",
        "-w",
        "1",
        "192.168.1.123"
      ],
      "pingSuccessRegex": null,
      "postBuild": null,
      "install": [
        "scp",
        "-r",
        "-o",
        "BatchMode=yes",
        "${localPath}",
        "pi@192.168.1.123:/tmp/${appName}"
      ],
      "uninstall": [
        "ssh",
        "-o",
        "BatchMode=yes",
        "pi@192.168.1.123",
        "rm -rf \"/tmp/${appName}\""
      ],
      "runDebug": [
        "ssh",
        "-o",
        "BatchMode=yes",
        "pi@192.168.1.123",
        "/tmp/app"
      ],
      "forwardPort": [
        "ssh",
        "-o",
        "BatchMode=yes",
        "-o",
        "ExitOnForwardFailure=yes",
        "-L",
        "127.0.0.1:${hostPort}:127.0.0.1:${devicePort}",
        "pi@192.168.1.123",
        "echo 'Port forwarding success'; read"
      ],
      "forwardPortSuccessRegex": "Port forwarding success",
      "screenshot": null
    }
  ]
}

You will notice that I have two different custom devices setup: a Raspberry Pi and a Texas Instruments development board.

These two devices have some properties defined, If you are curious about what they do exactly, please do check out the schema file mentioned at the top of the file.

You also don't have to use the CLI to add devices, you can just edit the config file.

If you have any questions, don't hesitate to leave them in the comments!