How does Flutter Engine work?

How does Flutter Engine work behind the scenes?

Flutter is a cross-platform UI framework that provides features to develop mobile apps that result in Elegant and astonishing apps. Flutter renders everything written in the UI layer code to the screen of the mobiles using widgets. It can be a mobile, web, desktop etc. Device screens are the canvas for Flutter which paints the widgets and sums up a greatly usable app. Flutter uses Dart language to build apps that can be run on Android & iOS. It works beautifully with the logic defined as how the app will work.

When you switch from the existing mobile technology like Native Android and iOS Development, we think that,

• Does Flutter work like a classic cross-platform framework that converts to a web view and opens a browser-based app?

• Does Flutter convert your dart code to Java/Kotlin and Swift for Android and iOS respectively?

The answer is Not at all.

Flutter is performing Static Compilation with the help of SDK. The Flutter compiles Dart code to native machine Android / iOS code before execution. eg. AOT(Ahead of Time) — C/C++. Flutter’s high performance is mainly done by Dart language and flutter engine, which uses Skia (now Impeller) to draw widgets.

Flutter Engine Layered Diagram:

(This diagram is for understanding purposes, detailed architecture is here)

1. The bottom two layers are handled with dart UI component, i.e. dart:ui.
2. The Rendering layer is responsible for the final drawing on the screen that is built by UI components. The widget tree will be compared and updated if any changes are detected.
3. The Widgets layer is the basic component library provided by Flutter.
4. The top-level (Material &Cupertino) is a component library provided by Flutter. That is what we developers are dealing with the most of time.

This is How Flutter Engine renders Container when Dart code compiles:

[1] Widget Layer

• The Widget tree holds the configurations of the widget which are created when the app runs for the very first time.
• eg. In the image above, the container widget in the widget tree holds the configurations like height, width, child, etc.

[2] Element Layer

• Elements are just like empty widgets referring to their associated widget. Each widget present in the widget tree is linked to the respective element.
• These elements perform the major role of connecting widgets from the widget tree to rendered widgets from the render tree, also it provides a reference to the configuration of widgets present in the widget tree.
• eg. In the image above, the container is linked to the container element.

[3] Rendering Layer

• The configurations of the Widget which the Element Object points are passed onto the Rendered Widget, which is then passed according to the properties. After this process the widget renders on the screen.

Difference between stateless and stateful widgets

Whenever we create a Stateless Widget it creates two classes, namely User-defined class which extends StatefulWidget and another class which extends State class. The other class we’re talking about is created in the initial class with the help of the createState() method. This then rebuilds the widget according to the changes in state.

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
   return Container();
  }
}

This work like:

[1] First, the widget will be rendered on the screen according to defined properties.

[2] When the setState() is called, it does not rebuild the whole widget tree but replaces that particular widget with a new one containing the different properties provided in the widget.

[3] eg. If there is a container with background color: Colors.purple, it is stored as a value in widget configurations. In the widget tree, it is then passed to the Rendering widget by the Container element holds the reference to the Container and purple container displayed on the screen.

[4] when the setState() supposed to change its background colour to yellow, then the new container widget with color: Colors.yellow will replace the one with a purple colour.

[5] Now what will happen to the container element referring to the purple-coloured container? → It just relocates its reference to a new widget that replaced the older one. However, the State the object will not change, just the properties will change that will create a difference.

[6] Finally, after those changes, the element that refers to the new widget will inform the rendered widget about the changes and it will reflect on the screen.

[7] Hence, Flutter does not rebuild the old widget but it only changes its reference to the updated widget. This will not cause the performance issues. That’s the beauty of Flutter.

So, that’s how Flutter Engine works behind the scenes to render and display the UI components.

I hope this is clear to you. Happy Coding!