前言
之前已经写过一篇 Flutter 环境搭建文章：Flutter 环境搭建，
今天我们分析一下 flutter 如何嵌入到原生工程的。
架构
┌─────────────────────────────────────────────────────────────┐
│ 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++库等) │ │ │
└─────────────────┴─────────────────┴─────────────────┴─────────────────┘库一览
- 核心官方团队维护的库
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│ 库名称 │ 包名 │ 主要用途 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ Flutter SDK │ flutter │ Flutter 框架核心 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ Dart SDK │ dart:core │ Dart 语言核心库 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ Material Components │ material.dart │ Material Design 组件 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ Cupertino Components│ cupertino.dart │ iOS 风格组件 │
└──────────────────────┴─────────────────────┴─────────────────────────────┘- 官方团队开发的三方库（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. │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│ 文档完整性 │ 非常完整 │ 完整 │ 完整 │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│ 中文支持 │ 优秀 │ 一般 │ 一般 │
├─────────────────┼─────────────────┼─────────────────┼─────────────────┤
│ 视频教程 │ 大量 │ 中等 │ 中等 │
└─────────────────┴─────────────────┴─────────────────┴─────────────────┘- 网络和数据处理
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│ 库名称 │ 包名 │ 维护者 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ HTTP Client │ http │ Dart 团队 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ gRPC │ grpc │ Dart 团队 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ JSON 序列化 │ json_annotation │ Dart 团队 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ Path 处理 │ path │ Dart 团队 │
└──────────────────────┴─────────────────────┴─────────────────────────────┘- 数据库和存储
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│ 库名称 │ 包名 │ 维护者 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ SQLite │ sqflite │ Flutter 团队 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ 键值存储 │ shared_preferences │ Flutter 团队 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ 文件系统访问 │ path_provider │ Flutter 团队 │
└──────────────────────┴─────────────────────┴─────────────────────────────┘- 工具和开发辅助
┌──────────────────────┬─────────────────────┬─────────────────────────────┐
│ 库名称 │ 包名 │ 维护者 │
├──────────────────────┼─────────────────────┼─────────────────────────────┤
│ 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 扩展)