Flutter Builds in the Cloud.


FlutLab.io is an online IDE for Flutter. And probably this is the fastest way to play with your first Flutter projects. FlutLab main idea is to provide an alternative to local installations of Android/IOS/Flutter SDK’s as well as Code Editors. In the tool-chain of FlutLab.io, developers can host their projects, collaborate, and do various builds. FlutLab builds are in the focus of this article.

How it looks like

The first thing you want to do with some fantastic examples of Flutter code is to build and run it.

Let’s visit https://flutlab.io and register a free account. You should see some opened project like this:

Image for post
Typical Project view.

To see how this code behaves, you can click at the “Build project” button:

Image for post
Build Button

Immediately you can see this build in the progress:

Image for post
Build in the progress.

Which will lead to success or failure. And the first (success) option looks like this:

Image for post
Successful Build.

How it works

Under the hood, FlutLab is a pool of virtual machines which can do flutter builds of 3 different types:

  • Hot preview;
  • Web build;
  • Android build.

Hot preview

Hot preview is the quickest type of FlutLab builds. It takes a couple of seconds and shows the live application in a popup window.

Why is it so quick? Because of:

  • Avoiding slow file/network operations when sending code for the build;
  • Simplified and boosted build processing.

During such a build, all the flutter source code is being sent as a single HTTP request to some kind of “Flutter reactor” — which synchronously converts all this code into a JavaScript single-page app and sends it back to the Hot Preview popup window for rendering.

To run your hot preview build, click this button:

Image for post
Hot Preview Build button

If the build was successful, we’ll see the web app running in a JavaScript popup window:

Image for post
Hot Preview popup window.

Hot preview build looks pretty “hot”. But also it has some limitations. In the time of this writing, it works the best for single-module projects without a big number of external libraries. Accordingly, FlutLab marks Hot Preview as an “Experimental feature”.

Where to use hot preview? In all simple or educational projects.

Web Build.

This kind of FlutLab build is average in the speed but works for any Flutter Project.

It corresponds to Flutter build targets “Chrome” and “Web Server”. What it actually does is converts Flutter code to the Single-Page JavaScript page. If the build was successful, the resulting JavaScript app will be temporarily hosted at the FlutLab server-side and available through a popup window. You saw exactly such kind of build in the section “How it looks like”.

Web type of build is the default one. You can see it in the settings by clicking at:

Image for post
Settings button.

You will see that Web platform is the default target for builds:

Image for post
Builder settings.

You can switch it to one of the Android targets:

Image for post
Android targets for the build.

Which smoothly lead us to the last type (as this writing) of FlutLab build.

Android build.

Android builds are the slowest ones. They took approximately 1.5 X more time then Web builds.

But they are really shining as the last instance of check of Flutter app on the real device.

To do a simple demonstration, pick android-arm64 platform in the settings and click at usual:

Image for post
Build button.

After build finished, you can see its results in the bottom frame:

Image for post
Android build.

Now you can pick the way of delivery of the app to your device. For example, you can click at “Generate QR Code & download”:

Image for post
QR code for uploading to Android device.

You know how to deal with it, right? Just scan the QR code with some Code Scanner app on your Android phone, after this you will be redirected to this page on your mobile browser:

Image for post
Web page for downloading APK.

Just click “download” and then approve file downloading and app installation.

So, when to use Android builds? When you want to test your app on the real device.

Worth to mention, that you can use FlutLab in a mobile browser with preserving of all features of the desktop version. And if you are running FlutLab on the Android phone or tablet, it will automatically switch default build to Android. Because you are already inside Android! And when build finished, you can install your app immediately by click at “Get my apk”.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store