DEV Community

loading...

Build Cross Platform Applications without having a high-spec Laptop/Computer using Flutter & Flutlab

Chinmay Agrawal
Student || Programming Enthusiast || Like to Contribute to Community || DSA || Flutter
・6 min read

For Whom this blog is for?

If you want to build cross-platform applications using Flutter, but you don't have a good laptop/computer which can run the heavy softwares like Android Studio & can't handle the dependencies like flutter SDK, dart SDK, emulator etc.(which also requires the huge amount of disk space and up-to-date OS) OR your machine is running out of space, OR you just want to try the flutter, then this blog is for you.

What do you need ?

All you need is just:-

  • Laptop in working condition(No system requirements, any laptop will work fine).
  • A browser like Chrome, Firefox, Safari or whichever you like.
  • Internet Connection.

Yes,that's it. You really do not need anything apart from that.

Okay, So now enough of talking, Now Let's start ..!!

Introducing Flutlab

Let me introduce you with the website by which you can do your complete application development without installing a single software on your machine.

And the name of website is flutlab.io

Flutlab is an online IDE designed to build cross-platform applications using flutter. Complete process from writing the code to running it in the emulator is going to be done in the cloud, and you will get the experience like you are developing an application in your local machine. And bonus is that it is free, you can go for paid plans if you need.

Let's Get Started...

Now we are going to cover this section in 4 sub sections:-

Step 1: Setting up Environment

  • First go to flutlab.io
  • At first our homepage will look like this.
  • If you want to just try it out you can simply just click on the get started button, but it will not save your work for future use.
  • If you want to save your work for future use and want to build real world applications then you have to create a free account by clicking on the sign in button.
    Homepage

  • As of now you don’t have an account so let's create one by clicking the sign up button.
    login

  • Now fill up the form fields and complete your account verification process.
    signup

  • Now after verification you have to login to your account again and after successful login you will see this kind of page.
    profile console

Note - As you can see you can make upto 2 projects and you are provided with 250mb. It is more than enough for learning purpose and make basic applications.

Step 2: Building our First Project

  • Now let's create our first application by clicking the new
    project button.
    profile console Project Highlight

  • Now first you have to select the default codebase from the dropdown menu for your project. For now, to keep this simple, we are going to select the StateLess Hello World.
    select codebase

  • Now you have to give a name to your project. And Click Create button.
    Note- For now you can leave the package field blank.
    project name

  • Now after successful creation of a project you have to open it by clicking on it.
    profile console with project

Step 3: Modify Our Project

  • Now when you open the project for the first time, you will see the screen like this. Now you will notice that, interface is pretty much familiar with the VScode.
    project window

  • Now just remove all the code which is written in the main.dart file and type the code which is given below.

import 'package:flutter/material.dart';

void main() {
  runApp(
    Text(
      "Hello Flutter",
      textDirection: TextDirection.ltr,
    ),
  );
}
Enter fullscreen mode Exit fullscreen mode

Note- We can also move further with the default code, but i want to show you something important, that's why I also highly recommend you to type the code which is given above(yes not even copy/paste, you should type it).

  • Now while typing the code you may notice that there are no or very less typing suggestions, also there is no bug highlight and context action, which is useful for every developer's productivity and to write code more smoothly.(This is the thing which i want't to show you, so now let's fix it).
  • So to fix it you first have to click on the setting icon on the left most side of the screen.
    setting icon

  • Now go to the analyzer section and toggle the analyzer 2.0 button to turn it on. After that close the settings dialog box.
    analyzer

  • You will notice that as soon as you turn on the analyzer, it will start analyzing the code and within 5 minutes it will start giving more helpful code suggestions, immediate code highlighting, etc. as soon you start typing. You will feel like you are doing coding in Android Studio or VScode.
    analyzing

Step 4: Running our Application

  • We are almost done, now only building and running our project is left.
  • For that first you have to hover on the play icon.
  • As soon as you hover on this, it will expand and show you the
    different options for building projects. Each has their own purpose, but for now leave it as it is and click on that icon.
    build hover

  • Now after clicking you will have a prompt like this. At this point you have to sit back and keep calm and would have to wait
    build

  • Now after a successful build you will be able to see the emulator like this.
    emulator

Hurray..!! You have built your first application.
Congratulations!!

  • Now the last but important step.
  • As you notice for the first time when you run an application, you have to run the build. But after that you don't need to re-build the application again & again. You can just hot reload it.
    Let's change the text of the Text() Widget. And hot reload it by clicking the hot reload button.
    hot reload

  • It will display the changes accordingly, And you will experience the hotness of Flutter.
    after hot reload

Other Special Features of Flutlab

Flutlab is not only limited to just writing code and running on emulators, it is more than that. Some of its special features are listed below:-

  • VCS integration: Yes, you can also integrate the github/bitbucket/gitlab account to Flutlab IDE, and can perform various operations like creating a repository, commit, checkout, etc. You can even clone a repository from VCS directly into your flutlab account.

  • Figma to Flutter: If you are a UI designer then I am sure you heard about figma. You can convert your figma designs to Flutter using flutlab.

  • Firebase: If your app needs to store some data of your users, then you can integrate your app with the Firebase.

  • Emulators: You can test your app on various sizes of screens right from the FLutlab emulator only, you don't need to go anywhere.

  • App on mobile: You can also generate apk of your app to test on real devices. FLutlab also has an app by which you can directly test your apps on your device.

There are many other Features of FLutlab, but I can't explain each of them in this article. If you want to know more about features and want me to write articles, then you can ask for them in the comments section.

Discussion (0)