DevDocs

主题

Flutter 复习知识点 ​

一份从入门到底层原理的系统性复习文档，覆盖 Dart 语言、Flutter 框架、状态管理、底层渲染、性能优化与常见面试题。文档面向已有基础的开发者，用词追求精准，避免概念混淆。

目录 ​

一、Dart 语言核心 ​

Dart 是 Flutter 的开发语言，由 Google 设计，发布于 2011 年。它是一门面向对象、类定义、单继承、带可选类型（strong mode 后为强类型静态检查）的语言，使用类 C 语法，原生支持 async/await，运行在自带虚拟机上（也可 AOT 编译为本地代码）。

1.1 类型系统 ​

Dart 2 起进入 strong mode，所有类型检查在编译期与运行期共同保证。Dart 是 soundly typed（健全类型）语言，意味着一个声明为 Animal 的变量绝不会指向 String 实例。

  • 所有非空对象的根类是 Object，所有可空对象的根类是 Object?。
  • dynamic 与 Object? 的区别：前者关闭静态检查，后者只是允许为 null 但仍受类型约束。
  • var 让编译器推断类型，写明类型则使用显式类型，二者在运行时等价（Dart 在运行时仍是单一 dispatch 的对象系统）。
  • Object 类型在编译期只暴露 hashCode、operator ==、toString 等基础成员，调用其他方法需先做类型提升或强制转换。
dart
Object o = 'hello';
if (o is String) {
  print(o.length); // 类型提升：此处 o 被识别为 String
}

泛型是 reified（具体化）的，运行时可读出类型参数，这一点与 Java 的类型擦除不同：

dart
List<int> a = [1, 2, 3];
print(a.runtimeType); // List<int>

1.2 Null Safety ​

Dart 在 2.12 引入 sound null safety。其语义：

  • 默认类型不可空（String 不能为 null）。
  • String? 显式表示可空，使用前必须判空或断言。
  • late 关键字：声明"现在不为空但稍后才初始化"，编译器允许延迟赋值；若在使用前未赋值，会抛出 LateInitializationError。
  • !（空断言）：将 T? 强制提升为 T，运行时若为 null 抛出异常。
  • ??、??= 提供空值合并语义。
dart
late final String token;
void login(String t) {
  token = t; // 必须在使用前赋值
}

late 还有一个常被忽略的能力：延迟初始化。配合 late final，初始化只会在第一次访问时执行，且线程安全（仅单线程 isolate 内）。

1.3 异步与并发 ​

Dart 是 单线程 模型（每个 isolate 一个线程），通过事件循环（event loop）驱动。两套队列：

  1. Microtask Queue（微任务队列）：高优先级，每次事件循环会先把微任务全部执行完，再处理事件队列。Future.microtask(...) 与 scheduleMicrotask(...) 入此队列。
  2. Event Queue（事件队列）：I/O、定时器、用户输入、Future 默认入此队列。
dart
Future(() => print('event 1'));
Future.microtask(() => print('microtask 1'));
Future(() => print('event 2'));

// 输出：microtask 1 → event 1 → event 2

async / await 是 Future 的语法糖。async 函数总是返回 Future；await 会暂停当前函数执行（不阻塞 isolate），把后续代码作为该 Future 完成时的回调注册。

Isolate 是 Dart 的并发单元。Isolate 之间不共享内存，只能通过消息传递（SendPort / ReceivePort）通信。这是 Dart 实现真正并行的唯一方式。

dart
Future<int> heavyCompute() async {
  return await compute(_work, 1000000); // Flutter 封装的 isolate 工具
}

int _work(int n) {
  var s = 0;
  for (var i = 0; i < n; i++) s += i;
  return s;
}

Isolate.run（Dart 2.19+）是更现代的 API，单次任务自动 spawn + 销毁；Isolate.spawn 用于长生命周期 isolate。

Completer 用于手动控制 Future 完成：

dart
Future<T> requestSomething() {
  final c = Completer<T>();
  onNativeEvent((result) => c.complete(result));
  return c.future;
}

Stream 是 Dart 中表示异步事件序列的抽象。Stream<T> 类似 Rx 的 Observable，单订阅流只能被一个 listener 监听，广播流（Stream.broadcast）支持多订阅。常用操作符：map / where / expand / asyncExpand / debounce（需 rxdart） / distinct / take / skip。

1.4 类与面向对象 ​

  • 类支持 构造函数：默认构造（与类同名）、命名构造（ClassName.named）、工厂构造（factory）。
  • factory 用于返回缓存实例或子类实例，对外伪装成普通构造调用。
  • 初始化列表在构造函数体之前执行，常用于 final 字段赋值与断言。
  • const 构造函数要求所有字段为 final，并编译期常量化，相同参数会返回同一个实例（canonicalized）。
dart
class Point {
  final double x;
  final double y;
  const Point(this.x, this.y);
  const Point.origin() : x = 0, y = 0;
}

Mixin 是 Dart 复用代码的主要手段（不支持多继承）。with 关键字混入，on 关键字限制只能作用于某个父类：

dart
mixin Logger on Object {
  void log(String m) => print(m);
}

Sealed Class（Dart 3+）表示封闭类层级，所有子类型必须在同一文件中声明。编译器据此做穷尽性检查（exhaustiveness），常用于状态机：

dart
sealed class LoadState<T> {}
class Loading<T> extends LoadState<T> {}
class Success<T> extends LoadState<T> { final T data; Success(this.data); }
class Failure<T> extends LoadState<T> { final Object error; Failure(this.error); }

Enum（Dart 2.17+ 增强枚举）可携带字段、实现接口、定义成员：

dart
enum HttpStatus { ok(200), notFound(404), serverError(500);
  const HttpStatus(this.code);
  final int code;
}

Extension：在不修改原类型的前提下添加方法：

dart
extension StringX on String {
  bool get isEmail => contains('@');
}

1.5 集合 API ​

Iterable 是不可懒序列的抽象，List / Set 是其常见实现。常用方法：map / where / fold / reduce / expand / forEach / any / every / toList() / toSet()。

注意 惰性求值：直到调用 toList / length 等终止操作前，map、where 不会真正执行。

Map 在 Dart 中是有序的（保持插入顺序，使用 LinkedHashMap 作为默认实现）。

1.6 内存管理 ​

Dart 使用 ** generational mark-sweep GC**（分代标记清除）。

  • 新生代（new space）：使用半空间复制算法，存放短生命周期对象。
  • 老生代（old space）：使用标记-清除 + 标记-压缩，存放长生命周期对象。

可达性分析从 roots 出发：全局变量、静态变量、当前 isolate 栈上的局部变量、PendingFinalizer 等。

Dart 没有析构函数。资源释放通过：

  • 显式调用 dispose()（如 TextEditingController.dispose()）。
  • try / finally 保证释放。
  • Finalizer（弱引用回调，对象被 GC 时触发，不保证立即执行）。

二、Flutter 框架入门 ​

Flutter 是 Google 推出的开源 UI 工具包，使用 Dart 编写，自身实现了一套完整的渲染管线，不依赖平台原生 UI 控件。一次编写，运行于 iOS / Android / Web / 桌面。

2.1 工程结构与启动流程 ​

my_app/
├── lib/              # Dart 源码（主入口 main.dart）
├── android/          # Android 原生工程
├── ios/              # iOS 原生工程
├── web/              # Web 工程
├── macos/ linux/ windows/  # 桌面工程
├── test/             # 单元与 Widget 测试
├── assets/           # 静态资源（图片、字体、JSON）
└── pubspec.yaml      # 包配置与依赖清单

启动入口是 lib/main.dart 的 main 函数。它通常调用 runApp(Widget)：

dart
void main() {
  runApp(const MyApp());
}

runApp 内部将根 Widget attach 到 WidgetsFlutterBinding，并最终生成 RenderView（渲染树的根）。WidgetsFlutterBinding 是一组 Binding 的聚合：

  • GestureBinding：手势识别。
  • ServicesBinding：平台消息（MethodChannel 等）。
  • SchedulerBinding：帧调度、定时器。
  • PaintingBinding：图片缓存、画刷。
  • SemanticsBinding：无障碍语义。
  • RendererBinding：渲染树与 pipeline。
  • WidgetsBinding：Widget 树管理。

2.2 Widget / Element / RenderObject 三棵树 ​

这是 Flutter 的核心抽象，理解三棵树是掌握 Flutter 的关键。

  • Widget：不可变（immutable）的 UI 配置描述。每次 setState 都会创建新的 Widget 实例。Widget 本身轻量，频繁创建/销毁没有性能负担。
  • Element：Widget 的实例化对象，可变（mutable），是 Widget 与 RenderObject 之间的桥梁。Element 维护树结构、生命周期、状态（StatefulElement 持有 State）。
  • RenderObject：真正负责测量、布局、绘制、hit-test 的对象，对应渲染管线中的实际工作单元。
dart
Widget widget = Container();   // 配置
Element element = widget.createElement(); // 树节点
RenderObject ro = widget.createRenderObject(...); // 渲染对象

2.3 StatefulWidget 生命周期 ​

StatefulWidget 是带状态的 Widget，状态保存在 State 对象中。State 的生命周期方法（按典型顺序）：

  1. createState()：Framework 调用，返回 State 实例。
  2. initState()：State 创建后调用一次，用于一次性初始化（订阅、Controller 创建等）。
  3. didChangeDependencies()：在 initState 之后调用；InheritedWidget 变化时也会触发。
  4. build()：返回 Widget 描述，可能被调用多次，必须为纯函数（不产生副作用）。
  5. didUpdateWidget(covariant oldWidget)：父 Widget 重建并传入新 Widget 时调用。
  6. setState()：标记 State 为 dirty，下一帧触发 rebuild。
  7. deactivate()：Element 从树中被移除时调用（可能被复用，如 key 变更后插入新位置）。
  8. dispose()：永久移除，释放资源（取消订阅、dispose Controller）。
dart
class _MyWidgetState extends State<MyWidget> {
  late final TextEditingController _c;
  StreamSubscription? _sub;

  @override
  void initState() {
    super.initState();
    _c = TextEditingController();
    _sub = someStream.listen(print);
  }

  @override
  void dispose() {
    _c.dispose();
    _sub?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) => TextField(controller: _c);
}

2.4 基础 Widget 与布局 ​

常用 Widget 速览：

类别Widget
文本Text / RichText / TextSpan
容器Container / SizedBox / Padding / DecoratedBox
布局Row / Column / Stack / Flex / Expanded / Flexible / Positioned / Wrap
滚动ListView / GridView / CustomScrollView / SingleChildScrollView
交互GestureDetector / InkWell / Listener / Dismissible
主题Theme / MaterialApp / CupertinoApp
对话框AlertDialog / ModalBottomSheet / SnackBar

布局核心是 Constraints（约束）系统：

  • 父级向子级传递约束（BoxConstraints，由 minWidth/maxWidth/minHeight/maxHeight 构成）。
  • 子级根据约束决定自身大小，再回报给父级。
  • 父级据此摆放子级位置。

Flex 布局（Row / Column） 通过 MainAxisSize、MainAxisAlignment、CrossAxisAlignment 控制主轴/交叉轴对齐。Expanded 与 Flexible 是 flex 因子，前者强制填满（tight），后者允许子级小于分配空间（loose）。

2.5 Material 与 Cupertino ​

Flutter 内置两套设计系统组件：

  • Material：Google 设计语言，对应 MaterialApp / Scaffold / AppBar 等，跨端一致。
  • **Cupertino**：iOS 风格组件，对应 CupertinoApp/CupertinoNavigationBar/CupertinoButton`。

可使用 Platform.isIOS 等条件渲染，或采用 flutter_platform_widgets 等库自动切换。

三、状态管理 ​

状态管理是 Flutter 工程的痛点，本质是解决"何时、如何把数据变化反映到 UI"的问题。

3.1 setState 与其边界 ​

setState 是内置方案，对短小、局部的状态有效。其执行流程：

  1. 调用 setState(fn)。
  2. Framework 标记当前 State 为 dirty。
  3. 下一帧调度时，对该 Element 调用 build。
  4. 子树按 Widget 类型复用或重建。

边界：

  • setState 只能重建调用它那个 State 对应的子树，跨组件传递状态会层层透传 props，引发"prop drilling"。
  • 全量 rebuild 会导致深层子树重建，需要用 const 与 Builder 优化。

3.2 InheritedWidget ​

Flutter 内置的依赖注入机制。子树中的 Widget 可以 dependOnInheritedWidgetOfExactType<T>() 获取上层提供的对象，当 InheritedWidget 变化时，所有依赖它的 Element 会 rebuild。

dart
class CounterScope extends InheritedWidget {
  final int count;
  const CounterScope({super.key, required this.count, required super.child});
  static int of(BuildContext ctx) =>
      ctx.dependOnInheritedWidgetOfExactType<CounterScope>()!.count;
  @override
  bool updateShouldNotify(CounterScope old) => count != old.count;
}

这是 Provider 的底层基础。需要注意 InheritedWidget 没有可变状态本身，需要配合 StatefulWidget 才能更新数据。

3.3 Provider ​

官方推荐的基础方案，对 InheritedWidget 的封装。核心 API：

  • ChangeNotifierProvider：监听 ChangeNotifier，调用 notifyListeners 时通知 UI 重建。
  • FutureProvider / StreamProvider：异步数据源。
  • ProxyProvider / ChangeNotifierProxyProvider：依赖其他 Provider 派生。
  • MultiProvider：组合多个 Provider。
  • context.watch<T>() / context.read<T>()：watch 重建依赖，read 单次读取。
dart
class CounterVM extends ChangeNotifier {
  int _c = 0;
  int get c => _c;
  void inc() { _c++; notifyListeners(); }
}

void main() => runApp(
  ChangeNotifierProvider(
    create: (_) => CounterVM(),
    child: const App(),
  ),
);

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final c = context.watch<CounterVM>().c;
    return Text('$c');
  }
}

3.4 Riverpod ​

Riverpod（作者同 Provider）是编译期安全、不依赖 BuildContext 的方案，2.x 起推荐使用 @riverpod 注解 + 代码生成。

dart
@riverpod
int counter(CounterRef ref) => 0;

class CounterNotifier extends _$CounterNotifier {
  @override
  int build() => 0;
  void inc() => state++;
}

特点：

  • Provider 可被任意位置 ref.watch / ref.read。
  • 自动 dispose：autoDispose 修饰符。
  • select 只监听切片，避免无关重建。
  • 与 AsyncValue 集成，统一处理 loading / data / error。

3.5 Bloc / Cubit ​

Bloc 是基于 Stream 的状态管理库，遵循单向数据流：Event → Bloc → State。Cubit 是简化版，省去 Event，直接通过方法 emit。

  • BlocBase：Cubit 与 Bloc 的基类。
  • on<E>(handler)：注册事件处理器。
  • emit(state)：发射新状态，会触发监听者 rebuild。
  • BlocBuilder：按 state rebuild。
  • BlocSelector：按 state 切片 rebuild，等价于 buildWhen。
  • BlocListener：副作用监听（弹 Toast、跳路由）。
  • BlocProvider：注入 Bloc，并管理 dispose。

大型项目分层（推荐 Clean Architecture）：

presentation/  Bloc / Widget
domain/        Entity / Repository(abstract) / UseCase
data/          Model / Repository(impl) / DataSource

3.6 选型对比 ​

方案上手成本适合场景缺点
setState极低局部状态、原型跨组件困难
Provider低中小型项目依赖 BuildContext
Riverpod中中大型、需要测试性学习曲线
Bloc中高大型、需要审计追踪样板代码多
GetX低快速交付架构规范弱
MobX中响应式偏好代码生成依赖

经验法则：小项目用 Provider；中大型项目用 Riverpod 或 Bloc；团队若偏好响应式可考虑 MobX。

四、导航与路由 ​

4.1 Navigator 1.0（命令式） ​

Navigator 维护一个 Route 栈，常用方法：

  • push(context, route)：压栈。
  • pop(context, [result])：出栈，可携带返回值。
  • pushReplacement / pushAndRemoveUntil：替换/批量移除。
  • pushNamed<T>(context, name, {arguments})：命名路由。

MaterialPageRoute 自带平台过渡动画；PageRouteBuilder 可自定义动画。

dart
Navigator.of(context).push(
  PageRouteBuilder(
    pageBuilder: (_, anim, __) => FadeTransition(opacity: anim, child: const DetailPage()),
  ),
);

4.2 go_router（声明式） ​

go_router 是官方维护的声明式路由库，支持深链、Web URL 同步、嵌套路由。

dart
final router = GoRouter(
  initialLocation: '/',
  routes: [
    ShellRoute(
      builder: (_, __, child) => MainShell(child: child),
      routes: [
        GoRoute(path: '/', builder: (_, __) => const HomePage()),
        GoRoute(path: '/detail/:id', builder: (_, s) => DetailPage(id: s.pathParameters['id']!)),
      ],
    ),
    GoRoute(path: '/login', builder: (_, __) => const LoginPage()),
  ],
  redirect: (ctx, state) {
    final auth = authBloc.state;
    if (auth is Unauthenticated && state.matchedLocation != '/login') return '/login';
    return null;
  },
  refreshListenable: authBloc, // Bloc 状态变化时重定向
);

MaterialApp.router(routerConfig: router);

关键概念：

  • ShellRoute：在不替换外壳的情况下嵌套子路由（如底部 Tab）。
  • redirect：全局拦截器，常用于登录态。
  • refreshListenable：状态源变化时自动重新计算 redirect。
  • GoRouterState：携带 pathParameters / queryParameters / uri。

4.3 深链与 Universal Links ​

  • Android：通过 AndroidManifest.xml 配置 <intent-filter>（deep link）或 Asset Statements（App Links）。
  • iOS：通过 Associated Domains（applinks: 前缀）+ apple-app-site-association 文件。
  • Flutter Web：go_router 自动同步 URL 到浏览器地址栏。

五、动画系统 ​

Flutter 动画分为 隐式动画（Implicit）与 显式动画（Explicit）两类。

5.1 隐式动画 ​

通过 AnimatedXxx 系列组件，传入新值后框架自动从旧值过渡到新值。常见：AnimatedContainer / AnimatedOpacity / AnimatedPositioned / AnimatedAlign / AnimatedSwitcher / TweenAnimationBuilder。

dart
AnimatedContainer(
  duration: const Duration(milliseconds: 300),
  curve: Curves.easeOutCubic,
  width: selected ? 200 : 100,
  color: selected ? Colors.blue : Colors.grey,
);

适合简单的属性变化，不需要精细控制。

5.2 显式动画 ​

显式使用 AnimationController + Tween + AnimatedBuilder。AnimationController 需要 TickerProvider（SingleTickerProviderStateMixin / TickerProviderStateMixin）。

dart
class _FlipState extends State<Flip> with SingleTickerProviderStateMixin {
  late final AnimationController _c;
  late final Animation<double> _anim;

  @override
  void initState() {
    super.initState();
    _c = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 800),
    )..repeat(reverse: true);
    _anim = CurvedAnimation(parent: _c, curve: Curves.elasticOut);
  }

  @override
  void dispose() { _c.dispose(); super.dispose(); }

  @override
  Widget build(BuildContext context) => RotationTransition(
    turns: _anim,
    child: const FlutterLogo(size: 80),
  );
}

Tween 定义值范围，CurvedAnimation 注入缓动函数，AnimationController 管理时间。

5.3 Hero 动画 ​

Hero 动画在两个路由间共享元素：旧页面 Hero 跑到屏幕顶层，做位置/尺寸过渡，新页面 Hero 接管。原理是在 Overlay 上插入一个独立 Layer，由 HeroController 协调。

dart
Hero(tag: 'avatar', child: Image.asset('a.png'));
// 第二个页面也用相同 tag
Hero(tag: 'avatar', child: Image.asset('a.png').blurred());

5.4 Stagger Animation ​

TweenSequence / Interval 用于组合多段 Tween，实现错峰动画：

dart
final fade = Tween<double>(begin: 0, end: 1).animate(
  CurvedAnimation(parent: _c, curve: const Interval(0.0, 0.5, curve: Curves.easeIn)),
);
final slide = Tween<Offset>(begin: Offset.zero, end: const Offset(1, 0)).animate(
  CurvedAnimation(parent: _c, curve: const Interval(0.5, 1.0, curve: Curves.easeOut)),
);

5.5 Lottie / Rive ​

  • Lottie：解析 After Effects 导出的 JSON，按帧渲染矢量动画。Lottie.asset('a.json')。
  • Rive：运行时动画 + 状态机，比 Lottie 更轻量、交互性更强。

六、网络与存储 ​

6.1 HTTP 请求 ​

http 包是官方轻量方案：

dart
final res = await http.get(Uri.parse('https://api.example.com/users'));
if (res.statusCode == 200) {
  final list = jsonDecode(res.body) as List;
  // ...
}

dio 提供更丰富特性：拦截器、取消令牌、FormData、超时、自动重试、文件下载。

dart
final dio = Dio(BaseOptions(baseUrl: 'https://api.example.com', connectTimeout: const Duration(seconds: 8)))
  ..interceptors.add(LogInterceptor())
  ..interceptors.add(InterceptorsWrapper(
    onRequest: (options, handler) {
      options.headers['Authorization'] = 'Bearer $token';
      handler.next(options);
    },
    onError: (e, handler) async {
      if (e.response?.statusCode == 401) {
        await refreshToken();
        return handler.resolve(await dio.fetch(e.requestOptions));
      }
      handler.next(e);
    },
  ));

6.2 JSON 序列化 ​

手写 fromJson / toJson 容易出错。推荐使用 json_serializable 或 freezed 代码生成：

dart
@freezed
class User with _$User {
  const factory User({
    required int id,
    required String name,
    @Default(false) bool isActive,
  }) = _User;

  factory User.fromJson(Map<String, dynamic> json) => _$UserFromJson(json);
}

freezed 同时提供 sealed class、copyWith、值相等性、不可变性。配合 @JsonSerializable(fieldRename: FieldRename.snake) 处理蛇形命名。

6.3 本地存储 ​

方案类型适用
shared_preferencesKV（XML/PLIST）少量基本类型
hiveNoSQL（box）中等结构化数据，纯 Dart
sqfliteSQLite关系型、复杂查询
drift（原 moor）SQLite + 类型安全复杂关系型
isarNoSQL（C 实现）大数据、高性能
flutter_secure_storageKeychain/Keystore敏感数据

6.4 文件系统与图片 ​

  • path_provider：获取应用文档目录、缓存目录、临时目录。
  • dart:io 的 File / Directory 操作文件。
  • Image.network 默认无缓存，应使用 cached_network_image，其内部用 flutter_cache_manager 缓存到磁盘。
  • precacheImage 可预加载图片到 ImageCache（默认 100MB / 1000 张）。

七、列表与性能优化 ​

7.1 ListView / GridView / Sliver ​

ListView.builder 实现懒加载，只在视口范围内 build 子项：

dart
ListView.builder(
  itemCount: 10000,
  itemExtent: 80, // 指定后无需测量每个 item，性能更优
  itemBuilder: (_, i) => ListTile(title: Text('Item $i')),
);

GridView.builder 同理，需要 SliverGridDelegate 控制列数与间距。

CustomScrollView 是 Sliver 世界入口，组合 SliverAppBar / SliverList / SliverGrid / SliverToBoxAdapter / SliverPersistentHeader 实现复杂滚动：

dart
CustomScrollView(
  slivers: [
    SliverAppBar(title: const Text('Demo'), pinned: true, expandedHeight: 200),
    SliverList(delegate: SliverChildBuilderDelegate((_, i) => ListTile(title: Text('$i')), childCount: 50)),
    SliverGrid(
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      delegate: SliverChildBuilderDelegate((_, i) => Container(color: Colors.blue.shade100), childCount: 30),
    ),
  ],
);

7.2 性能优化要点 ​

  • const Widget：相同参数的 const Widget 在编译期被 canonicalize，build 时直接复用，避免不必要的 rebuild。
  • RepaintBoundary：将独立绘制区域隔离，避免渲染影响扩散。
  • selector / buildWhen：精确订阅 State 切片，防止无关字段变化触发重建。
  • itemExtent / prototypeItem：避免 builder 模式下的尺寸测量。
  • ListView 复用：默认每次 build 都创建新 Widget；可考虑 const item。
  • 避免在 build 中做重活：不要在 build 里做循环、IO、复杂计算。
  • 图片优化：用合适分辨率、cacheWidth / cacheHeight 解码缩放。
  • 避免透明叠加：Opacity 会触发 saveLayer，开销大；优先用 Opacity 的替代品（如 AnimatedOpacity 内部优化、Visibility、Color 透明）。
  • dispose：所有 Controller、订阅、Stream 都要 dispose，避免内存泄漏。

7.3 DevTools ​

flutter pub global activate devtools 或 IDE 内置。常用面板：

  • Inspector：检视 Widget 树与 RenderObject 属性。
  • Performance：检测每帧耗时，找 jank 帧。
  • CPU Profiler：采样分析函数耗时。
  • Memory：堆快照、内存增长曲线。
  • Network：HTTP 请求时间线（需配合 dio/http 拦截）。

R8 / ProGuard 启用后，Profile 模式与 Release 模式行为有差异，性能测试应在 --profile 模式下进行。

八、Platform Channels 与原生集成 ​

业界 80%+ 的原生交互需求都被 pub.dev 上的成熟插件覆盖（见 8.9）。需要自己写 channel 的场景主要是：桥接公司内部 SDK、特定硬件外设、自研业务能力、复用已有原生模块。本节按方案逐一给出完整三端例子。

8.1 MethodChannel ​

最常用的双向方法调用通道。关键约束：

  • 消息编解码默认用 StandardMessageCodec，支持 null / bool / int / double / String / Uint8List / List / Map 等，嵌套也合法；自定义对象需通过手写 Map 转换或改用 Pigeon。
  • 平台端 handler 回调运行在平台主线程（Android Main、iOS Main）。耗时操作必须切线程，否则阻塞 UI 引发 jank。
  • Channel 名称在三端必须完全一致，推荐用反向域名风格：com.example.app/xxx。
  • 同一 Channel 可同时承载 Flutter → 原生与原生 → Flutter 双向调用。

完整例子：获取电量 + 反向通知充电状态 ​

Flutter 端

dart
import 'dart:io';
import 'package:flutter/services.dart';

class BatteryApi {
  static const _ch = MethodChannel('com.example.app/battery');

  /// Flutter 主动调用原生方法
  static Future<int> getLevel() async {
    try {
      final level = await _ch.invokeMethod<int>('getLevel');
      return level ?? -1;
    } on PlatformException catch (e) {
      // 原生端通过 result.error(...) 抛出的异常
      debugPrint('code=${e.code} message=${e.message} details=${e.details}');
      return -1;
    } on MissingPluginException {
      // 方法未实现
      return -1;
    }
  }

  /// 接收原生反向调用
  static void registerChargingCallback(void Function(bool charging) onEvent) {
    _ch.setMethodCallHandler((call) async {
      switch (call.method) {
        case 'onChargingChanged':
          onEvent(call.arguments as bool);
          return null;
        default:
          return null;
      }
    });
  }
}

// 使用
final level = await BatteryApi.getLevel();
BatteryApi.registerChargingCallback((c) => print('充电中: $c'));

Android 端（MainActivity.kt）

kotlin
package com.example.app

import android.content.BroadcastReceiver
import android.content.Context
import android.content.Intent
import android.content.IntentFilter
import android.os.BatteryManager
import android.os.Handler
import android.os.Looper
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine
import io.flutter.plugin.common.MethodChannel

class MainActivity : FlutterActivity() {
    private val CHANNEL = "com.example.app/battery"
    private lateinit var channel: MethodChannel

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)
        channel = MethodChannel(flutterEngine.dartExecutor.binaryMessenger, CHANNEL)

        // 注册方法处理器（默认在 Main 线程触发）
        channel.setMethodCallHandler { call, result ->
            when (call.method) {
                "getLevel" -> {
                    // 切到后台 IO 线程模拟耗时操作，再回到 Main 线程返回结果
                    Thread {
                        val level = readBatteryLevel()
                        runOnUiThread { result.success(level) }
                    }.start()
                }
                else -> result.notImplemented()
            }
        }

        // 注册系统广播：电量变化时反向通知 Flutter
        registerReceiver(
            object : BroadcastReceiver() {
                override fun onReceive(c: Context?, i: Intent?) {
                    val charging = i?.action == Intent.ACTION_POWER_CONNECTED
                    // 反向调用 Flutter 端方法（必须在主线程）
                    Handler(Looper.getMainLooper()).post {
                        channel.invokeMethod("onChargingChanged", charging)
                    }
                }
            },
            IntentFilter().apply {
                addAction(Intent.ACTION_POWER_CONNECTED)
                addAction(Intent.ACTION_POWER_DISCONNECTED)
            },
        )
    }

    private fun readBatteryLevel(): Int {
        val bm = getSystemService(BATTERY_SERVICE) as BatteryManager
        return bm.getIntProperty(BatteryManager.BATTERY_PROPERTY_CAPACITY)
    }
}

iOS 端（AppDelegate.swift）

swift
import Flutter
import UIKit

@main
class AppDelegate: FlutterAppDelegate {
    private var channel: FlutterMethodChannel?

    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
    ) -> Bool {
        let controller = window?.rootViewController as! FlutterViewController
        let ch = FlutterMethodChannel(
            name: "com.example.app/battery",
            binaryMessenger: controller.binaryMessenger
        )
        channel = ch

        ch.setMethodCallHandler { [weak self] call, result in
            guard let self else { return }
            switch call.method {
            case "getLevel":
                // UIDevice 必须在主线程访问，但耗时数据获取建议切到后台队列再回主线程
                UIDevice.current.isBatteryMonitoringEnabled = true
                DispatchQueue.global().async {
                    let level = Int(UIDevice.current.batteryLevel * 100)
                    DispatchQueue.main.async { result(level) }
                }
            default:
                result(FlutterMethodNotImplemented)
            }
        }

        // 监听电池状态变化反向通知
        NotificationCenter.default.addObserver(
            forName: UIDevice.batteryStateDidChangeNotification,
            object: nil, queue: .main
        ) { [weak self] _ in
            let charging = UIDevice.current.batteryState == .charging ||
                           UIDevice.current.batteryState == .full
            self?.channel?.invokeMethod("onChargingChanged", arguments: charging)
        }

        GeneratedPluginRegistrant.register(with: self)
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }
}

8.2 EventChannel ​

用于原生持续向 Flutter 推送事件（传感器、扫码枪、定位、状态变化）。底层仍是 MethodChannel，对外以 Stream 形式暴露，原生端实现 StreamHandler。

Flutter 端

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

const _ch = EventChannel('com.example.app/accelerometer');

Stream<List<double>> accelerometerStream() {
  return _ch.receiveBroadcastStream().map((e) {
    final list = (e as List).cast<double>();
    return list; // [x, y, z]
  });
}

// 使用
final sub = accelerometerStream().listen(
  (xyz) => print('x=${xyz[0]} y=${xyz[1]} z=${xyz[2]}'),
  onError: (e) => print('err: $e'),
  cancelOnError: true,
);

// 退出页面时必须 cancel，否则原生端 StreamHandler 不会触发 onCancel
sub.cancel();

Android 端：实现 EventChannel.StreamHandler，在 onListen 启动传感器监听，onCancel 释放。

kotlin
class AccelerometerProvider(private val context: Context) : EventChannel.StreamHandler {
    private var sensorManager: SensorManager? = null
    private var sensor: Sensor? = null
    private var listener: SensorEventListener? = null

    override fun onListen(args: Any?, events: EventChannel.EventSink) {
        val sm = context.getSystemService(Context.SENSOR_SERVICE) as SensorManager
        sensorManager = sm
        sensor = sm.getDefaultSensor(Sensor.TYPE_ACCELEROMETER)

        // 关键：SensorManager 回调在 Sensor 线程触发，
        // 而 EventSink.success 必须在主线程调用，否则抛 IllegalStateException
        val mainHandler = Handler(Looper.getMainLooper())
        listener = object : SensorEventListener {
            override fun onSensorChanged(e: SensorEvent) {
                val data = listOf(e.values[0].toDouble(), e.values[1].toDouble(), e.values[2].toDouble())
                mainHandler.post { events.success(data) }
            }
            override fun onAccuracyChanged(s: Sensor?, a: Int) {}
        }
        sm.registerListener(listener, sensor, SensorManager.SENSOR_DELAY_UI)
    }

    override fun onCancel(args: Any?) {
        sensorManager?.unregisterListener(listener)
        sensorManager = null
        sensor = null
        listener = null
    }
}

iOS 端：使用 CMMotionManager，onListen 启动 startDeviceMotionUpdates，onCancel 调用 stopDeviceMotionUpdates。

swift
class AccelerometerProvider: NSObject, FlutterStreamHandler {
    private let motion = CMMotionManager()
    private var eventSink: FlutterEventSink?

    func onListen(withArguments arguments: Any?, eventSink: @escaping FlutterEventSink) -> FlutterError? {
        self.eventSink = eventSink
        motion.deviceMotionUpdateInterval = 1.0 / 60.0
        motion.startDeviceMotionUpdates(to: .main) { [weak self] data, _ in
            guard let g = data?.gravity else { return }
            self?.eventSink?([g.x, g.y, g.z])
        }
        return nil
    }

    func onCancel(withArguments arguments: Any?) -> FlutterError? {
        motion.stopDeviceMotionUpdates()
        eventSink = nil
        return nil
    }
}

8.3 BasicMessageChannel ​

支持持续双向消息，可自定义 Codec。比 MethodChannel 更轻量，适合自定义协议、热消息流（如 IM 长连接回调）。

dart
final ch = BasicMessageChannel<String>('com.example.app/chat', StringCodec());
ch.setMessageHandler((msg) async {
  return 'echo: $msg'; // 返回值会回到原生侧
});

// 主动发送
final reply = await ch.send('hello');

可选 Codec：StringCodec、JSONMessageCodec、BinaryCodec、StandardMessageCodec。

8.4 Pigeon（推荐方案） ​

通过 DSL 定义接口，运行代码生成器产出 Dart / Kotlin / Swift 三端类型安全代码。新项目优先选 Pigeon，避免手动类型转换出错。

8.4.1 添加依赖与定义接口 ​

pubspec.yaml：

yaml
dev_dependencies:
  pigeon: ^22.0.0

接口文件 pigeons/api.dart（只用于代码生成，不参与运行时）：

dart
import 'package:pigeon/pigeon.dart';

@ConfigurePigeon(PigeonOptions(
  dartOut: 'lib/src/messages.g.dart',
  kotlinOut: 'android/src/main/kotlin/com/example/app/Messages.g.kt',
  kotlinOptions: KotlinOptions(package: 'com.example.app'),
  swiftOut: 'ios/Runner/Messages.g.swift',
))

// 自定义数据类（Pigeon 自动生成对应 Kotlin data class / Swift struct）
class BatteryInfo {
  final int level;
  final bool isCharging;
  final String? deviceId; // 可空字段
  BatteryInfo({required this.level, required this.isCharging, this.deviceId});
}

// Flutter 调用原生的接口
@HostApi()
abstract class BatteryHostApi {
  @async
  BatteryInfo getBatteryInfo();

  void setLowPowerThreshold(int percent);
}

// 原生调用 Flutter 的接口
@FlutterApi()
abstract class BatteryFlutterApi {
  void onThresholdReached(int currentLevel);
}

8.4.2 生成代码 ​

bash
dart run pigeon --input pigeons/api.dart

8.4.3 Flutter 端使用 ​

dart
import 'package:flutter/services.dart';
import 'src/messages.g.dart'; // 自动生成

Future<BatteryInfo> fetchBattery() async {
  // BatteryHostApi 内部已封装好 MethodChannel，无需手动写
  return await BatteryHostApi().getBatteryInfo();
}

// 注册被原生反向调用的回调
void registerFlutterApi() {
  BatteryFlutterApi.setUp(BatteryFlutterApi(
    onThresholdReached: (level) => print('低电量: $level'),
  ));
}

8.4.4 Android 端实现 ​

kotlin
class BatteryHostApiImpl : BatteryHostApi {
    override fun getBatteryInfo(cb: Result<BatteryInfo>) {
        // 后台线程处理，完成后回主线程 cb.success(...)
        Thread {
            val info = BatteryInfo(level = readLevel(), isCharging = isCharging())
            Handler(Looper.getMainLooper()).post { cb.success(info) }
        }.start()
    }
    override fun setLowPowerThreshold(percent: Long) { /* 保存阈值 */ }
    private fun readLevel(): Long { /* ... */ }
}

class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(fe: FlutterEngine) {
        super.configureFlutterEngine(fe)
        BatteryHostApi.setUp(fe.dartExecutor.binaryMessenger, BatteryHostApiImpl())
    }
}

8.4.5 iOS 端实现 ​

swift
class BatteryHostApiImpl: NSObject, BatteryHostApi {
    func getBatteryInfo(completion: @escaping (BatteryInfo?, FlutterError?) -> Void) {
        DispatchQueue.global().async {
            let info = BatteryInfo(level: Int32(self.readLevel()), isCharging: self.isCharging())
            DispatchQueue.main.async { completion(info, nil) }
        }
    }
    func setLowPowerThreshold(_ percent: Int32, error: AutoreleasingUnsafeMutablePointer<FlutterError?>) {
        // ...
    }
}

// AppDelegate 注册
BatteryHostApiSetup.setUp(binaryMessenger: controller.binaryMessenger, api: BatteryHostApiImpl())

Pigeon 的优势：

  • 三端类型一致，编译期发现签名不匹配。
  • 自动处理 PlatformException → Dart 异常转换。
  • @async 自动生成 callback 机制，避免阻塞调用方。
  • 支持 enum、嵌套对象、List、Map、可空字段。
  • 配合 Add-to-App 同样适用。

8.5 PlatformView（嵌入原生视图） ​

把原生 View 嵌进 Widget 树。Android 有三种实现模式：

模式引入版本特点
Virtual Display早期 Flutter把原生 view 渲染到虚拟 Display，再合成纹理。触摸坐标传递不准确，无法响应输入法，已不推荐。
Hybrid CompositionFlutter 1.20原生 view 与 Flutter widget 直接合成，互操作最好，但需 Android API 23+，存在线程同步开销。
Texture Layer Hybrid CompositionFlutter 3.0当前默认。把原生 view 内容渲染成纹理，再由 Flutter 合成。性能与互操作兼顾，是 webview_flutter、地图等插件目前采用的方案。

iOS 上 UiKitView 只有一种实现（基于 Texture Layer），互操作与性能均较好。

完整例子：嵌入一个原生 TextView + UILabel ​

Flutter 端

dart
// Android 端
AndroidView(
  viewType: 'com.example.app/native-label',
  creationParams: const {'text': 'Hello from Flutter', 'size': 18.0},
  creationParamsCodec: const StandardMessageCodec(),
)

// iOS 端
UiKitView(
  viewType: 'com.example.app/native-label',
  creationParams: const {'text': 'Hello from Flutter', 'size': 18.0},
  creationParamsCodec: const StandardMessageCodec(),
)

Android 端

kotlin
class NativeLabelFactory : PlatformViewFactory(StandardMessageCodec.INSTANCE) {
    override fun create(context: Context, viewId: Int, args: Any?): PlatformView {
        val params = (args as? Map<*, *>)?.mapKeys { it.key as String } ?: emptyMap()
        return NativeLabelView(context, params)
    }
}

class NativeLabelView(context: Context, params: Map<String, Any>) : PlatformView {
    private val textView = TextView(context).apply {
        text = params["text"] as? String ?: ""
        textSize = (params["size"] as? Number)?.toFloat() ?: 14f
    }
    override fun getView(): View = textView
    override fun dispose() {} // 释放资源
}

// 在 MainActivity 或 Plugin 中注册
class MainActivity : FlutterActivity() {
    override fun configureFlutterEngine(fe: FlutterEngine) {
        super.configureFlutterEngine(fe)
        fe.platformViewRegistry.registerViewFactory(
            "com.example.app/native-label", NativeLabelFactory()
        )
    }
}

iOS 端

swift
class NativeLabelFactory: NSObject, FlutterPlatformViewFactory {
    func create(withFrame frame: CGRect,
                viewIdentifier viewId: Int64,
                arguments args: Any?) -> FlutterPlatformView {
        return NativeLabelView(frame: frame, args: args as? [String: Any])
    }
    func createArgsCodec() -> FlutterMessageCodec & NSObjectProtocol {
        return FlutterStandardMessageCodec.sharedInstance
    }
}

class NativeLabelView: NSObject, FlutterPlatformView {
    private let label = UILabel()
    init(frame: CGRect, args: [String: Any]?) {
        super.init()
        label.text = args?["text"] as? String
        label.font = .systemFont(ofSize: (args?["size"] as? CGFloat) ?? 14)
    }
    func view() -> UIView { return label }
}

// AppDelegate 注册
let controller = window?.rootViewController as! FlutterViewController
controller.platformViewRegistry.register(
    NativeLabelFactory(), forViewFactory: "com.example.app/native-label"
)

性能注意 ​

  • PlatformView 在快速滚动 / 复杂动画场景下会出现掉帧，尤其 Android Hybrid Composition 模式。
  • 尽量避免在 ListView 中大量嵌入 PlatformView。
  • 若仅需展示内容（地图缩略图、二维码、相机预览帧），考虑用 Texture widget 而不是 PlatformView，性能更好——Texture 是把原生侧渲染的纹理帧"贴"到 Flutter 中，原生 view 不实际入树。

8.6 dart:ffi ​

直接调用动态库，绕过 Platform Channel，无主线程开销，适合密集计算（图像处理、加解密、模型推理）。

dart
import 'dart:ffi';
import 'dart:io';
import 'package:ffi/ffi.dart';

// 1. 加载动态库
final DynamicLibrary dylib = Platform.isMacOS
    ? DynamicLibrary.open('libnative.dylib')
    : Platform.isWindows
        ? DynamicLibrary.open('native.dll')
        : DynamicLibrary.open('libnative.so');

// 2. 定义函数签名（Native 与 Dart 两个 typedef）
typedef NativeAdd = Int32 Function(Int32 a, Int32 b);
typedef DartAdd = int Function(int a, int b);

// 3. 查找并绑定
final add = dylib.lookupFunction<NativeAdd, DartAdd>('add');
print(add(1, 2));

// 处理字符串与指针
typedef NativeReverse = Pointer<Utf8> Function(Pointer<Utf8>);
typedef DartReverse = Pointer<Utf8> Function(Pointer<Utf8>);
final reverse = dylib.lookupFunction<NativeReverse, DartReverse>('reverse');
final input = 'hello'.toNativeUtf8();
final result = reverse(input);
print(result.toDartString());

// 必须手动释放 malloc 的内存
calloc.free(input);
calloc.free(result);

package:ffigen 根据 C 头文件自动生成 Dart 绑定，避免手写大量 typedef。dart:ffi 在 Web 平台不支持（需用 JS interop 替代）。

FFI 中的内存管理选项：

分配器特点
malloc直接对应 C malloc/free，不初始化内存
calloc分配并清零
arena自动释放作用域内所有指针，推荐
dart
using((arena) {
  final p = 'data'.toNativeUtf8(allocator: arena);
  final q = arena<Int32>(10);
  // 退出 using 块时统一释放
});

8.7 Plugin 工程结构 ​

当 Channel 逻辑需要复用或对外发布，应封装为 Plugin 工程：

bash
flutter create --template=plugin --platforms=android,ios -a kotlin -i swift my_plugin

目录结构：

my_plugin/
├── lib/                      # Dart API（对外暴露）
│   └── my_plugin.dart
├── android/                  # Android 实现
│   └── src/main/kotlin/.../MyPlugin.kt
├── ios/                      # iOS 实现
│   └── Classes/MyPlugin.swift
├── example/                  # 示例工程
└── pubspec.yaml

MyPlugin.kt（实现 FlutterPlugin）：

kotlin
class MyPlugin : FlutterPlugin, MethodCallHandler {
    private lateinit var channel: MethodChannel

    override fun onAttachedToEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        channel = MethodChannel(binding.binaryMessenger, "my_plugin")
        channel.setMethodCallHandler(this)
    }

    override fun onMethodCall(call: MethodCall, result: Result) {
        when (call.method) {
            "doSomething" -> result.success("ok")
            else -> result.notImplemented()
        }
    }

    override fun onDetachedFromEngine(binding: FlutterPlugin.FlutterPluginBinding) {
        channel.setMethodCallHandler(null)
    }
}

MyPlugin.swift（实现 FlutterPlugin）：

swift
public class MyPlugin: NSObject, FlutterPlugin {
    public static func register(with registrar: FlutterPluginRegistrar) {
        let channel = FlutterMethodChannel(name: "my_plugin", binaryMessenger: registrar.messenger())
        registrar.addMethodCallDelegate(MyPlugin(), channel: channel)
    }
    public func handle(_ call: FlutterMethodCall, result: @escaping FlutterResult) {
        switch call.method {
        case "doSomething": result("ok")
        default: result(FlutterMethodNotImplemented)
        }
    }
}

发布：flutter pub publish 上传到 pub.dev；私有团队仓库可使用 Git 引用：

yaml
dependencies:
  my_plugin:
    git:
      url: git@github.com:company/my_plugin.git
      ref: main

8.8 Add-to-App（已有原生 App 集成 Flutter） ​

把 Flutter 模块作为依赖嵌入现有原生 App：

  • Android：在 settings.gradle 引入 flutter_module，启动 FlutterActivity / FlutterFragment / FlutterView。
  • iOS：CocoaPods 引入 flutter_module，使用 FlutterEngine 与 FlutterViewController。
  • 推荐预热 Engine：App 启动时创建 FlutterEngine cache，避免首次进入 Flutter 页面的启动延迟。
  • 双向通信走 Platform Channel 或 Pigeon 定义的接口。

适合场景：渐进式迁移、混合栈管理、复用原生登录/支付模块。这是目前主流 App（如字节、阿里、BMW、阿里巴巴闲鱼等）使用 Flutter 的典型形态。

8.9 业界常用插件清单 ​

大多数团队直接使用以下成熟插件，避免自建 channel：

类别主流插件
启动外部 App / URLurl_launcher
文件 / 目录path_provider、file_picker
相机 / 相册image_picker、camera、photo_manager
定位geolocator
生物识别local_auth
推送通知firebase_messaging、flutter_local_notifications
权限申请permission_handler
设备信息device_info_plus
网络状态connectivity_plus
WebViewwebview_flutter（默认 TLHC 模式）
分享share_plus
联系人contacts_service
应用内购买in_app_purchase
支付pay（Apple Pay/Google Pay）、第三方 SDK 包装
传感器sensors_plus
包信息package_info_plus
剪贴板Flutter 内置 Clipboard.setData/getData
加密 / Keychainflutter_secure_storage

自建 Channel 的典型场景：

  • 公司内部 SDK（埋点、IM、音视频）需要 Dart 接入。
  • 特定硬件外设（扫码枪、打印机、BLE 设备）需要自定义协议。
  • 已有原生模块复用，不愿重写。
  • 业务深度定制（特殊相机预览、自研播放器、自研地图）。

8.10 常见坑与最佳实践 ​

  • 主线程阻塞：原生 handler 在主线程触发，重活必须 Thread {} / DispatchQueue.global().async，结果再回主线程返回。
  • Channel 名不一致：三端必须完全一致，建议在常量文件统一维护。
  • EventSink 线程安全：Android 平台上 events.success(...) 必须在主线程调用，否则抛 IllegalStateException；解决方法是 Handler(Looper.getMainLooper()).post { ... }。
  • 资源释放：setMethodCallHandler(null)、unregisterListener、stopDeviceMotionUpdates 必须成对出现，否则内存泄漏。
  • 平台版本兼容：Android minSdkVersion、iOS deployment target 需匹配 API；用 Build.VERSION.SDK_INT / if #available(...) 做版本判断。
  • 序列化限制：自定义对象无法直接传，必须 Map 化或用 Pigeon。
  • 不要在 Channel 中传大数据：超过几 MB 的数据建议走 BasicMessageChannel 分块传输，或写文件后传路径。
  • Plugin 懒加载：plugin 在 GeneratedPluginRegistrant 中按需注册，原生端不要在 plugin 注册时做重活。
  • 热重载不重载原生代码：原生改动需要重新 flutter run。
  • 测试隔离：Channel 单测中 TestDefaultBinaryMessengerBinding 可拦截 channel 消息，方便 mock 原生响应。

九、底层原理深入 ​

这是区分初级与中高级 Flutter 工程师的关键章节。

9.1 整体架构 ​

Flutter 分三层：

┌─────────────────────────────────────────────┐
│ Framework (Dart)                            │
│ ┌─────────────────────────────────────────┐ │
│ │ Material / Cupertino                    │ │
│ ├─────────────────────────────────────────┤ │
│ │ Widgets                                 │ │
│ ├─────────────────────────────────────────┤ │
│ │ Rendering                               │ │
│ ├─────────────────────────────────────────┤ │
│ │ Painting / Gestures / Animation         │ │
│ └─────────────────────────────────────────┘ │
├─────────────────────────────────────────────┤
│ Engine (C++)                                │
│ Skia / Impeller · Dart VM · Text (LibTxt)   │
├─────────────────────────────────────────────┤
│ Embedder (Platform-specific)                │
│ iOS / Android / Windows / macOS / Linux     │
└─────────────────────────────────────────────┘
  • Framework：纯 Dart 实现，开发者直接使用。
  • Engine：C++ 实现，包含 Dart VM、Skia（或 Impeller）、文本排版（LibTxt / HarfBuzz / Minikin）。
  • Embedder：平台特定代码，负责把 Engine 接入各平台的事件循环、窗口系统、输入子系统。

9.2 渲染引擎：Skia 与 Impeller ​

  • Skia：开源 2D 图形库，Flutter 自诞生起一直使用。基于 CPU 的命令录制 + GPU 渲染（OpenGL / Metal / Vulkan 后端）。Skia 在每帧录制 Scene 对象，提交给 Rasterizer 线程。
  • Impeller：Flutter 3.7 起预览、3.10 起在 iOS 默认启用的新一代渲染器。预编译 Shader（解决 SkSL 编译卡顿）、显式 API（Metal / Vulkan）、更现代的渲染管线。Android 在 Flutter 3.16 起逐步默认。

Impeller 的核心动机之一：SkSL jank。Skia 在运行时为每种 Shader 状态组合编译 SkSL，第一次出现时会引起卡帧。Impeller 预编译所有 Shader，消除这一类问题。

9.3 三棵树详解 ​

Widget Tree ​

Widget 是不可变配置。它的 createElement() 调用一次，被插入到 Element Tree。Widget 的 == 通常基于运行时类型与 Key 比较是否相同。

Element Tree ​

Element 是有状态、可变的树节点，是 Widget 在某个位置的"实例化对象"。三种 Element：

  • ComponentElement：组合型，本身不渲染（如 StatelessElement、StatefulElement）。
  • RenderObjectElement：持有 RenderObject（如 LeafRenderObjectElement、SingleChildRenderObjectElement、MultiChildRenderObjectElement）。
  • ProxyElement：代理型（如 InheritedElement）。

Element 通过 update(child) 与 mount(parent, newSlot) 维护树结构。当 Widget 变化但类型与 Key 相同时，复用 Element，调用 update(newWidget)；否则 unmount 旧 Element，mount 新 Element。

RenderObject Tree ​

RenderObject 真正负责：

  1. performLayout()：根据父级约束计算自身 size，并对子级 layout。
  2. performResize()：根据 constraints 决定 size。
  3. paint(PaintingContext, Offset)：绘制自身与子级。
  4. hitTestChildren / hitTestSelf：参与点击测试。

约束流向"自上而下"，size 流向"自下而上"。

9.4 Reconciliation 算法（diff） ​

Widget.canUpdate(old, new) 判断两个 Widget 是否能复用同一 Element：

dart
static bool canUpdate(Widget old, Widget new) {
  return old.runtimeType == new.runtimeType && old.key == new.key;
}
  • 若可复用：调用 Element.update，将新 Widget 注入，触发 build。
  • 不可复用：旧 Element 被卸载，新 Element 被挂载。

GlobalKey 跨树复用 Element：当 Widget 带 GlobalKey 时，Element 在 unmount 后保留在全局表里，再次 mount 时若找到匹配则迁移过去。常用于跨页面保持 State。

Key 用于在同父节点下区分同类型子项（如 ListView 中可拖拽的 item）。

9.5 Build / Layout / Paint / Composite 四阶段 ​

每帧流水线（位于 RendererBinding）：

┌─────────┐   ┌─────────┐   ┌──────┐   ┌───────────┐
│ Widgets │ → │ Build   │ → │ Lay- │ → │ Paint     │
│  dirty  │   │ Owner   │   │ out  │   │ Compositor│
└─────────┘   └─────────┘   └──────┘   └───────────┘
                              ↑
                       PipelineOwner
  1. Build 阶段：BuildOwner.buildScope 遍历 dirty Element，调用 rebuild → build / State.build。此阶段只产出新的 Widget 树。
  2. Layout 阶段：PipelineOwner.flushLayout 遍历 dirty RenderObject，自顶向下传约束，自底向上回 size。markNeedsLayout 标记 dirty。
  3. Paint 阶段：PipelineOwner.flushPaint 遍历 dirty RenderObject，生成 Picture 与 Layer 树。markNeedsPaint 标记 dirty。
  4. Composite 阶段：RendererBinding.drawFrame 把 Layer 树提交给 Engine，Engine 转换为 Skia / Impeller 命令，在 Raster 线程渲染。

9.6 setState 的工作流 ​

dart
setState(() { _count++; });

内部实际调用 State.setState → _element!.markNeedsBuild()。Element 标记自身为 _dirty = true，加入 BuildOwner._dirtyElements。

下一帧（SchedulerBinding.handleBeginFrame → handleDrawFrame）触发 BuildOwner.buildScope，按 Element 深度排序后依次 rebuild，调用对应 State 的 build，生成新 Widget 树，触发 reconciliation。

9.7 Vsync 与帧调度 ​

Flutter 的 UI 线程通过 PlatformDispatcher.onBeginFrame 接收 vsync 信号（默认 60Hz / 120Hz）。Ticker 是动画的"心跳"，它在 vsync 间触发回调，传入经过 vsync 偏移的 Duration。

SchedulerBinding 有四个调度优先级：

  • transientCallbacks：动画帧回调（Ticker）。
  • midFrameTasks：内部用。
  • persistentCallbacks：持久帧回调（如 RendererBinding 的 drawFrame）。
  • postFrameCallbacks：帧结束后回调（常用于"等当前帧画完再做某事"）。

WidgetsBinding.instance.addPostFrameCallback((_) => ...) 在一帧渲染完成后回调，常用于"在 build 完成后获取 size"。

9.8 事件循环与线程模型 ​

Flutter App 通常包含四个线程（不同平台略有差异）：

  1. Platform Thread：原生 UI 线程（Android Main / iOS Main），处理原生输入、平台插件调用。
  2. UI Thread（Dart Main Isolate）：Dart 代码执行，build、layout、paint 主线程。
  3. Raster Thread（原 GPU Thread）：执行 Skia / Impeller 的渲染命令。
  4. IO Thread：执行图像解码等慢速 IO（避免阻塞 Raster）。

UI 线程的事件循环处理 Dart 代码的所有异步任务（见 1.3）。Platform Channel 在 Platform Thread 与 UI Thread 之间传递消息，序列化基于 StandardMessageCodec。

9.9 Dart VM 与 AOT/JIT ​

Dart 支持两种编译模式：

  • JIT（Just-In-Time）：开发模式使用。Dart 源码编译为 kernel（.dill），运行时由 Dart VM 解释 / JIT 编译为机器码，支持热重载（hot reload）。
  • AOT（Ahead-Of-Time）：发布模式使用。编译期把 Dart kernel 通过 gen_snapshot 编译为本地机器码（Android ARM64 / iOS ARM64 等），运行时不再有 VM 解释，启动更快、内存更低、性能更高。

AOT 模式启用 Tree Shaking：编译期分析出未被引用的代码并剔除，减少包体。这也是为什么发布包不包含 assert 与仅在调试用的代码。

9.10 渲染流水线全貌 ​

Platform Thread       UI Thread            Raster Thread        Display
     │                     │                      │                  │
     │── vsync ───────────▶│                      │                  │
     │                     │── build ──────────┐  │                  │
     │                     │── layout ─────────┘ │                  │
     │                     │── paint (Layer) ────┼─▶ encode Scene ──┤
     │                     │                      │── Skia/Impeller ─┤
     │                     │                      │                  │── 显示

理想情况下一帧总耗时 ≤ 16.67ms（60Hz）或 8.33ms（120Hz）。任何阶段超时都会掉帧。

十、测试体系 ​

10.1 测试金字塔 ​

      ┌─────────────────────┐
      │   End-to-End (少)    │  integration_test / 马蹄 / Appium
      ├─────────────────────┤
      │  Widget Test (中)    │  flutter_test
      ├─────────────────────┤
      │  Unit Test (多)      │  test
      └─────────────────────┘

10.2 单元测试 ​

dart
import 'package:test/test.dart';

void main() {
  group('Calculator', () {
    test('adds correctly', () {
      expect(Calculator().add(1, 2), 3);
    });
  });
}

mocktail 是常用 mock 库（语法对 final 类、回调友好）：

dart
class MockRepo extends Mock implements UserRepo {}
when(() => repo.fetch()).thenAnswer((_) async => [User(1)]);

10.3 Widget 测试 ​

dart
testWidgets('Counter increments', (tester) async {
  await tester.pumpWidget(MaterialApp(home: CounterPage()));
  expect(find.text('0'), findsOneWidget);
  await tester.tap(find.byIcon(Icons.add));
  await tester.pump();
  expect(find.text('1'), findsOneWidget);
});

关键 API：pumpWidget（启动）、tap / enterText（交互）、pump / pumpAndSettle（推进动画/帧）、find.byXxx（查找）、expect(..., findsOneWidget)。

10.4 Integration Test ​

integration_test 包提供在真机/模拟器上的端到端测试：

dart
testWidgets('Login flow', (tester) async {
  app.main();
  await tester.pumpAndSettle();
  await tester.enterText(find.byKey(const Key('email')), 'a@b.com');
  await tester.tap(find.byKey(const Key('submit')));
  await tester.pumpAndSettle();
  expect(find.text('Welcome'), findsOneWidget);
});

10.5 bloc_test ​

dart
blocTest<CounterBloc, CounterState>(
  'emits [1, 2] when incremented twice',
  build: () => CounterBloc(),
  act: (b) => b..add(Increment())..add(Increment()),
  expect: () => [const CounterState(1), const CounterState(2)],
);

10.6 Golden Test ​

matchesGoldenFile('goldens/counter.png') 把渲染结果与基线图对比，用于回归 UI。CI 中需确保字体与渲染一致。

十一、工程化与发布 ​

11.1 多 Flavor ​

Android：在 android/app/build.gradle 配置 flavorDimensions 与 productFlavors，每个 flavor 独立 applicationIdSuffix 与 icon。

iOS：在 Xcode 创建多个 Target 或 Scheme，配合 xcconfig 文件区分 Bundle ID、display name、icon。

Dart 侧通过 --flavor 与 --dart-define 读取环境变量：

bash
flutter run --flavor dev --dart-define=API_BASE=https://dev.api
dart
const apiBase = String.fromEnvironment('API_BASE', defaultValue: '');

11.2 混淆与符号 ​

发布构建启用混淆，分离调试符号：

bash
flutter build apk --release --obfuscate --split-debug-info=./symbols

崩溃上报时把 stack trace 与 symbols 目录一起上传到 flutter symbolize 还原。这是 Flutter 排查线上崩溃的标准姿势。

11.3 Android 打包 ​

  • APK：单一安装包，体积大。
  • AAB（Android App Bundle）：上传 Google Play 的标准格式，按设备 ABI / density / language 分发，体积小。
  • 启用 R8（默认）做代码缩减与资源压缩。

ABI 拆分：

bash
flutter build apk --split-per-abi

11.4 iOS 打包 ​

  1. flutter build ipa 生成 .ipa。
  2. Xcode Archive → Distribute（App Store / Ad Hoc / Enterprise）。
  3. 配置 Signing & Capabilities：Team、Bundle ID、Provisioning Profile。
  4. Info.plist 配置隐私权限文案（NSCameraUsageDescription 等）。

11.5 Web / 桌面 ​

bash
flutter build web --web-renderer canvaskit  # 或 html
flutter build macos --release
flutter build windows --release
flutter build linux --release

Web 渲染器：

  • CanvasKit（默认）：基于 WASM + WebGL，与原生渲染一致但首屏稍慢。
  • html：DOM + CSS，体积小但渲染保真度低。

11.6 CI/CD ​

  • Fastlane：自动化 Android / iOS 发布。
  • Codemagic / GitHub Actions：常用 CI 平台。
  • shorebird（Android）：Code Push 解决方案，可绕过应用商店热更新 Dart 代码（iOS 暂不支持）。

十二、常见面试题精讲 ​

下面题目按主题归类，附要点解析。建议先思考再对照答案。

Dart 部分 ​

Q1：dynamic、Object、Object? 三者的区别？

  • Object?：所有类型的父类，可为 null，编译期只允许调用 Object 上声明的方法。
  • Object：所有非空类型的父类，编译期保证非空。
  • dynamic：关闭静态类型检查，编译期允许任何成员调用，运行时才报错。

Q2：Future 与 Stream 的区别？

Future 表示一个"将来会产生"的值，单值单次。Stream 表示异步事件序列，多值多次，可看作"异步的 Iterable"。Future.wait 并行多个 Future；Stream.asyncMap 对每个元素异步转换。

Q3：Dart 是单线程还是多线程？如何做并发？

Dart 在每个 isolate 内是单线程的，通过事件循环驱动。并发靠 isolate：Isolate.run 一次性执行任务、Isolate.spawn 长生命周期 isolate、compute 是 Flutter 对 Isolate.run 的封装。Isolate 间不共享内存，靠 SendPort / ReceivePort 通信。

Q4：await for 是什么？

await for (var x in stream) { ... } 是对流元素的迭代，会等待每个事件；流结束或抛错时退出。常用于消费有限流。

Q5：Dart 的 const 与 final 区别？

final 只能赋值一次，运行时确定。const 编译期常量，必须能在编译期求值；const 构造函数创建的对象在内存中只存在一份（canonicalized）。const 还能作为默认参数值、注解参数。

Q6：Dart 的 GC 算法？

分代标记-清除。新生代用半空间复制（Scavenge），老生代用标记-清除 + 标记-压缩。Dart 没有 finalize 析构，资源释放依赖显式 dispose / Finalizer。

Q7：late 的几种用途？

  1. 延迟初始化（声明时未赋值，使用前赋值）。
  2. 避免循环依赖（A 引用 B、B 引用 A 时，可以延迟到 init 时再赋值）。
  3. 性能优化（懒加载昂贵资源）。

注意 late 变量未初始化就使用会抛 LateInitializationError。

Flutter 基础 ​

Q8：Widget、Element、RenderObject 的关系？

Widget 是不可变配置，Element 是有状态实例，RenderObject 是渲染对象。三棵树通过 createElement / createRenderObject 关联。Widget 频繁重建很轻量，因为 Element 与 RenderObject 通过 canUpdate 复用，避免昂贵的 layout / paint。

Q9：StatefulWidget 的生命周期？调用顺序？

createState → initState → didChangeDependencies → build → (didUpdateWidget, setState 循环) → deactivate → dispose。initState 只调一次，build 可能调多次。

Q10：const Widget 为什么能提升性能？

const Widget 在编译期创建并被 canonicalize，运行时是同一个实例，Element 在 build 时通过 == 判断可直接复用旧 Widget，跳过重建。配合 const 嵌套可大幅减少 rebuild 范围。

Q11：Key 的作用？什么时候需要？

Key 用于区分同类型 Widget 实例，决定 Element 是否复用。在动态列表（增删、排序、拖拽）场景下必须使用，否则 State 会错误地绑到另一个 Widget 上。ValueKey 适合简单标识，GlobalKey 用于跨树复用 State，UniqueKey 强制不复用。

Q12：BuildContext 是什么？为什么 Widget.build 需要？

BuildContext 是 Element 的抽象接口。通过它可以：

  • dependOnInheritedWidgetOfExactType<T>()：依赖上层 InheritedWidget。
  • findAncestorStateOfType<T>()：向上查找 State。
  • read<T>() / watch<T>()：Provider / Riverpod 等库使用。
  • Navigator.of(ctx) / Theme.of(ctx) / MediaQuery.of(ctx)：访问框架功能。

Q13：Flutter 的约束系统（Constraints）？

Constraints 自上而下传递（minWidth/maxWidth/minHeight/maxHeight），size 自下而上回报。常见的 constraint：

  • tight：min == max（强制大小，如 SizedBox(width: 100)）。
  • loose：min == 0、max 为有限值（允许子级自定大小，如 Center）。
  • unbounded：max = infinity（如横向 ListView 在主轴方向无界，子级必须自己 wrap）。
  • bounded：max 为有限值。

理解约束是排查 "RenderBox was not laid out" / "unbounded constraints" 异常的关键。

状态管理 ​

Q14：setState 与 Provider/Riverpod 的区别？

setState 只重建自身 Element 子树。Provider/Riverpod 通过 InheritedWidget 把状态注入到 element tree 的更高层级，依赖的子树自动 rebuild。当状态需要跨多个 Widget 共享时，应该用状态管理。

Q15：Bloc vs Cubit？

Cubit 通过方法直接 emit 状态，简单直观。Bloc 通过 Event 驱动，每次状态变化可追溯到具体事件，便于审计与测试。规则：简单用 Cubit，复杂事件流（多源、需防抖、需审计）用 Bloc。

Q16：Riverpod 为什么说"编译期安全"？

Provider 的类型由 Provider<T> 显式声明，访问时通过 ref 类型推断，避免 Provider 的运行时 ProviderNotFoundException。Riverpod 不依赖 BuildContext，因此在测试与异步场景下更友好。

Q17：Selector / buildWhen 的作用？

精确订阅 State 的某个切片，避免无关字段变化时 rebuild 整个 Widget。例如订阅 state.user.name，只有 name 变化才 rebuild。

性能优化 ​

Q18：Flutter 卡顿如何排查？

  1. Profile 模式运行（flutter run --profile）。
  2. DevTools Performance 面板找 jank 帧。
  3. 看 UI 线程还是 Raster 线程超时。
    • UI 超时：build / layout 过重。
    • Raster 超时：图层太多、复杂 ClipRRect、复杂 Shader。
  4. Inspector 检查 Widget 树深度、const 复用率。
  5. RepaintBoundary 隔离重绘区域。
  6. 用 Timeline 标注关键路径。

Q19：什么是 SkSL jank？Impeller 如何解决？

Skia 在运行时为新 Shader 状态组合编译 SkSL，首次出现会卡顿。Impeller 在编译期预编译所有 Shader，运行时直接绑定 uniform，消除 jank。

Q20：列表滑动卡顿，常见原因？

  1. 未用 ListView.builder（用了 ListView(children: ...) 全量构建）。
  2. item 没设置 itemExtent 导致每次 layout 测量。
  3. item Widget 过重（多层嵌套、未 const）。
  4. 图片未做缓存或解码尺寸过大。
  5. 同步重活在 build 中执行。
  6. 复杂动画或 Shader 触发 saveLayer。

Q21：const Widget 与 const 构造函数的实际收益？

  • 编译期常量实例在内存中只有一份，节省内存。
  • Element 比较新旧 Widget 时通过 ==（identity）快速判断相等，跳过 rebuild。
  • 启用 Tree Shaking：未引用的 const 资源会被剔除。

底层原理 ​

Q22：Flutter 为什么不使用平台原生 UI 组件？

为了让所有平台渲染一致，Flutter 自带渲染引擎（Skia / Impeller），所有 UI 都是 Framework 中的 RenderObject 描述，再交由 Engine 绘制。这带来一致性，但代价是首次启动需加载 Engine、包体较大、无法直接享受系统 UI 更新。

Q23：Flutter 的线程模型？

四条主要线程：

  1. Platform Thread：原生主线程。
  2. UI Thread：Dart 代码所在 isolate。
  3. Raster Thread：GPU 渲染（Skia / Impeller）。
  4. IO Thread：图片解码等慢 IO。

Platform Channel 把消息在 Platform Thread 与 UI Thread 之间序列化传递。

Q24：hot reload 的原理？

JIT 模式下，源码改动会被 Dart VM 的增量编译器编译为新的 kernel 文件，传给 VM。VM 把新类的代码替换为旧类的引用，保留运行时状态。Flutter Framework 重新触发 reassemble，从根 Element 起把所有 Stateful Element 标记 dirty，下一帧 rebuild。这就是为什么 hot reload 能保留 State。

hot restart 则重置整个 isolate 状态，从 main 重新执行。

Q25：BuildOwner 与 PipelineOwner 分别做什么？

  • BuildOwner：管理 Widget → Element 阶段（dirty Element 列表、buildScope、reassemble）。
  • PipelineOwner：管理 Element → RenderObject 阶段（dirty layout、dirty paint、flushLayout、flushPaint、flushSemantics）。

二者通过 WidgetsBinding 与 RendererBinding 协作，构成"每帧流水线"。

Q26：Widget 树重建时 Element 是怎么决定复用还是新建的？

Widget.canUpdate(oldWidget, newWidget)：runtimeType 与 key 都相同则复用，否则卸载旧 Element、新建新 Element。复用时会调用 Element.update(newWidget)，更新引用，并触发 child 级联更新。

Q27：InheritedWidget 是怎么实现"子树依赖并 rebuild"的？

当子 Widget 调用 dependOnInheritedWidgetOfExactType<T>() 时，Element 在自身的 _dependencies 集合中记录对 InheritedElement 的依赖。当 InheritedWidget 更新（updateShouldNotify 返回 true）时，所有依赖它的 Element 被标记 dirty，下一帧 rebuild。

Q28：Flutter 的渲染管线一帧大致流程？

vsync 到达
   ↓
Build（buildScope，处理 dirty Element）
   ↓
Layout（flushLayout，处理 dirty RenderObject）
   ↓
Compositing Bits（flushCompositingBits）
   ↓
Paint（flushPaint，生成 Layer 树）
   ↓
Composite（send Scene to Engine）
   ↓
Raster（Skia/Impeller 上 GPU 线程绘制）
   ↓
显示

综合与架构 ​

Q29：Flutter 项目架构如何分层？

推荐分层：

  • Presentation：Widget + ViewModel/Bloc。
  • Domain：Entity、UseCase、Repository 抽象（纯 Dart，无 Flutter 依赖）。
  • Data：Repository 实现、RemoteDataSource（dio）、LocalDataSource（hive/sqflite）、Model（DTO）。

依赖方向：Presentation → Domain ← Data。Domain 层不依赖具体实现，便于测试与替换。

Q30：Flutter Web 的适用边界？

  • 适合：内容展示、后台管理面板、营销页。
  • 不适合：高性能动画密集应用、SEO 强需求页（DOM 模式有限）、需要精细 URL 控制的 SPA（go_router 已较好但仍需调优）。

Q31：大型 Flutter 项目的常见问题与对策？

  • 启动慢：拆 module、延迟初始化、deferred as 加载懒组件。
  • 包体大：Tree Shaking、移除未用资源、按需加载字体、--split-per-abi。
  • 团队协作：Feature-based 目录、路由契约、状态管理统一规范、自动 lint（flutter_lints、very_good_analysis）。
  • 测试：CI 必须跑 unit + widget，关键流程跑 integration test。

Q32：什么时候应该用 PlatformView 而不是纯 Flutter？

  • 已有成熟原生组件（地图 SDK、相机预览、特定播放器）。
  • 系统级 UI（少数情况下，如 iOS 的原生联系人选）。
  • 性能可接受且无 Flutter 等价方案。

否则应优先用 Flutter 实现。

Q33：Flutter 与 KMP（Kotlin Multiplatform）、React Native 的对比？

  • Flutter：UI + 逻辑都跨端，渲染独立，体验一致；与原生交互需 channel。
  • RN：JS 写 UI，桥接到原生组件，UI 风格更接近原生但跨端一致性弱。
  • KMP：仅共享逻辑（Dart 换成 Kotlin），UI 仍各端原生编写；与原生集成最自然。

Q34：Flutter 怎么实现国际化？

  • flutter_localizations + intl 包 + ARB 文件。
  • Localizations.of<AppLocalizations>(ctx) 获取翻译。
  • 通过 MaterialApp.localizationsDelegates 注入。

Q35：如果让你设计一个 Flutter 启动优化方案？

要点：

  1. main 中只做必要初始化（如 WidgetsFlutterBinding.ensureInitialized()）。
  2. 把可延迟的初始化放到首帧之后（WidgetsBinding.instance.addPostFrameCallback）。
  3. Splash 页保持极简，避免深 Widget 树。
  4. 使用 deferred components 按需加载。
  5. 减少 const 缺失导致的初次 rebuild 开销。
  6. 预解码图片（precacheImage）。
  7. 在 Native 端预热 Engine（FlutterEngine cache），实现"秒开"。

附录：常用命令速查 ​

bash
# 工程
flutter create app_name
flutter create --platforms=ios,android,web .
flutter clean
flutter pub get
flutter pub upgrade

# 版本管理
flutter --version
fvm install 3.22.0
fvm use 3.22.0

# 运行
flutter run                              # debug
flutter run --profile                    # 接近 release 性能
flutter run --release --flavor prod

# 测试
flutter test
flutter test --coverage
flutter test integration_test/

# 构建
flutter build apk --release
flutter build appbundle --release --obfuscate --split-debug-info=./symbols
flutter build ipa --release
flutter build web --web-renderer canvaskit

# 分析
flutter analyze
flutter pub run dart_code_metrics:metrics lib

# 工具
flutter doctor
flutter devices
flutter logs
flutter pub global activate devtools
dart format lib/

推荐资源 ​

本文档以 Flutter 3.x 与 Dart 3.x 为基准撰写。Framework、Engine 与生态演进较快，部分细节请对照官方最新发布说明核实。

最后更新:

基于 VitePress 构建 · 部署于 Cloudflare Pages

Copyright © 2024-present DevDocs