What is the architecture of flutter?

Note: To learn more about dart, click here.

Architecture of flutter

The flutter framework is a layered system with each layer dependent on the layer below. A single layer has several independent libraries.

Each layer further has components that coordinate with each other for a smooth user experience.

Embedder layer

The embedder layer has platform-specific embeddersIt is used to integrate the source code to the application., many of which provide an entry point and coordinate with their respective operating system to access services like rendering, storage, and more. It has many embedders for possible targeted platforms.

Java and C++ are used in embedders for android, objective-C/ C++ for IOS and macOS, and C++ for Linux and windows.

Note: As flutter is open-source, we can check the code and change it according to our needs.

Engine layer

The engine layer is the core of flutter written in C/C++. It is responsible for taking care of input, output, and rasterizingConverting image into pixels composited scenes, as flutter is a UI toolkit. It uses the skiaIt is open source 2D graphic library library for rendering graphics.

The engine layer is also responsible for service and network protocols, such as network input and output, file management, and the core API of flutter. The flutter engine layer can be accessed through the dart:uiIt is one of the flutter libraries library, which wraps all these functionalities in dart classes.

Framework layer

In the framework layer, the developer interacts with and writes flutter applications. It is written in dart language and has predefined libraries, layouts, and more.

The framework layer has three main layer components, which are the following:

• Foundation layer

• Rendering layer

• Widget layer

Foundation layer

To Flutter, some foundational classes and some building block services provide abstraction. Some of the main building block services are animations and gestures.

• Flutter can support animations like tween, hero, silver, transform, fade in the widget, animation builder, animated opacity, and any animation related to physics.

• The gesture is a widget used to detect gestures like tapping, dragging, and scaling. It has an invisible widget name gesture detector.

Rendering layer

This layer is responsible for converting widgets in a flutter to pixels and showing them on the screen. It takes a tree of renderable objects called the widgets tree. Whenever any animation, input, or state of the widget changes, this layer is called, which updates the layout and shows them on the screen.

Widget layer

A widget is a like component in ReactJS. Each renderable object has its widget, which the developer uses to make a widget tree. There are many predefined widgets. We can also write code and create a new widget that can be used in an application, just like we make components in ReactJS.

In flutter, we use these reusable widgets to make a widget tree. This widget tree then goes to the rendering layer and appears on the screen as pixels.

Material (for android) and Cupertino (for IOS) libraries provide predefined widgets on the layout design.