Before start with Flutter — Flutter Programming — Part 1

6 min readApr 25, 2022

Hello guys. Finally I’ve finished the series Dart Basic Programming that provide you enough knowledge when we start programming with Flutter. So if you haven’t read my previous series , please take your time to look through it. If you’re have knowledge about Dart language, can skip this series and FlutterWithMe!.

This is the advertise that Flutter introduce in their home page. Remember that Flutter isn’t programming language (I see lots of guys mistake that Flutter is programming language haha). And these are three point that Flutter very proud of it.

Flutter is an open source framework by Google for building beautiful, natively compiled, multi-platform applications from a single codebase.

Fast: Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device.
Productive: Build and iterate quickly with Hot Reload. Update code and see changes almost instantly, without losing state.
Flexible: Control every pixel to create customized, adaptive designs that look and feel great on any screen.

Beside with that, Flutter is aim for:

Multi-platform: Deploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices.
Developer experience: Take control of your codebase with automated testing, developer tooling, and everything else you need to build production-quality apps.
Stable & Reliable: Flutter is supported and used by Google, trusted by well-known brands around the world, and maintained by a community of global developers.

I know that Google have their own Google Graveyard, but let’s hope that Flutter won’t going into this place haha. Now we’ll go back to history of Flutter a little bit.

The first version of Flutter was known as “Sky” and first described in 2015 at Dart developer summit but until 2017 Flutter released the alpha version 0.0.6.

After one year release first version, Flutter announced Flutter Release Preview 2 ( the last major release before Flutter 1.0 ) in September 2018, and only three months later, Flutter 1.0 was released at the Flutter Live event in 4th December 2018, denoted for the first stable version of the framework. And now, Flutter already have 139k stars on GitHub (Apr 2022) after 4 years released.

On March 3, 2021, Google release Flutter 2. This major update brought official support for web-based applications, early-access desktop application support for Windows, macOS, and Linux and improved Add-to-App APIs. This release also utilized Dart 2.0 that featured sound null-safety, which caused many breaking changes and issues with many external packages but luckily the Flutter team included instructions and tools to mitigate these issues.

Until now, the current stable channel of Flutter is 2.10.5 and the Dart version is 2.16.1.

I think that’s enough for history (sound boring). Now we’ll take a look at Flutter Architecture.

Embedder layer (lowest layer)

Is provided by a platform-specific embedder.
Coordinates with the underlying operating system to access services such as accessibility, rendering surfaces, and input.
The embedder is written in a platform-specific language, such as Java and C++ for Android, Objective-C/Objective-C++ for iOS and macOS, and C++ for Windows and Linux.
Flutter code can be embedded into an existing application as a module or as the complete application’s content using the embedder.

Engine layer

It’s the core of Flutter.
Mostly written in C++ and supports the primitives necessary to support all Flutter applications.
Takes care of the input, output, network requests, and handles the difficult translation of rendering whenever a frame needs to be painted.
Flutter uses Skia as its rendering engine and it is revealed to the Flutter framework through the dart : ui, which wraps the principal C++ code in Dart classes.

Framework layer (highest layer)

It’s where most developers can interact with Flutter.
Provides a modern, reactive framework written in the Dart language.
Includes a rich set of platform, layout, and foundational libraries, composed of a series of layers.

Dive deep into Framework layer

Material & Cupertino

The Flutter framework has two sets of widgets that conform to specific design languages. These are Material Design for Android application and Cupertino Style for IOS application. It’ll let you easier to customize behaviors for specific platform.

Widgets

First thing to remind here that Everything is a widget. But, What’s widget ?

It’s simply an instruction (or a blueprint) that you place within your code and they are the basic building blocks of a Flutter application’s UI.
It indicate how their present configuration and status should appear in their display.
When a widget’s state changes, it rebuilds its description, which the framework compares to the previous description to see what changes in the underlying render tree to transition from one state to the next.
A widget can be in the form of a button, an image, an icon, or a layout, and placing the widgets together creates a widget tree.
The widget tree is a never-ending chain of parent and child widgets that creates the visual layout on a screen.

Based on their features, widgets in Flutter can also be grouped into multiple categories, but widgets will be have more more than this one.

Rendering

It provides an abstraction for dealing with layout. You can build a tree of renderable objects with this layer.
Flutter’s rendering process is basically turning widgets into pixels. This is the job of Flutter’s multi rendering pipeline. It’ll handles the input, runs animations, builds the widget tree, lays out the render objects, paints the render objects, and compiles everything into a single image.
Whenever a part of the widget tree receives user input, animation, or any other changes, Flutter enters the build phase. In this phase, the framework reconstructs the widget tree by calling the necessary build methods.
The build() phase updates the element tree, which updates the render object tree. The render objects are responsible for layout and painting. During the layout phase, Flutter walks the tree of render objects passing down constraints.
Once the layout phase is complete, it enters the paint phase. This is where Flutter calls the paint method on all the render objects.

Foundation

Core Flutter framework primitives. These libraries are written in Dart language.
Have these building block services such as animation, painting, and gestures which offer commonly used abstractions over the underlying foundation.
This library are the lowest-level utility classes and functions used by all the other layers of the Flutter framework.

I think it’s too long to talk about overview before we start with Flutter. Hope i help you guys have some history knowledge and understand about Flutter architecture in this topic. Next story I’ll get into flutter installation guide. Thanks for your reading time!