Flutter 与 Dart 引擎：Widget 三棵树、Skia/Impeller 与 isolate

0. 元信息

• 主题路径：docs/topics/mobile-cross-platform/subtopics/flutter-and-dart-engine/README.md
• 父主题：mobile-cross-platform
• 主分类：前端与客户端
• 辅助分类：工程技术
• 适合对象：会 React/Python、对 Dart 与自绘渲染感兴趣的开发者
• 建议周期：2～3 周（每周 8～12 小时，含真机调试与引擎原理追踪）
• 前置知识：mobile-cross-platform 父主题；native-mobile-foundations；CLI 与 Git
• 最终目标：能讲清 Widget / Element / RenderObject 三棵树与 Dart isolate 消息模型，写一个含自定义 Widget + 异步状态 + Platform Channel 的 Flutter App

1. 学习路线

Dart 语法（空安全 / async-await / Stream / isolate）
  → Flutter 工程结构（pubspec / lib / android / ios）
  → Widget / Element / RenderObject 三棵树
  → StatefulWidget / StatelessWidget / InheritedWidget
  → 布局与约束（Constraints → Size → Position）
  → 状态管理（Riverpod / Bloc / setState）
  → 网络与异步（dio / http / Future / Stream）
  → isolate 与 compute（CPU 密集任务）
  → Platform Channel（MethodChannel / EventChannel）
  → Skia / Impeller 渲染原理

2. 阶段周数分配（46 周，每天 1.52 小时）

精简子主题按”Dart → Flutter → 渲染”三段推进，再加一个综合周。

选 4 周方案时把第 4/5 阶段压成 1 周。每周留 0.5 天复盘。

3. 九阶段表

关键陷阱：把 Widget 当 UI；用同步阻塞循环跑 CPU 密集任务；Platform Channel 序列化大对象；不改约束直接堆样式。

4. 第一周任务

5. 阶段通用验收

1. 不看答案独立重写 Flutter 工程与 5 个自定义 Widget；
2. 用自己的话解释 Widget / Element / RenderObject / isolate / Platform Channel；
3. 画一张图：Widget 树 → Element 树 → RenderObject 树；
4. 测试正常路径、isolate 抛错、Platform Channel 抛错、Impeller 降级；
5. 至少准备 3 组自定义数据并贴出实际渲染；
6. 记录冷启动、首帧时间、内存峰值；
7. 能修改既有 App 加 isolate、加 Platform Channel、加自定义 Widget。

6. 最终验收

• 独立画出 Widget / Element / RenderObject 三棵树对比图；
• 完成至少 8 个 Flutter 实验；
• 用 Platform Channel 调用 iOS / Android 原生能力；
• 能用 10 分钟讲清 Flutter 为什么不需要 Bridge。

7. 综合项目

实现「Flutter 跨端 Todo」：列表 + 详情 + sqflite 持久化 + Riverpod 状态 + dio 网络 + Platform Channel 调原生相机。成果合入父主题备选综合项目。

本主题贡献

Flutter 与 Dart 引擎最值得讲透的是三个不变量：Widget/Element/RenderObject 三棵树的职责分层、Dart isolate 无共享内存的异步模型、Platform Channel 原生桥的序列化边界。Dart 空安全是贯穿全栈的类型系统护栏，Skia→Impeller 则是渲染管线的硬件替换。把三棵树 + isolate + Channel 这三件搞透，剩下状态管理与约束布局只是这三层之上的延伸。

3 职责

1. 用一组同接口的 StatelessWidget / StatefulWidget / 自定义 RenderBox，在 DevTools 里把 Element 子树 vs RenderObject 树 rebuild 范围截屏对比。
2. 用 Dart 空安全（late + nullable）跑通一个 FutureBuilder + StreamBuilder 项目，全程不带 !，让 dart analyze 报 0 warning。
3. 用 compute 解析 1 万条 JSON 验证 isolate 不阻塞 UI 线程，再用 Isolate.spawn + SendPort 写双向通信实验，最后用 MethodChannel 调 Swift/Kotlin Toast 各一遍。

4 交付物

1. 一份三棵树对照工程：5 个自定义 Widget（含 1 个继承 RenderObject 的 RenderBox），DevTools 截图标注 Element 子树 rebuild 边界 + RenderObject 树的 Layout / Paint / Composite 三遍。
2. 一份 Dart 空安全实验：pubspec.yaml 启用 languageVersion: 3.0+，全程无 !，dart analyze 0 warning，并留一份「故意写 ! → analyzer 报错 → 修复」记录。
3. 一份 isolate 工程：compute(parse, rawJson) 跑 1 万条 UI 不卡 + Isolate.spawn 双向 SendPort 流，含 UI 帧率前后对比截图（DevTools Timeline）。
4. 一份 Platform Channel 对照：MethodChannel('demo.toast') Swift/Kotlin 各实现 + EventChannel('demo.sensor') 推流，含 StandardMessageCodec 大对象序列化日志与 1 MB 阈值警告截图（Impeller 在 iOS 默认开 / Android 3.27+ 开启）。

3 指标

1. 自定义 Widget 在 setState 后 rebuild 仅命中当前 Element 子树，DevTools Repaint Rainbow 截屏证明无越界重绘（非 Element 子树区域不亮）。
2. compute 解析 1 万条 JSON 期间 UI 帧 P99 < 16 ms，DevTools Timeline 前后对比截图（流畅条颜色前后对照）。
3. Platform Channel 直传 > 1 MB 对象时截 BinaryMessenger 警告日志并改成落盘 + ID 引用；同一屏列表在 Skia 与 Impeller 各跑一次，GPU 线程时间差 < 2 ms。

