Flutter hot-reload in Gitpod
Challenge accepted ;)
Using containers is a clean solution most of the time, but in terms of native app development, not so much, because the container isolation makes it hard for emulators to use accelerators.
Set up a “half device” for testing
If connecting a device to Gitpod is not possible (correct me if some ADB magicians find a way), and running an iOS or Android emulator in a container is not possible, then what device can we possibly use?
A SWAG: since Flutter is a cross-platform framework, maybe we can target the web (Chrome).
Let’s give it a try. First, we will need to switch our Flutter to master channel and enable the web in the configuration:
As we can see in the output (under “Chrome” section and “Connected device section”), Chrome exists, not the full version, but a headless server (meaning no UI and a lot of utilities, but the core engine is there):
Targeting a headless Chrome server, from Flutter’s documentation, is not supported. However, think about it, if it cannot target a headless Chrome, how would Flutter write unit test internally? With a little bit searching in the Flutter repository, I found this unit test:
If we follow this code deeper, we will find that the webserver device is standalone and has a headless server constructor.
LGTM, let’s give it a try!
Try compiling for the “device”
With some digging into the code, I found that the headless Chrome is an undocumented but legal target device like the normal chrome. All we need to do is compiling the code for headless Chrome with the following commands:
Have it up and running
Now it seems that it is up and running which is a good sign. The next step is to visualize the served content. From its output, we know that it is serving to localhost, port 35133. We will need to expose this port.
Try exposing the port
We can head over to the “Open Port”. From here we can see that something is served through port 35133 and it can be exposed. With a lot of expectations, I clicked on “Expose Port” and “Open Preview”.
Oh my, it works! Even with hot-reload perfectly working ;)
For more information on how to develop Flutter apps on Gitpod, see the cheat sheet:
As always, happy hacking!
Meme of the day
My app is not web-compatible
In the year 2019, probably consider adding web support?
Port displayed as not exposable in Gitpod
Yes, that occasionally happens to me as well. The solution is to re-run it. I haven’t got time to locate where the issue is, but my SWAG is that docker doesn’t like exposing a port on the fly. Open an issue in the Gitpod repository maybe? (I’m lazy) Or even better, fix it lol ;)
My non-UI services behave differently on different platforms
Opinions are my own and not the views of my employer.