⚙️ Flutter Engine
Flutter Engine là trái tim của Flutter, được viết bằng C/C++ và chịu trách nhiệm render UI, xử lý input, và giao tiếp với platform.
1. Kiến trúc tổng quan
Phần tiêu đề “1. Kiến trúc tổng quan”┌─────────────────────────────────────────────────────────────────────┐│ FLUTTER APPLICATION │├─────────────────────────────────────────────────────────────────────┤│ ││ ┌───────────────────────────────────────────────────────────────┐ ││ │ FRAMEWORK LAYER │ ││ │ (Dart Code) │ ││ │ ┌─────────────────────────────────────────────────────────┐ │ ││ │ │ Material / Cupertino / Widgets │ │ ││ │ ├─────────────────────────────────────────────────────────┤ │ ││ │ │ Rendering (layout, painting, compositing) │ │ ││ │ ├─────────────────────────────────────────────────────────┤ │ ││ │ │ Animation / Gestures / Foundation │ │ ││ │ └─────────────────────────────────────────────────────────┘ │ ││ └───────────────────────────────────────────────────────────────┘ ││ │ ││ ▼ ││ ┌───────────────────────────────────────────────────────────────┐ ││ │ ENGINE LAYER │ ││ │ (C/C++ Code) │ ││ │ ┌─────────────┬─────────────┬─────────────┬───────────────┐ │ ││ │ │ Dart VM │ Skia / │ Text │ Platform │ │ ││ │ │ │ Impeller │ Layout │ Channels │ │ ││ │ └─────────────┴─────────────┴─────────────┴───────────────┘ │ ││ └───────────────────────────────────────────────────────────────┘ ││ │ ││ ▼ ││ ┌───────────────────────────────────────────────────────────────┐ ││ │ EMBEDDER LAYER │ ││ │ (Platform-specific) │ ││ │ ┌───────────┬───────────┬───────────┬───────────┬─────────┐ │ ││ │ │ Android │ iOS │ Web │ Windows │ macOS │ │ ││ │ └───────────┴───────────┴───────────┴───────────┴─────────┘ │ ││ └───────────────────────────────────────────────────────────────┘ ││ │└─────────────────────────────────────────────────────────────────────┘2. Engine Components
Phần tiêu đề “2. Engine Components”2.1 Dart Runtime
Phần tiêu đề “2.1 Dart Runtime”┌──────────────────────────────────────────────────────┐│ Dart Runtime │├──────────────────────────────────────────────────────┤│ ││ ┌──────────────────────────────────────────────┐ ││ │ Dart VM │ ││ │ • Garbage Collector │ ││ │ • Isolate Management │ ││ │ • JIT (Debug) / AOT (Release) │ ││ └──────────────────────────────────────────────┘ ││ ││ Debug Mode: ││ └── JIT Compilation (Just-In-Time) ││ └── Enables Hot Reload ││ └── Slower startup, faster development ││ ││ Release Mode: ││ └── AOT Compilation (Ahead-Of-Time) ││ └── Native machine code ││ └── Fast startup, optimized performance ││ │└──────────────────────────────────────────────────────┘2.2 Graphics Engine
Phần tiêu đề “2.2 Graphics Engine”┌──────────────────────────────────────────────────────┐│ Graphics Engine │├──────────────────────────────────────────────────────┤│ ││ ┌──────────────────────────────┐ ││ │ Flutter Rendering │ ││ │ Commands │ ││ └──────────────┬───────────────┘ ││ │ ││ ▼ ││ ┌──────────────────────────────┐ ││ │ Skia / Impeller │ ││ │ (Graphics Library) │ ││ └──────────────┬───────────────┘ ││ │ ││ ▼ ││ ┌──────────────────────────────┐ ││ │ GPU Abstraction │ ││ │ (Vulkan, Metal, OpenGL) │ ││ └──────────────┬───────────────┘ ││ │ ││ ▼ ││ ┌──────────────────────────────┐ ││ │ GPU Hardware │ ││ └──────────────────────────────┘ ││ │└──────────────────────────────────────────────────────┘2.3 Text Layout Engine
Phần tiêu đề “2.3 Text Layout Engine”┌──────────────────────────────────────────────────────┐│ Text Layout Engine │├──────────────────────────────────────────────────────┤│ ││ Components: ││ ├── libtxt (Text layout library) ││ ├── HarfBuzz (Text shaping) ││ ├── ICU (Unicode support) ││ └── Minikin (Font selection) ││ ││ Responsibilities: ││ ├── Font loading & caching ││ ├── Glyph positioning ││ ├── Line breaking ││ ├── Bi-directional text (RTL/LTR) ││ └── Complex script rendering (Arabic, Thai, etc.) ││ │└──────────────────────────────────────────────────────┘3. Rendering Pipeline
Phần tiêu đề “3. Rendering Pipeline”┌─────────────────────────────────────────────────────────────────────┐│ RENDERING PIPELINE │├─────────────────────────────────────────────────────────────────────┤│ ││ ┏━━━━━━━━━━━━┓ ││ ┃ Build ┃ ← Widget tree → Element tree ││ ┗━━━━━━━┳━━━━┛ ││ ▼ ││ ┏━━━━━━━━━━━━┓ ││ ┃ Layout ┃ ← Constraints down, sizes up ││ ┗━━━━━━━┳━━━━┛ ││ ▼ ││ ┏━━━━━━━━━━━━┓ ││ ┃ Paint ┃ ← Create display lists ││ ┗━━━━━━━┳━━━━┛ ││ ▼ ││ ┏━━━━━━━━━━━━┓ ││ ┃ Composite ┃ ← Layer tree → Rasterize ││ ┗━━━━━━━┳━━━━┛ ││ ▼ ││ ┏━━━━━━━━━━━━┓ ││ ┃ Rasterize ┃ ← GPU renders pixels ││ ┗━━━━━━━━━━━━┛ ││ ││ Target: 60 FPS = 16.67ms per frame ││ Target: 120 FPS = 8.33ms per frame ││ │└─────────────────────────────────────────────────────────────────────┘4. Frame Scheduling
Phần tiêu đề “4. Frame Scheduling”┌─────────────────────────────────────────────────────────────────────┐│ FRAME LIFECYCLE │├─────────────────────────────────────────────────────────────────────┤│ ││ VSync Signal (từ display) ││ │ ││ ▼ ││ ┌─────────────────────────────────────────────────────────────┐ ││ │ UI Thread │ ││ │ • Build widgets │ ││ │ • Layout │ ││ │ • Paint (create display list) │ ││ │ • Compose layers │ ││ └─────────────────────────────────────────────────────────────┘ ││ │ ││ │ Scene submitted ││ ▼ ││ ┌─────────────────────────────────────────────────────────────┐ ││ │ Raster Thread │ ││ │ • Rasterize scene │ ││ │ • Upload textures to GPU │ ││ │ • Execute GPU commands │ ││ └─────────────────────────────────────────────────────────────┘ ││ │ ││ ▼ ││ ┌─────────────────────────────────────────────────────────────┐ ││ │ Display │ ││ └─────────────────────────────────────────────────────────────┘ ││ │└─────────────────────────────────────────────────────────────────────┘5. Threads trong Flutter Engine
Phần tiêu đề “5. Threads trong Flutter Engine”┌─────────────────────────────────────────────────────────────────────┐│ FLUTTER THREADS │├─────────────────────────────────────────────────────────────────────┤│ ││ ┌─────────────────────────────────────────────────────────────┐ ││ │ UI Thread (Main/Dart Thread) │ ││ │ • Runs Dart code │ ││ │ • Widget building │ ││ │ • Layout & Paint │ ││ │ • Gestures │ ││ │ ⚠️ Không nên block thread này! │ ││ └─────────────────────────────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────────────────────────────┐ ││ │ Raster Thread (GPU Thread) │ ││ │ • Rasterization │ ││ │ • GPU commands │ ││ │ • Texture upload │ ││ └─────────────────────────────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────────────────────────────┐ ││ │ IO Thread │ ││ │ • Image decoding │ ││ │ • Asset loading │ ││ │ • File I/O │ ││ └─────────────────────────────────────────────────────────────┘ ││ ││ ┌─────────────────────────────────────────────────────────────┐ ││ │ Platform Thread │ ││ │ • Native platform messages │ ││ │ • Platform channels │ ││ └─────────────────────────────────────────────────────────────┘ ││ │└─────────────────────────────────────────────────────────────────────┘6. Platform Embedders
Phần tiêu đề “6. Platform Embedders”┌─────────────────────────────────────────────────────────────────────┐│ PLATFORM EMBEDDERS │├─────────────────────────────────────────────────────────────────────┤│ ││ Embedder cung cấp: ││ ├── Surface để render ││ ├── Input events (touch, keyboard, mouse) ││ ├── Platform channels ││ ├── Lifecycle events ││ └── Accessibility bridge ││ ││ ┌──────────────┬──────────────┬──────────────┐ ││ │ Android │ iOS │ Web │ ││ ├──────────────┼──────────────┼──────────────┤ ││ │ FlutterView │ FlutterView │ Canvas │ ││ │ FlutterEngine│ FlutterEngine│ Element │ ││ │ Surface │ Layer │ WebGL │ ││ └──────────────┴──────────────┴──────────────┘ ││ │└─────────────────────────────────────────────────────────────────────┘📝 Tóm tắt
Phần tiêu đề “📝 Tóm tắt”| Layer | Vai trò | Ngôn ngữ |
|---|---|---|
| Framework | Widgets, Rendering, Animation | Dart |
| Engine | VM, Graphics, Text | C/C++ |
| Embedder | Platform integration | Platform-specific |
| Thread | Trách nhiệm |
|---|---|
| UI Thread | Dart code, Layout, Paint |
| Raster Thread | GPU rendering |
| IO Thread | Image decoding, Assets |
| Platform Thread | Native messages |
Điểm mạnh của architecture:
- Portable: Cùng engine trên mọi platform
- Consistent: Không phụ thuộc vào native UI
- Fast: Direct GPU access, compiled code