Flutter Engine - Kiến trúc bên trong

┌─────────────────────────────────────────────────────────────────────┐
│                        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  │  │ │
│  │  └───────────┴───────────┴───────────┴───────────┴─────────┘  │ │
│  └───────────────────────────────────────────────────────────────┘ │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────┐
│                    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            │
│                                                      │
└──────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────┐
│                  Graphics Engine                      │
├──────────────────────────────────────────────────────┤
│                                                      │
│        ┌──────────────────────────────┐             │
│        │      Flutter Rendering       │             │
│        │         Commands             │             │
│        └──────────────┬───────────────┘             │
│                       │                              │
│                       ▼                              │
│        ┌──────────────────────────────┐             │
│        │    Skia / Impeller           │             │
│        │    (Graphics Library)         │             │
│        └──────────────┬───────────────┘             │
│                       │                              │
│                       ▼                              │
│        ┌──────────────────────────────┐             │
│        │     GPU Abstraction          │             │
│        │   (Vulkan, Metal, OpenGL)    │             │
│        └──────────────┬───────────────┘             │
│                       │                              │
│                       ▼                              │
│        ┌──────────────────────────────┐             │
│        │         GPU Hardware         │             │
│        └──────────────────────────────┘             │
│                                                      │
└──────────────────────────────────────────────────────┘

┌──────────────────────────────────────────────────────┐
│                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.)  │
│                                                      │
└──────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────┐
│                      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                                 │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────┐
│                      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                                   │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────┐
│                      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                                         │   │
│  └─────────────────────────────────────────────────────────────┘   │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────┐
│                    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      │                    │
│  └──────────────┴──────────────┴──────────────┘                    │
│                                                                     │
└─────────────────────────────────────────────────────────────────────┘