Gitpod + Flutter = productivity on the go for mobile app developers

No, you don’t need to carry a 5 kg laptop with a 2 kg charging brick.

Flutter: a robust cross-platform framework.

In short, Flutter is a cross-platform framework that lets developers write apps in Dart that compiles to Android, iOS, Web, and Desktop. It is similar to React Native, but more Cpp-ish. The discussion around Flutter vs. React Native can go either way, but personally I prefer Flutter as it’s by default robust and consistent across platforms.

The development environment for Flutter is not portable

Running Flutter together with either Android Studio or XCode takes a lot of resources. Many lightweight laptops cannot run it. For some that can, it will drain your battery fairly quickly. For quite some time, I was stuck with either waste my commute time or carry a giant brick, until recently I found Gitpod + Flutter solution (beta and hacky, but works for now).

Gitpod: IDE for the Chromebook era.

Gitpod is a cloud/browser-based IDE. It runs the workspace in a container and serves the UI to a browser. It’s perfect for someone who always works on the go with a Chromebook(or Ultrabook, maybe?).

To work with Flutter, we need to install Flutter and a Flutter plugin. Gitpod is a Visual Studio Code like IDE (theia) running in a browser connected with a backend workspace running in a container. It looks like we can install Flutter in the container and provide the Visual Studio Code extension to the frontend UI.

LGTM, let’s give it a try.

Getting Started on Gitpod + Flutter

Install Flutter in a Dockerfile

Gitpod to the core is a remote IDE running in a container. To expand its capability, it allows you to customize your own container with a Dockerfile (or a Docker image hosted on DockerHub, but this approach hasn’t treated me well).

Here is an example Dockerfile (feel free to add your magical sauce):

Note: it is not possible to develop iOS in a container, so I didn’t bother getting any iOS related resources. At the time this post is written, running Android emulator in Gitpod container is not possible either, but I am adding the dependencies, first, to be future proof, and, second, to compile Android apk.

Update Flutter dependencies in a Gitpod config file

Gitpod lets you define a set of commands to initialize the workspace (details are in their documentation). I put the Android API downloading here because it is not time-consuming (less than 30 seconds), and it may change frequently for testing purposes (not worth it to build into the image).

Here is an example Gitpod config file (feel free to add your magical sauce):

“Open in Gitpod” badge is a good-to-have

Open a repository in Gitpod is simple as prefixing the Git URL with “gitpod.io/#”, so to avoid repetitive work, you might want to either use a Gitpod chrome extension or an “Open in Gitpod” badge.

Here is how you would add the badge in a Readme file:

For more information on this topic, see the Flutter + Gitpod cheat sheet:

Now you are all set. Happy coding!

In reposting, won’t forget the meme of the day again

You with gitpod at hand