Flutter Documentation、Flutter Engine source、Flutter Blog、DartPad。复制前核对 LICENSE。

8. 推荐资料

Flutter Documentation、Flutter Engine source、Flutter Blog、DartPad。复制前核对 LICENSE。

9. 学习资料汇聚（v0.3 自包含）

9.1 背景与动机

Flutter 起源自 Google Chrome 团队对 Skia 渲染的内部项目。2017 年 Flutter 1.0 发布，目标是「一次编码、跨端运行、自绘渲染、不调 OEM Widget」。Dart 语言支持 isolate 与 async-await，让 UI 与 IO 模型清晰。2024 年 Impeller 在 iOS 上线，2025 年推到 Android，替代 Skia 的 CPU 光栅化路径。今天 Flutter 的核心问题不是「能不能用」，而是「何时不该用」：强依赖 OEM Widget 或平台特定能力的 App 不适合。

9.2 概念地图

flowchart TB
  Dart[Dart isolate / event loop] --> Widget[Widget]
  Widget --> Element[Element]
  Element --> RenderObject[RenderObject]
  RenderObject --> Skia[Skia 渲染]
  RenderObject --> Impeller[Impeller iOS / Android]
  Widget -.build.-> Dart
  Dart -.MethodChannel.-> Native[Swift / Kotlin]
  Native -.EventChannel.-> Dart
  Compute[Isolate.compute] -.CPU 密集.-> Dart
  Riverpod[State] -.订阅.-> Widget

9.3 基础知识讲解

9.3.1 论文 / 规范

9.3.2 书

9.3.3 博客 / 文档

9.3.4 人物

9.3.5 方法

• Constraint-first layout：先把约束想清楚，再写 Widget。
• Isolate for CPU：JSON 解析、图片处理走 compute。
• Platform Channel spec first：先定 method signature，再写 Native。
• Profile with DevTools：看 Widget Rebuild / RenderObject Layout。

9.3.6 重点训练材料

• Flutter Engine 源码
• DartPad 实验
• Flutter Gallery 源码
• Now in Android 工程范式（对照）

9.4 经典问题与经典案例

9.5 学习难点

9.6 技术标准与接口

9.6.1 Entity

9.6.2 Scope

Flutter 负责自绘渲染与 Dart 逻辑，原生能力通过 Platform Channel 调用。

9.6.3 Structure

工程结构：lib/ + android/ + ios/ + pubspec.yaml。必会接口：MethodChannel、EventChannel、BasicMessageChannel、compute、runApp、Navigator.push。

9.6.4 Ecosystem

状态管理：Riverpod / Bloc / Provider；网络：dio / http；持久化：sqflite / Drift / Hive；导航：go_router；测试：flutter test / Patrol。

9.6.5 Depth Tiers

本子主题目标：L3。

9.6.6 Source

• Flutter Documentation
• Flutter Engine source
• 引用版本快照日期：2026-07-30。

10. 常见误区

• 把 Widget 当 UI；
• 用同步循环跑 CPU 任务；
• Platform Channel 序列化大对象；
• 不传约束直接套样式；
• 不开 Impeller；
• ignore 异步异常；
• 把 setState 当全局状态；
• 不上真机调试；
• 不知道 isolate 不共享内存；
• 不读 release notes。

11. 所有知识点分类（统一规则）

1. 编程语言；2. 数据结构与算法；3. 计算机基础；4. 工程技术；5. Web 与后端；6. 前端与客户端；7. 数据与人工智能；8. 项目与职业能力；9. 安全与可靠性。

本计划归属：前端与客户端 主 + 工程技术 辅。

代码块 1：自定义 Widget

// lib/widgets/greeting.dart
import 'package:flutter/material.dart';

class Greeting extends StatelessWidget {
  final String name;
  const Greeting({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Text('Hello, $name', style: Theme.of(context).textTheme.headlineSmall);
  }
}

代码块 2：isolate + compute

// lib/parse.dart
import 'dart:isolate';
import 'dart:convert';
import 'package:flutter/foundation.dart';

List<Map<String, dynamic>> parse(List<dynamic> raw) {
  return raw.cast<Map<String, dynamic>>();
}

Future<List<Map<String, dynamic>>> parseInBackground(String json) async {
  final raw = jsonDecode(json) as List<dynamic>;
  return compute(parse, raw);
}

代码块 3：Platform Channel

// lib/toast.dart
import 'package:flutter/services.dart';

class NativeToast {
  static const _ch = MethodChannel('demo.toast');
  static Future<void> show(String msg) => _ch.invokeMethod('show', {'msg': msg});
}

// ios/Runner/AppDelegate.swift
// import Flutter
// @objc class AppDelegate: FlutterAppDelegate {
//   override func application(...) -> Bool {
//     let controller = window?.rootViewController as! FlutterViewController
//     let ch = FlutterMethodChannel(name: "demo.toast", binaryMessenger: controller.binaryMessenger)
//     ch.setMethodCallHandler { call, result in
//       if call.method == "show",
//          let args = call.arguments as? [String: Any],
//          let msg = args["msg"] as? String {
//         // show UIAlertController
//         result(nil)
//       } else { result(FlutterMethodNotImplemented) }
//     }
//     return super.application(...)
//   }
// }

代码块 4：Widget / Element / RenderObject 三棵树

flowchart LR
  W[Widget: Text / Container / Row] --> E[Element: StatelessElement / StatefulElement]
  E --> R[RenderObject: RenderParagraph / RenderFlex]
  R --> L[Layout Pass]
  R --> P[Paint Pass]
  R --> C[Composite Pass]
  L --> Skia[Skia / Impeller]