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:
To see how this code behaves, you can click at the “Build project” button:
Immediately you can see this build in the progress:
Which will lead to success or failure. And the first (success) option looks like this:
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 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.
To run your hot preview build, click this button:
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.
This kind of FlutLab build is average in the speed but works for any Flutter Project.
Web type of build is the default one. You can see it in the settings by clicking at:
You will see that Web platform is the default target for builds:
You can switch it to one of the Android targets:
Which smoothly lead us to the last type (as this writing) of FlutLab 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:
After build finished, you can see its results in the bottom frame:
Now you can pick the way of delivery of the app to your device. For example, you can click at “Generate QR Code & download”:
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:
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”.