Flutter hot-reload in Gitpod

Challenge accepted ;)

JacksonZ
JacksonZ
Oct 16 · 4 min read

In short, Gitpod is a workspace in a container serving its UI to a browser. For more details, see Sven Efftinge’s post on how Gitpod works.

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):

hmmm… chrome shows up, but it’s… headless

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.

, 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:

Hmmm… seems like it’s compiling, let’s wait and see.

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.

ok, now we are so close to having it working

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”.

OMG, I am nervous…

Magic

Oh my, it works! Even with hot-reload perfectly working ;)

LGTM

For more information on how to develop Flutter apps on Gitpod, see the cheat sheet:

As always, happy hacking!

Meme of the day

FAQ

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

Please don’t visually test your services, use unit tests with Mockito instead. Your future self will appreciate it.

Opinions are my own and not the views of my employer.

The Startup

Medium's largest active publication, followed by +528K people. Follow to join our community.

JacksonZ

Written by

JacksonZ

Hold my boba, cuz I need to write code. Note: I write about new things I learn which can be machine learning, web/mobile development or other magic.

The Startup

Medium's largest active publication, followed by +528K people. Follow to join our community.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade