Flutter - How does it work behind the scenes?

The term Flutter refers to two major things/concepts

1. Flutter SDK
2. Flutter Framework

1.Flutter SDK: is a collection of tools that allows you to build any kind of app for both Android & iOS platform in one codebase.

2.Flutter Framework: Basically it provides all the predefined widgets/widget library, utility functions & packages.

We know flutter uses Dart as a programming language. And apps build/developed by flutter can be run on Android & iOS. And so that, we need to compile dart code to native machine android/ios code.

And the compilation task is done by Flutter SDK.

While talking about compilation, there are two kinds of operation/compilation

• Static Compilation
• Dynamic Interpretation

Static Compilation: Statically compiled programs are all translated into machine code before execution. Ex: AOT(Ahead of Time) - C/C++.

Dynamic Interpretation: is executed by one-to-one translation. Ex: JIT(Just in Time) - Javascript/Python.

---

Now we know how dart code convert into machine code, and two kinds of compilation.

But how these two kinds of compilation are related to Flutter ?

To know that, we need to know couple of things. Flutter doesn't use any kind of web view or native controls of the operating system. Instead flutter uses it's own high performance rendering engine(Skia), to draw widgets.

And the high performance is mainly guaranteed by two points.

• Dart Language
• Own engine to render/draw widgets

Now we are on the point finally. Before talking about dart language compilation process, I need to mention that JIT & AOT refer to the way the program runs, and the programming language isn't strongly related. And some languages support JIT and AOT together, Ex: Java, Python.

first time - Compiled -> intermediate byte code
later -> byte code will be directly executed

The DART runtime and compiler also support a combination of two key features - JIT & AOT.

---

??? IF YOU ARE INTERESTED TO KNOW ABOUT FLUTTER FRAME STRUCTURE ??? The bottom two layers (Foundation and Animation, Painting, Gestures) are merged into a dart UI layer, dart:ui.

Rendering layer is responsible to build UI tree and if any changes happen, compare and update the widget tree. And finally draw on the device screen(Something similar to React Virtual DOM).

Widgets layer is the basic component libraries provided by flutter.

And the top(Material, Cupertino) is a component library provided by flutter. And this is where/what we developers are dealing with most the time.

I think, now this is clear to all. Happy Coding !

Update: 23 Apr, 2022

Flutter's rendering engine Skia renders the entire app's UI on iOS using Metal. There are no UI components rendered unlike native iOS development. It's all painted on the screen using Apple's Metal engine. Here is the proof of using 3D debugging in xcode -

Source: book.flutterchina.club, flutter.dev, maximilian schwarzmüller's flutter course, Flutter official YouTube channel, @vandadnp

The Dart source code is compiled to native code using Dart's AoT compilation feature. It still needs parts of the the Dart VM (some runtime components like garbage collection) to run though, but the code is compiled to native code ahead of time, because iOS doesn't allow dynamic compilation.

Flutter can also call out to Android and use Android features only available in Java (same with iOS). Flutter supports to build custom plugins (in addition to a lot of provided ones) to call out to native platform code.

Let me Explain with the help of this Diagram:

Flutter is built using Dart programming language. Flutter has 2 main components:

1. Flutter Framework.
2. Flutter SDK.

Flutter Framework uses Dart as programming language and Framework has a set of utility functions through which you can add UI Elements and Widgets in your Flutter App.

And Flutter SDK allows you to build and deploy and customize your Flutter Apps.

Flutter uses Dart

Because Dart is strongly typed Object Oriented programming language. And it has features of Ahead of time compilation and Just in Time Compilation.

Ahead of time compilation make Flutter SDK and Dart eligible to generate Native ARM Code which can be compiled on Android and iOS.

For more details you can watch this video: How Flutter Works and Why Flutter uses Dart