前言

之前已经写过一篇 Flutter 环境搭建文章：Flutter 环境搭建，
今天我们分析一下 flutter 如何嵌入到原生工程的。

xcode build phases

架构

┌─────────────────────────────────────────────────────────────┐
│                    Dart Framework Layer                     │  <- 你的代码
│  Widgets │ Rendering │ Animation │ Painting │ Gestures      │
├─────────────────────────────────────────────────────────────┤
│                    C++ Engine Layer                         │
│  Skia │ Dart VM │ Text Rendering │ Platform Channels        │
├─────────────────────────────────────────────────────────────┤
│                    Platform Layer                           │
│  Android (Java/Kotlin) │ iOS (Objective-C/Swift)            │
└─────────────────────────────────────────────────────────────┘

有了这个架构，我们就可以按部就班分析里面的每一个部分。

Widgets

我们平时打交道最多就是 Widget，通过 widget 来绘制 UI，我先列出常用的 widget：

┌─────────────────────────────────────────────────────────────┐
│                    最常用的 Flutter 控件清单                │
├──────────────────────┬──────────────────────────────────────┤
│      分类            │             常用控件（Widget）        │
├──────────────────────┼──────────────────────────────────────┤
│ 应用根控件           │ MaterialApp, CupertinoApp            │
│ 页面结构             │ Scaffold, AppBar, BottomNavigationBar│
│ 布局控件             │ Container, Row, Column, Stack,       │
│                      │ Expanded, Flexible, SizedBox, Center │
│ 文本与图标           │ Text, RichText, Icon, Image          │
│ 按钮与交互           │ ElevatedButton, TextButton,           │
│                      │ OutlinedButton, FloatingActionButton   │
│ 输入控件             │ TextField, TextFormField             │
│ 选择控件             │ Switch, Checkbox, Radio, Slider      │
│ 列表与滚动           │ ListView, GridView,                  │
│                      │ SingleChildScrollView, CustomScrollView│
│ 手势与反馈           │ GestureDetector, InkWell              │
│ 异步数据驱动         │ FutureBuilder, StreamBuilder         │
└─────────────────────────────────────────────────────────────┘

工程挑战

主要有如下这些挑战：

+------------------+-----------------------------------+
|      挑战        |             解决方案              |
+------------------+-----------------------------------+
| 状态管理复杂     | Riverpod/Bloc + 分层架构         |
| 平台功能集成     | 官方插件 + 平台通道              |
| 性能优化         | const优化 + Key使用 + 懒加载     |
| 依赖冲突         | 版本锁定 + 依赖验证工具          |
| 测试困难         | 业务逻辑分离 + Widget测试        |
| 多语言支持       | flutter_localizations            |
| 响应式布局       | LayoutBuilder + 扩展函数         |
| 内存泄漏         | 正确使用生命周期                 |
| 调试复杂         | DevTools + 调试标志              |
| 团队协作         | 代码规范 + 静态分析              |
+------------------+-----------------------------------+

下面我们依次展开聊聊：

状态管理

+------------------+---------------------------+----------------------------+
| Flutter 状态管理 | iOS 对应概念              | 核心思想                  |
+------------------+---------------------------+----------------------------+
| setState()       | 直接修改属性 +            | 简单直接的本地状态更新      |
|                  | setNeedsDisplay()         |                            |
+------------------+---------------------------+----------------------------+
| Provider         | KVO (Key-Value Observing) | 属性变化时自动通知观察者    |
+------------------+---------------------------+----------------------------+
| Riverpod         | Combine + @Published      | 响应式数据流，类型安全      |
+------------------+---------------------------+----------------------------+
| Bloc             | VIPER/Redux 模式         | 严格的事件-状态管理        |
+------------------+---------------------------+----------------------------+

对应的库：

┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐
│     状态管理     │     来源类型     │     包名         │     安装方式     │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│   Provider      │  官方推荐的三方库 │ provider        │ pubspec.yaml    │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│   Riverpod      │  官方团队的三方库 │ flutter_riverpod │ pubspec.yaml    │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│   Bloc          │  社区流行的三方库 │ flutter_bloc     │ pubspec.yaml    │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│   setState()    │  Flutter 自带    │ flutter SDK      │ 无需安装        │
└─────────────────┴─────────────────┴─────────────────┴─────────────────┘

平台功能集成

┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐
│     集成方式     │     适用场景     │     开发复杂度    │     性能表现     │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  官方插件        │  常见功能       │   低            │   高            │
│  (pub.dev)      │  (相机、定位等)  │                 │                 │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  平台通道        │  自定义功能     │   中            │   中高          │
│  (Platform       │  (硬件特有功能) │                 │                 │
│  Channels)       │                │                 │                 │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  直接原生集成    │  复杂原生依赖    │   高            │   最高          │
│  (FFI/Pigeon)    │  (C++库等)     │                 │                 │
└─────────────────┴─────────────────┴─────────────────┴─────────────────┘

库一览

  1. 核心官方团队维护的库
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│        库名称         │      包名           │          主要用途           │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Flutter SDK         │  flutter            │  Flutter 框架核心           │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Dart SDK            │  dart:core          │  Dart 语言核心库            │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Material Components │  material.dart       │  Material Design 组件       │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Cupertino Components│  cupertino.dart     │  iOS 风格组件               │
└──────────────────────┴─────────────────────┴─────────────────────────────┘
  1. 官方团队开发的三方库（pub.dev 上）

状态管理

┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│        库名称         │      包名           │          维护者             │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Provider            │  provider           │  Remi Rousselet (Flutter团队)│
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Riverpod            │  flutter_riverpod   │  Remi Rousselet (Flutter团队)│
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Bloc                │  flutter_bloc       │  Felix Angelov (社区)        │
└──────────────────────┴─────────────────────┴─────────────────────────────┘

还有一个比较强大的状态管理库 getx：

┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐
│     库名称       │  主要对标库      │  设计哲学        │  学习曲线        │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│     GetX        │ Provider        │ 全栈式解决方案    │ 非常简单        │
│                 │ Riverpod        │ 一体化框架       │                 │
│                 │ Bloc            │ 零配置          │                 │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│     Provider     │ GetX (部分)     │ 专注状态管理      │ 中等            │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│     Riverpod    │ GetX (部分)     │ 类型安全         │ 中等偏难        │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│     Bloc        │ GetX (部分)     │ 严格架构         │ 较难            │
└─────────────────┴─────────────────┴─────────────────┴─────────────────┘

对比：

┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐
│     指标         │     GetX        │     Provider    │     Riverpod    │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  GitHub Stars   │    9.5k+        │    4.2k+        │    6.8k+        │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  Pub.dev 评分    │    4.           │    5.            │    5.          │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  文档完整性      │    非常完整      │    完整         │    完整         │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  中文支持        │    优秀         │    一般         │    一般         │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  视频教程        │    大量         │    中等         │    中等         │
└─────────────────┴─────────────────┴─────────────────┴─────────────────┘
  1. 网络和数据处理
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│        库名称         │      包名           │          维护者             │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  HTTP Client         │  http               │  Dart 团队                 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  gRPC                │  grpc               │  Dart 团队                 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  JSON 序列化         │  json_annotation     │  Dart 团队                 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Path 处理           │  path               │  Dart 团队                 │
└──────────────────────┴─────────────────────┴─────────────────────────────┘
  1. 数据库和存储
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│        库名称         │      包名           │          维护者             │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  SQLite              │  sqflite            │  Flutter 团队               │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  键值存储            │  shared_preferences  │  Flutter 团队               │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  文件系统访问        │  path_provider       │  Flutter 团队               │
└──────────────────────┴─────────────────────┴─────────────────────────────┘
  1. 工具和开发辅助
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│        库名称         │      包名           │          维护者             │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  Internationalization │  intl               │  Dart 团队                 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  测试框架           │  test               │  Dart 团队                 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  代码生成            │  build_runner        │  Dart 团队                 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│  依赖注入           │  get_it              │  Flutter 团队(社区贡献)     │
└──────────────────────┴─────────────────────┴─────────────────────────────┘

平台通道

主要是 MethodChannel 和 EventChannel，详细介绍如下：

┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐
│  Flutter 通道    │  iOS 对应概念     │     通信模式     │     适用场景     │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  MethodChannel  │  Delegate 模式   │  请求-响应       │  一次性方法调用   │
│                 │  或 Target-Action │  (同步/异步)    │                 │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│  EventChannel   │  NotificationCenter │ 发布-订阅     │  持续事件流      │
│                 │  或 KVO            │  (数据流)      │                 │
└─────────────────┴─────────────────┴─────────────────┴─────────────────┘

具体使用场景举例：

  ┌─────────────────┬─────────────────┬─────────────────┬─────────────────┐
  │     场景         │  推荐通道        │  iOS 类比        │     原因        │
  ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
  │  用户登录        │  MethodChannel  │  Delegate       │ 一次性操作       │
  │  支付流程        │  MethodChannel  │  Target-Action  │ 需要结果反馈     │
  │  文件选择        │  MethodChannel  │  Delegate       │ 单次交互        │
  ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
  │  GPS 定位       │  EventChannel   │  CLLocationManager │ 持续数据流    │
  │  加速度计        │  EventChannel   │  CMSensorRecorder │ 高频数据      │
  │  蓝牙扫描        │  EventChannel   │  CBCentralManager │ 持续事件      │
  │  网络状态        │  EventChannel   │  Reachability   │ 状态变化监听    │
  ├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
  │  相机应用        │  混合使用        │  AVCaptureSession │ 既有一次性操作 │
  │                 │                 │                 │ 又有持续数据流  │
  └─────────────────┴─────────────────┴─────────────────┴─────────────────┘

性能优化

Flutter 性能优化的三大核心策略：const 优化、Key 使用、懒加载。

const 优化检查

  • 所有静态 Widget 添加 const
  • EdgeInsets、TextStyle 等使用 const
  • Icon、SizedBox 等常用组件使用 const

  • 避免在 build 中创建新对象

Key 优化检查

  • 列表项添加 ValueKey
  • 有状态的动态组件添加 Key
  • 表单使用 GlobalKey

  • 避免滥用 UniqueKey

懒加载检查

  • 长列表使用 ListView.builder
  • 多页面使用 PageView/IndexedStack
  • 大数据使用分页加载
  • 图片使用懒加载

依赖冲突

依赖冲突是 Flutter/iOS 开发中最头疼的问题之一。

Flutter 内置验证命令

# 1. 依赖树分析
flutter pub deps
# 输出：
# dart:ui 3.0.0
# flutter 3.0.0
# http 0.13.5
#   |-- async 2.8.2
#   |-- http_parser 4.0.1
#   |-- path 1.8.1

# 2. 依赖冲突检测
flutter pub get --dry-run
# 输出：Resolving dependencies... 
# 会显示所有版本冲突

# 3. 依赖图可视化
flutter pub deps --style=tree

第三方依赖分析工具

pubspec_assist​ (VSCode 扩展)