Flutter - How does it work behind the scenes?

Question

Obviously, flutter is a framework for running apps on iOS and Android using one codebase. But how does it manage to do so? Will it compile to nativ

Answer 1

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 !

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