Flutter Architecture

Understand the details of the internal framework of Flutter and its architecture.

We'll cover the following

Overview

Flutter is a cross-platform UI toolkit that allows applications to interact directly with underlying platform services while allowing code reuse across operating systems like iOS, Android, webOS, etc.

Architectural layers

Before we dive deep into the Flutter framework, we need to understand the different layers working beneath the Flutter framework. These are known as architectural layers of Flutter. Let’s discuss these layers in detail.

Embedder layer

The embedder layer is at the bottom of the Flutter framework, which directly talks to the underlying operating system. In the embedder layer, the Flutter applications are packaged in the same way as any other native application. The embedder is written in a platform-specific language, such as Java and C++ for Android, Objective-C and Objective-C++ for iOS and macOS, and C++ for Windows and Linux.

Engine layer

Just above the Embedder Layer, we have the Flutter engine layer, which is mostly written in C++. Every time a new frame needs to be painted, the engine is in charge of rasterizing (raster picture) composited sceneries. It implements Flutter’s basic API at a low level, including graphics, text layout, file, and network I/O, among other things.

Flutter framework

At the top of the chart, we have the Flutter framework, where developers will mostly interact to build the apps. The framework is written in the Dart language, so developers are required to learn Dart to build their apps. Some core features like widgets help us build UI elements shipped to us directly under the Flutter framework when its first installed, and other features (like camera, webview, etc.) can be downloaded from pub.dev.

Reactive user interfaces

Most traditional UI frameworks update their interface in response to events triggered by the user (like tapping a button.) In traditional frameworks, the interface’s initial state is described once and then separately updated by user code at runtime. But in Flutter, the developer provides a mapping from different application states to the corresponding interface state. And the framework takes on the task of updating the interface at runtime when the application state changes.