Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Flutter is an open-source UI software development toolkit created by Google. It enables developers to build natively compiled applications for mobile, web, and desktop from a single codebase. The Flutter SDK architecture is layered and optimised for performance, flexibility, and cross-platform consistency
Flutter follows a layered architecture consisting of the following main layers:
1. Flutter Framework
The Flutter Framework is written in Dart and provides a rich set of libraries and APIs to build UIs using a reactive, declarative approach. It consists of four main sub-layers, each responsible for specific tasks in UI creation, event handling, rendering, and layout.
1.1. Widget Layer (Declarative UI)
Purpose: Entry point for app developers.
Key Components:
StatelessWidget, StatefulWidget
InheritedWidget, Widget tree creation
Role: Builds the widget tree and declares the UI structure.
1.2. Element Layer (Bridge between Widget and Render)
Purpose: Manages the lifecycle and relationship between widgets and their underlying render objects.
Key Components:
Element, State, BuildOwner
Role: Maintains the element tree and handles mounting/updating widgets.
1.3. Rendering Layer
Purpose: Actual UI layout and painting.
Key Components:
RenderObject, RenderBox, PipelineOwner
Role:
Manages constraints, layout sizes, painting pixels to screen.
1.4. Foundation Layer
Purpose: Base classes and utilities for the framework.
Key Components:
ChangeNotifier, Diagnostics, Colour, Size
Role: Provides essential building blocks used by all layers above.
1.5. Animation Layer
Purpose: Smooth and controlled animations.
Key Components:
Animation, AnimationController, Ticker, Tween, Curves
Role: Powers all animated transitions in widgets
2. Flutter Engine
The Flutter Engine is the core layer that powers Flutter apps. Built in C++, it handles rendering, Dart code execution, and communication with native platforms. Key components include the Dart Runtime, Skia Graphics, Compositing, Text Rendering, and Platform Channels. Together, they convert Flutter’s UI code into fast, native-like visuals across Android, iOS, web, and desktop platforms.
2.1. Dart Runtime
Purpose: Executes Dart code.
Key Components:
Role: Runs the application logic written in Dart.
2.2. Skia Graphics Library
Purpose: Provides GPU-accelerated 2D rendering.
Key Components:
Role: Turns scene data into pixels on the screen.
2.3. Text & Typography
Purpose: High-quality text rendering.
Key Components:
Role: Supports internationalisation, styling, font rendering.
2.4. Compositing Layer
Purpose: Builds and manages the visual scene graph.
Key Components:
Role: Composes layers into a final scene for Skia to paint.
2.5. Platform Channels
Purpose: Bridge between Dart and platform-specific code (Java/Kotlin, Swift/Obj-C).
Key Components:
MethodChannel, EventChannel, BasicMessageChannel
Role: Enables use of device features like camera, GPS, sensors.
2.6. Runtime & Embedding
Purpose: Integrates the engine into the host OS.
Key Components:
Role: Runs the engine inside native shells (Android, iOS, Windows, etc.)
3. Flutter Embedder
The Embedder is the lowest layer of the Flutter architecture. It serves as the platform integration layer—responsible for launching and hosting the Flutter engine inside a native app environment.
It connects the Flutter Engine to the underlying operating system, making it possible to run the same Flutter code across various platforms like Android, iOS, Windows, macOS, Linux, and Web.
It handles:
3.2. Supported Platforms & Embedder Roles
3.3. Key Embedder Components (Extended View)
3.4. Why Is the Embedder Important?
The embedder makes Flutter truly cross-platform. Without it, the engine would have no way to:
The design allows developers to even create custom embedders for niche platforms (like embedded devices or smart TVs).
4. Flutter Runtime Compilation Modes
Flutter apps can be compiled in three primary modes: Debug, Profile, and Release. Each mode is optimised for a different stage of the app development lifecycle, impacting performance, compilation behaviour, and tooling support.
4.1. Debug Mode
4.2. Profile Mode
4.3. Release Mode
4.4. Summary comparison table
5. Cross-Platform Support
Mobile: Android, iOS
Web: Compiles Dart to JavaScript (uses CanvasKit or HTML renderer)
Desktop: macOS, Windows, Linux
Embedded: Raspberry Pi, IoT (experimental)
How a widget becomes pixels
Here’s a flowchart of how a Flutter widget becomes pixels on the screen, step-by-step from your Dart code to what the user actually sees:
Explanation of Each Step
Tap Event Flow in Flutter
Detailed Step-by-Step Breakdown
Sequence Diagram: Tap Event Flow in Flutter
Lifelines:
User: The person interacting with the device.
OS: The operating system (Android/iOS) that handles input hardware.
Engine: The Flutter engine (written in C++) that bridges the OS and Dart code.
Framework: Flutter’s Dart-based layer that builds and updates the UI.
Example:
ElevatedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text("Tap Me"),
);
In this case:
Summary of Roles
Conclusion
Flutter’s layered architecture—comprising the Framework, Engine, and Embedder—offers a powerful, flexible, and high-performance foundation for cross-platform app development. With its declarative UI, widget-based design, and GPU-accelerated rendering, Flutter enables consistent experiences across mobile, web, and desktop from a single codebase.
Understanding the architecture helps developers build efficiently, debug effectively, and create scalable, responsive apps suited to modern needs.
Flutter follows a layered architecture consisting of the following main layers:
1. Flutter Framework
The Flutter Framework is written in Dart and provides a rich set of libraries and APIs to build UIs using a reactive, declarative approach. It consists of four main sub-layers, each responsible for specific tasks in UI creation, event handling, rendering, and layout.
1.1. Widget Layer (Declarative UI)
Purpose: Entry point for app developers.
Key Components:
StatelessWidget, StatefulWidget
InheritedWidget, Widget tree creation
Role: Builds the widget tree and declares the UI structure.
1.2. Element Layer (Bridge between Widget and Render)
Purpose: Manages the lifecycle and relationship between widgets and their underlying render objects.
Key Components:
Element, State, BuildOwner
Role: Maintains the element tree and handles mounting/updating widgets.
1.3. Rendering Layer
Purpose: Actual UI layout and painting.
Key Components:
RenderObject, RenderBox, PipelineOwner
Role:
Manages constraints, layout sizes, painting pixels to screen.
1.4. Foundation Layer
Purpose: Base classes and utilities for the framework.
Key Components:
ChangeNotifier, Diagnostics, Colour, Size
Role: Provides essential building blocks used by all layers above.
1.5. Animation Layer
Purpose: Smooth and controlled animations.
Key Components:
Animation, AnimationController, Ticker, Tween, Curves
Role: Powers all animated transitions in widgets
2. Flutter Engine
The Flutter Engine is the core layer that powers Flutter apps. Built in C++, it handles rendering, Dart code execution, and communication with native platforms. Key components include the Dart Runtime, Skia Graphics, Compositing, Text Rendering, and Platform Channels. Together, they convert Flutter’s UI code into fast, native-like visuals across Android, iOS, web, and desktop platforms.
2.1. Dart Runtime
Purpose: Executes Dart code.
Key Components:
- Dart VM (for JIT in dev, AOT in release)
- Isolates (for concurrency)
- Garbage Collector
Role: Runs the application logic written in Dart.
2.2. Skia Graphics Library
Purpose: Provides GPU-accelerated 2D rendering.
Key Components:
- Drawing primitives (lines, shapes, images)
- Compositing, Blending, Filters
Role: Turns scene data into pixels on the screen.
2.3. Text & Typography
Purpose: High-quality text rendering.
Key Components:
- Paragraph and text shaping
- Font resolution and glyph layout
Role: Supports internationalisation, styling, font rendering.
2.4. Compositing Layer
Purpose: Builds and manages the visual scene graph.
Key Components:
- SceneBuilder, LayerTree
Role: Composes layers into a final scene for Skia to paint.
2.5. Platform Channels
Purpose: Bridge between Dart and platform-specific code (Java/Kotlin, Swift/Obj-C).
Key Components:
MethodChannel, EventChannel, BasicMessageChannel
Role: Enables use of device features like camera, GPS, sensors.
2.6. Runtime & Embedding
Purpose: Integrates the engine into the host OS.
Key Components:
- App entry point (main())
- Threading model and event loop
- Host platform views (Android/iOS)
Role: Runs the engine inside native shells (Android, iOS, Windows, etc.)
3. Flutter Embedder
The Embedder is the lowest layer of the Flutter architecture. It serves as the platform integration layer—responsible for launching and hosting the Flutter engine inside a native app environment.
It connects the Flutter Engine to the underlying operating system, making it possible to run the same Flutter code across various platforms like Android, iOS, Windows, macOS, Linux, and Web.
It handles:
- Window creation and management
- Input processing (touch, mouse, keyboard)
- Event loop and thread setup
- Communication with device APIs (camera, sensors, file storage, GPS)
- Rendering surfaces (OpenGL, Metal, Vulkan, etc.)
3.2. Supported Platforms & Embedder Roles
3.3. Key Embedder Components (Extended View)
3.4. Why Is the Embedder Important?
The embedder makes Flutter truly cross-platform. Without it, the engine would have no way to:
- Interface with OS APIs
- Handle device input
- Display anything on screen
- Access hardware-level functionality
The design allows developers to even create custom embedders for niche platforms (like embedded devices or smart TVs).
4. Flutter Runtime Compilation Modes
Flutter apps can be compiled in three primary modes: Debug, Profile, and Release. Each mode is optimised for a different stage of the app development lifecycle, impacting performance, compilation behaviour, and tooling support.
4.1. Debug Mode
4.2. Profile Mode
4.3. Release Mode
4.4. Summary comparison table
5. Cross-Platform Support
Mobile: Android, iOS
Web: Compiles Dart to JavaScript (uses CanvasKit or HTML renderer)
Desktop: macOS, Windows, Linux
Embedded: Raspberry Pi, IoT (experimental)
How a widget becomes pixels
Here’s a flowchart of how a Flutter widget becomes pixels on the screen, step-by-step from your Dart code to what the user actually sees:
Explanation of Each Step
Tap Event Flow in Flutter
Detailed Step-by-Step Breakdown
Sequence Diagram: Tap Event Flow in Flutter
Lifelines:
User: The person interacting with the device.
OS: The operating system (Android/iOS) that handles input hardware.
Engine: The Flutter engine (written in C++) that bridges the OS and Dart code.
Framework: Flutter’s Dart-based layer that builds and updates the UI.
Example:
ElevatedButton(
onPressed: () {
setState(() {
counter++;
});
},
child: Text("Tap Me"),
);
In this case:
- The user taps the button.
- Flutter recognizes the tap gesture.
- onPressed triggers setState.
- The UI rebuilds to reflect the updated counter
Summary of Roles
Conclusion
Flutter’s layered architecture—comprising the Framework, Engine, and Embedder—offers a powerful, flexible, and high-performance foundation for cross-platform app development. With its declarative UI, widget-based design, and GPU-accelerated rendering, Flutter enables consistent experiences across mobile, web, and desktop from a single codebase.
Understanding the architecture helps developers build efficiently, debug effectively, and create scalable, responsive apps suited to modern needs.