byhuang1998
byhuang1998

Reputation: 417

flutter: what's the role of FlutterEngine?

I'm learning about flutter architecture. I couldn't understand FlutterEngine well and haven't found any clear explanation. So what does FlutterEngine work for, or could you introduce some good article for me? Thanks in advance.

Upvotes: 3

Views: 2544

Answers (2)

Ben Butterworth
Ben Butterworth

Reputation: 28572

From the javadoc:

A single Flutter execution environment.

The FlutterEngine is the container through which Dart code can be run in an Android application.

Dart code in a FlutterEngine can execute in the background, or it can be render to the screen by using the accompanying FlutterRenderer and Dart code using the Flutter framework on the Dart side. Rendering can be started and stopped, thus allowing a FlutterEngine to move from UI interaction to data-only processing and then back to UI interaction.

You launch a dart isolate through a FlutterEngine (there is a 1 to 1 mapping). It really depends on the platform:

You can have multiple FlutterEngine's in a project, but a normal Flutter project will only have 1. All Flutter Engines will share the same Dart VM.

I wrote a small bit about the difference between FlutterEngine and Dart VM, but I hope someone writes a better answer there: What is the relationship between Flutter Engine and Dart VM?

Upvotes: 0

DK_bhai
DK_bhai

Reputation: 359

Flutter implements most of its system (compositing, gestures, animation, framework, widgets, etc) in Dart. Flutter engine, written in C++, is designed to interface with the underlying operating system.
Flutter architecture consist of three layers

  1. Framework
  2. Engine
  3. Embedder

First you need to understand how flutter renders your app on a very high level, rendering in Flutter goes through four phases:

#1. Layout Phase: in this phase, Flutter determines exactly how big each object is, and where it will be displayed on the screen.
#2. Painting Phase: in this phase, Flutter provides each widget with a canvas, and tells it to paint itself on it.
#3.Compositing Phase: in this phase, Flutter puts everything together into a scene, and sends it to the GPU for processing.
#4. Rasterizing Phase: in this final phase, the scene is displayed on the screen as a matrix of pixels.
To go in-depth refer this article on medium.com

The engine is responsible for rasterizing composited scenes whenever a new frame needs to be painted.
Another thing to note is that Flutter neither uses WebView nor the OEM widgets that shipped with the device, rather it uses its own high-performance rendering engine to draw widgets which is Skia (a 2D graphics rendering library)
link to flutter official FAQ page
In a nutshell
It acts like a bridge, whatever dart code you write gets converted to C and C++ and compiled with Android’s NDK(incase of android) and LLVM(incase of ios) "ahead-of-time (AOT)" and guess who is responsible for this?..... yes flutter engine.
Also I highly encourage you to read the official Docs.

Upvotes: 5

Related Questions