Architecture of Flutter Applications
Flutter Architecture
The Flutter architecture mainly comprises of four components.
1. Flutter Engine
2. Foundation Library
3. Widgets
4. Design Specific Widgets
Flutter Engine
It is a portable runtime for high-quality mobile apps and primarily based
on the C++ language. It implements Flutter core libraries that include
animation and graphics, file and network I/O, plugin architecture, accessibility
support, and a dart runtime for developing, compiling, and running Flutter
applications. It takes Google's open-source graphics library, Skia, to render
low-level graphics.
Foundation Library
It contains all the required packages for the basic building blocks of
writing a Flutter application. These libraries are written in Dart language.
Widgets
In Flutter, everything is a widget, which is the core concept of this
framework. Widget in the Flutter is basically a user interface component that
affects and controls the view and interface of the app. It represents an
immutable description of part of the user interface and includes graphics, text,
shapes, and animations that are created using widgets. The widgets are similar
to the React components.
In Flutter, the application is itself a widget that contains many sub
widgets. It means the app is the top-level widget, and its UI is build using one or
more children widgets, which again includes sub child widgets. This feature
helps you to create a complex user interface very easily.
In the above example, we can see that all the components are widgets that
contain child widgets. Thus, the Flutter application is itself a widget.
Design Specific Widgets
The Flutter framework has two sets of widgets that conform to specific
design languages. These are Material Design for Android application and
Cupertino Style for IOS application.
Gestures
It is a widget that provides interaction (how to listen for and respond to)
in Flutter using GestureDetector. GestureDector is an invisible widget, which
includes tapping, dragging, and scaling interaction of its child widget. We can
also use other interactive features into the existing widgets by composing with
the GestureDetector widget.
State Management
Flutter widget maintains its state by using a special widget,
StatefulWidget. It is always auto re-rendered whenever its internal state is
changed. The re-rendering is optimized by calculating the distance between old
and new widget UI and render only necessary things that are changes.
Layers
Layers are an important concept of the Flutter framework, which are
grouped into multiple categories in terms of complexity and arranged in the top-
down approach. The topmost layer is the UI of the application, which is specific
to the Android and iOS platforms. The second topmost layer contains all the
Flutter native widgets. The next layer is the rendering layer, which renders
everything in the Flutter app. Then, the layers go down to Gestures, foundation
library, engine, and finally, core platform-specific code. The following diagram
specifies the layers in Flutter app development.
The following diagram gives an overview of the pieces that make up a
regular Flutter app generated by flutter create. It shows where the Flutter Engine
sits in this stack, highlights API boundaries, and identifies the repositories
where the individual pieces live. The legend below clarifies some of the
terminology commonly used to describe the pieces of a Flutter app.
Dart App
Composes widgets into the desired UI.
Implements business logic.
Owned by app developer.
Framework (source code)
Provides higher-level API to build high-quality apps (for example,
widgets, hit-testing, gesture detection, accessibility, text input).
Composites the app’s widget tree into a scene.
Engine (source code)
Responsible for rasterizing composited scenes.
Provides low-level implementation of Flutter’s core APIs (for example,
graphics, text layout, Dart runtime).
Exposes its functionality to the framework using the dart:ui API.
Integrates with a specific platform using the Engine’s Embedder API.
Embedder (source code)
Coordinates with the underlying operating system for access to services
like rendering surfaces, accessibility, and input.
Manages the event loop.
Exposes platform-specific API to integrate the Embedder into apps.
Runner
Composes the pieces exposed by the platform-specific API of the
Embedder into an app package runnable on the target platform.
Part of app template generated by flutter create, owned by app developer.
[Link]
