Flutter Builds in the Cloud.

Intro

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:

Typical Project view.

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

Build Button

Immediately you can see this build in the progress:

Build in the progress.

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

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:

Hot Preview Build button

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

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:

Settings button.

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

Builder settings.

You can switch it to one of the Android targets:

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:

Build button.

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

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

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:

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

Software Engineer, CTO at FlutLab