Introducing Flutter

Flutter, a revolutionary open-source UI framework developed by Google, has taken the mobile app development landscape by storm. With Flutter, developers can create visually striking and high-performing applications for Android, iOS, web, and desktop using just one codebase.

This article provides a quick introduction to Flutter, highlighting its key features and advantages that have made it a game-changer in the realm of cross-platform development.

What is Flutter?

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
flutter.dev

In other words, it’s a comprehensive Software Development Kit (SDK*), complete with widgets and tools, which enables cross-platform app development.
*By SDK we mean all software development tools (documentation, libraries, tools, APIs, etc)

Why choose Flutter?

It’s free and open source
It gives developers an easy way to build and deploy visually attractive, natively-compiled applications for mobile (iOS & Android), web, and desktop – all using a single codebase
The architecture is based on the very popular reactive programming (it follows the same style as React)
It provides its own widgets, drawn from its own high-performance rendering engine – these are fast, attractive and customizable

Cross-platform mobile app development

Cross-platform mobile app development refers to the development of apps that can be used on multiple mobile platforms like Android & iOS.

Flutter offers:

Reusable Code
Cost-effective
UI/UX Consistency
Faster App Development
Easy Update Implementation
Ideal For Prototyping

The cross-platform app market reached $7.5 billion in 2018 and surpassed the figure of $7.9 in 2019

Flutter History

The first version of Flutter was unveiled at the 2015 Dart developer summit. It was known as codename “Sky” and ran on the Android operating system.
On December 4th, 2018, Flutter 1.0 was released at the Flutter Live event, denoting the first “stable” version of the Framework.
On May 7th 2019, during the Google IO 2019, Google finally announced the availability of the Flutter for the Web, preview version.
As of September 10, 2019, Flutter for web development has fully moved to Standard Flutter SDK.

Showcases

Xianyu app by Alibaba
Hamilton Musical – official app for the Broadway Musical
Google Ads app
Reflectly – health & fitness app
App for JD Finance – a leading digital technology company
Topline app – Abbey Road Studios
Birch Finance – credit card rewards app that help its users to manage and optimize existing cards

Community

Framework Architecture

Dart platform

Flutter apps are written in the Dart language and make use of many of the language’s more advanced features.

While writing and debugging an app, Flutter uses Just In Time compilation, allowing for “hot reload“, with which modifications to source files can be injected into a running application. Release versions of Flutter apps are compiled with ahead-of-time (AOT) compilation on both Android and iOS, making Flutter’s high performance on mobile devices possible.

Flutter engine

The Flutter Engine is a portable runtime for hosting Flutter applications. It is written primarily in C++, provides low-level rendering support using Google’s Skia graphics library. Additionally, it interfaces with platform-specific SDKs such as those provided by Android and iOS.

Foundation library

The Foundation library, written in Dart, provides basic classes and functions which are used to construct applications using Flutter, such as APIs to communicate with the engine. UI design in Flutter involves using composition to assemble / create “Widgets” from other Widgets.

The trick to understanding this is to realize that any tree of components (Widgets) that is assembled under a single build() method is also referred to as a single Widget. This is because those smaller Widgets are also made up of even smaller Widgets, and each has a build() method of its own.

Design-specific widgets

The Flutter framework contains two sets of widgets which conform to specific design languages. Material Design widgets implement Google’s design language of the same name, and Cupertino widgets implement Apple’s Human Interface Guidelines iOS design.

Technical Overview

Dart is an open-source, client-optimized programming language for apps on multiple platforms.
It is developed by Google and is used to build mobile, desktop, backend and web applications.
Dart is an object-oriented, class defined, garbage-collected language using a C-style syntax that transcompiles optionally into JavaScript.
It supports interfaces, mixins, abstract classes, reified generics, static typing, and a sound type system.

Hummingbird

Hummingbird is a web-based implementation of the Flutter runtime that takes advantage of the capability of the Dart platform to compile not just to native ARM code but also to JavaScript. This enables Flutter code to run on the standards-based web without change.

Insights

Over 50k GitHub projects written in Flutter
Flutter is now one of the top 10 active software repositories on GitHub
16k commits on main repo
About 100 commits per day
480+ contributors

References & Useful Links

Flutter.dev

https://flutter.dev/

What is Reactive Programming?

Insights

https://medium.com/flutter/insights-from-flutters-first-user-survey-of-2019-3659b02303a5

Widgets

https://play.google.com/store/apps/details?id=io.flutter.demo.gallery

Flutter vs React Native