Flutter Engine编译与应用介绍

** 导语 **mac系统上进行flutter engine编译和应用的介绍

---

官方介绍

• Setting up the Engine development environment
• Compiling the engine
• Debugging the engine

环境依赖准备

• mac 环境。
• 安装homebrew

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

• 安装ant、ninja

brew install ant
brew install ninja

• 使用默认python 2.7
• 一些网络可能会有chrome-infra-packages.appspot.com报错，可能会下载一些依赖失败。编辑host： sudo vi /etc/hosts

# flutter engine
172.217.160.112 storage.l.googleusercontent.com
172.217.160.112 commondatastorage.googleapis.com
172.217.160.68 googleapis.com
172.217.160.116 chrome-infra-packages.appspot.com
172.217.160.116 appspot-preview.l.google.com

• 安装depot_tools

git clone https://chromium.googlesource.com/chromium/tools/depot_tools.git 
export PATH=$PATH:/yourpath/to/depot_tools //添加环境变量

---

源码下载

• fork一份flutter engine源代码，官方不建议直接用官方git代码进行编译修改。官方的flutter engine源码：https://github.com/flutter/engine
  
• 新建目录engine 在engine中添加.gclient文件，内容如下，替换your_name_here为你的github name
  

solutions = [
  {
    "managed": False,
    "name": "src/flutter",
    "url": "[email protected]:/engine.git",
    "custom_deps": {},
    "deps_file": "DEPS",
    "safesync_url": "",
  },
]

• 拉取代码和依赖，在engine目录下执行gclient sync, 等待。。。。
  

cd engine
gclient sync  //拉取Flutter引擎所有依赖的关联库

编译源码

• 编译前，需要调整到对应flutter工具的提交版本，不然可能会报错。
  

# 查看engine版本vim /path/to/flutter/bin/internal/engine.version
cd /path/to/engine/src/flutter
git reset --hard xxxxxxxxxxxxxxxxx
gclient sync -D --with_branch_heads --with_tags

• 又是一小段等待，终于可以编译engine了。
• 这里以android debug模式编译为例，更多的编译模式参考官网。
  

cd engine/src  //进入src目录
./flutter/tools/gn --runtime-mode debug //生成Host编译产物存放文件
./flutter/tools/gn --android --runtime-mode debug //生成android编译产物存放文件
ninja -C out/host_debug -j 6
ninja -C out/android_debug -j 6

• 大约一个小时的等待后，编译成功，后续修改的话是增量编译，不需要等那么久（也要几分钟，哈哈哈哈~）

使用编译的engine

• 命令行方式
  

flutter create test_engine   //创建flutter工程
cd test_engine
flutter run --local-engine-src-path /path/to/engine/src --local-engine=android_debug

• android studio方式
  
• 创建flutter工程， 在gradle.properties中新增localEngineOut指向你的编译结果目录
• /path/to/engine/src/out/android_debug //这是真机模式，不适用于模拟器

image.png

• 模拟器版本编译
  

cd engine/src
./flutter/tools/gn --android --android-cpu x64 --runtime-mode debug
ninja -C out/android_debug_x64 -j 6

使用方式，将 local-engine 或者 localEngineOut 指向 android_debug_x64

image.png

PS： 更多编译产物可以参考https://www.jianshu.com/p/ff84455fb451 编译产物小节

编辑源码

• 编辑源码，可使用vscode，把engine/out/compile_commands.json 文件链接到 engine/src/flutter目录下，以使vscode支持代码跳转能力
  

cd engine/src/flutter
ln -s ../out/compile_commands.json ./

• 用vscode打开 engine/src/flutter，可进行编辑，java代码跳转能力貌似还有点弱。
• vscode可以装一些c++ java flutter dart json的插件
• 插件安装方法：

image.png

• 修改源码查看编译是否生效效果
  
• java层如：

image.png

• 使用 ninja -C out/android_debug_x64 -j 6 重新编译（增量）
• 运行效果：

image.png

运行时如果出现安装卡住或者不生效可以尝试先stop再重新运行

image.png

• c++层
  

image.png

• 使用 ninja -C out/android_debug_x64 -j 6 重新编译（增量）
• 运行效果：

image.png

• dart层修改
  

image.png

• 使用 ninja -C out/android_debug_x64 -j 6 重新编译（增量）
• 运行效果：

image.png

参考链接

• Flutter Engine与SDK的定制化与编译