Everything about Flutter Portable UI Framework

Unknowingly, we’ve interacted with Flutter portable UI framework. Whether you made payments with Google Pay, or used a digital coupon, or shopped on Alibaba, or even saw Google Ads, you’ve likely interacted with Flutter’s short history.

In May 2017, when it first launched to the public, Flutter gained incredible popularity. After the official stable version (released in Dec 2018), the popularity keeps increasing, generating an ever-rising interest in the product, as seen below.

Interest in frameworks over past 5 years, source: Google trends

The second version of Flutter was released in May 2021, offering a better experience. So, let’s look under the hood to discover Flutter’s new and improved features. But before that, for the unfamiliar, we will go over the basics of Flutter.

What is Flutter?

Flutter is Google’s open-source SDK for creating mobile, desktop, and web apps with a single codebase. An SDK (software development kit) is a collection of tools, including libraries, documentation, APIs, frameworks, and/or more, giving you all you need for software development. That is — Flutter already has everything you need to make cross-platform applications.

While other technologies such as React Native, Angular, Xamarin, or NativeScript are also used to develop apps that work across multiple platforms, Flutter has some advantages.

Flutter SDK

Since it’s an SDK, it includes widgets, testing APIs, rendering engine, etc. Let’s see what Flutter looks like in general.

Flutter Architecture, source: Flutter.dev

There are three main layers.

I. Embedder: It uses a platform-specific language to run the app on any OS.

II. Engine: A “compiler” written in C/C++ provides a low-level implementation of Flutter’s core APIs. 

III. Framework: It provides a rich set of libraries divided into layers based on the Dart programming language.

Let’s take a note here. Flutter’s foundation language is Dart. A client-optimized, object-oriented programming language developed by Google, capable of compiling into native code for mobile and desktop and JavaScript. And because of its direct compilation, Flutter doesn’t require any additional library to connect with the OS/Platform the app is running on. This improves the startup time and app performance. 

Another cool part of Flutter is the widgets. They serve as building blocks that can do almost all development parts. Flutter offers a wide range of widgets, but it also allows you to customize them or create your own.

Flutter also offers an automated testing toolset, specifically, for three types of tests: unit test, widget test, and integration test. Debugging in Flutter is conducted with the help of Flutter Dev Tools (previously called Dart Dev Tools). If you want to know more, read Flutter debug docs.

Now that we have seen the basics let’s see its use as a portable UI framework.

Flutter for Web

Even though this technology is under development, a preview was released earlier this year for the developer’s community. Also, Google has opened gates for early adopters to try this and give genuine feedback to make relevant changes.

“Our purpose of introducing Flutter for [the] web is not restricted to replacement of documents, but [we] intend to build extremely interactive, graphically affluent content, where one can feel the benefits of sophisticated UI.”

Google worked with the New York Times to test Flutter for Web in the form of a puzzle game section. As people can choose to play the games on whichever device they use, New York Times found Flutter useful and agrees it has excellent potential. It enabled them to publish the game using the same code across mobile and web platforms.

Flutter Gallery, source: Flutter

Since then, Google has also implemented Flutter for Web in Flutter Gallery to show samples of widgets ready-made and available with Flutter. 

Flutter for Mobile

Flutter also upgraded its mobile development this year. This includes SDK requirements, updates for new App store iOS and material widgets, engine support for a new device, and Dart 2.3 featuring new UI-as-code language features.

Google is now building a support ecosystem for Flutter. The architecture of Flutter has always been considered as a small core framework, complemented by a prosperous package community.

Here is something cool. Previously, we read that Flutter has widgets or say that Flutter is widgets. One of the fantastic things about Flutter is its ability to let a user create an interface utilizing these widgets. Flutter has a more consistent and unified object model, unlike other technologies that use different objects (layouts, views, controllers). 

Getting started in Flutter — Part 2: Widgets, Properties, and States, source: Medium

Any object in Flutter is a widget, from a small button to padding in a container or even the font. You can combine them to create layouts and/or choose to use them on any level of customization, that is, from existing building blocks to the lowest level, where you can create your widgets.

Flutter for Embedded Devices

Flutter portable UI framework is truly masterful when you see it run on embedded devices. These include small devices such as Raspberry Pi to intelligent home operating systems such as Google Home Hub.

Flutter in Raspberry Pi, source: Electronics Weekly 

The Flutter team is working hard to add more features to the community of Google devices. In addition, Google has added an embedded API for Flutter that enables it to be used in the home, automotive, and beyond scenarios.

Flutter for Desktops

While Flutter’s development team was working on desktop applications as an experimental project, Google has made it a part of the Flutter engine by integrating this work into the repository. Google’s desktop platform Chrome OS and the line of laptops, namely Chromebooks, are now part of this development. As an in-house platform, it will benefit both users and developers as it supports the execution of both Linux and Android apps. In Chrome OS, you can either use Visual studio code or Android Studio to develop a flutter app that you can test and run on the same device without an emulator.

Flock Desktop App, source: Medium 

Also, you may find the following links useful to know more about the Flutter portable UI framework:

Flutter by Google

Learn Flutter

Explore Flutter apps in a showcase

Check out the curated list of resources