Flutter 与 iOS 混合项目初探

背景

大厂小厂都在搞Flutter，就问你慌不慌！

国内一些混合集成方案的文章大部分都太老了，参考价值不高，并且很容易让初学者头大。

前言

本文非阐述Flutter相关的原理，优势，发展现状等问题，只介绍在与现有的iOS项目做混合开发的实践，以及混合过程中的一些坑。目前混合开发已有2个页面开发完成，等待用户检验。

开发工具

Xcode版本 10.2
Visual Studio Code 1.41.0

环境依赖

Flutter开发环境配置过程就不细说了，官网文档已经写的很详细了。

目前使用Flutter SDK版本为 v1.9.1+hotfix.6

环境配置完成后执行 flutter doctor 做下检查

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel unknown, v1.9.1+hotfix.6, on Mac OS X 10.14.4 18E226,
    locale zh-Hans-CN)
 
[!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] Xcode - develop for iOS and macOS (Xcode 10.2)
    ! CocoaPods out of date (1.6.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform sides plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade:
        sudo gem install cocoapods
[✓] Android Studio (version 3.5)
[✓] VS Code (version 1.41.0)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

可以看到要求CocoaPods版本为1.6.0及以上，目前我们在使用1.5.3版本，不过这只是个警告，影响不大，后续升级CocoaPods自然会解决这个问题。

混合方案

混合方案这一块官方也是经历了好几个版本的变更，最初混合的方案比较麻烦，官方文档写的也不是很详细，不过在Flutter1.12 发布后，混合方案文档做了更新，2种混合方案写的也很简单易懂。这里我们也是采用了官方推荐的方案（使用CocoaPods依赖管理）。

创建Flutter模块（Flutter相关页面的代码都在这里）。

cd some/path/
flutter create --template module my_flutter

这里推荐将Flutter模块跟iOS工程模块放在同级目录下

some/path/
├── my_flutter/
└── MyApp/

修改Podfile

CocoaPods依赖本地Flutter模块

flutter_application_path = '../my_flutter'
 load File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')

每个target嵌入Flutter

target 'MyApp' do
   install_all_flutter_pods(flutter_application_path)
 end

执行pod install这里是通过podhelper.rb脚本将Flutter工程里面.ios目录下相关的产物嵌入到iOS工程。

Flutter.framework（Flutter engine bundle）
App.framework（Dart code）
Flutter plugins

相关产物的生成记得在Flutter模块下执行flutter build ios操作。

按照上面3步操作完成后我们可以看到Flutter产物已经集成到iOS工程了

Analyzing dependencies
Fetching podspec for `Flutter` from `../../finance-flutter-module/.ios/Flutter/engine`
Fetching podspec for `FlutterPluginRegistrant` from `../../finance-flutter-module/.ios/Flutter/FlutterPluginRegistrant`
Fetching podspec for `connectivity` from `../../finance-flutter-module/.ios/Flutter/.symlinks/connectivity/ios`
Fetching podspec for `flutter_boost` from `../../finance-flutter-module/.ios/Flutter/.symlinks/flutter_boost/ios`
Fetching podspec for `rrd_flutter` from `../../finance-flutter-module/.ios/Flutter`
Fetching podspec for `url_launcher` from `../../finance-flutter-module/.ios/Flutter/.symlinks/url_launcher/ios`
Downloading dependencies
Installing Flutter (1.0.0)
Installing FlutterPluginRegistrant (0.0.1)
Installing Reachability (3.2)
Installing connectivity (0.0.1)
Installing flutter_boost (0.0.2)
Installing rrd_flutter (0.0.1)
Installing url_launcher (0.0.1)
Generating Pods project
Integrating client project

解决报错

完成混合后run工程出现如下error

/Build/Products/Debug-iphonesimulator/investment.app/Frameworks/Flutter.framework: Permission denied

这里应该是Flutter1.9的签名冲突Bug，官方在1.10.2已经修复这个问题。

解决方案有两种：

执行 channel master 或者 channel dev 先换个channel用。
修改Flutter SDK文件，打开flutter/packages/flutter_tools/bin/xcode_backend.sh文件，将

RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -exec chmod a-w "{}" \;

替换为

RunCommand find "${derived_dir}/engine/Flutter.framework" -type f -iname '.h' -exec chmod a-w "{}" \;

我们采用了第二种方案，修改后再次run发现工程已经可以运行了，到这里Flutter和iOS的初步混合已经完成了。

调试和Hot Reload

flutter attach之后使用终端或者VSCode做Flutter页面调试非常方便，这里还是推荐使用VSCode，毕竟在代码和终端之间来回切换不停的按r很烦。

bogon:my_flutter yin$ flutter attach
Checking for advertised Dart observatories...
Waiting for a connection from Flutter on iPhone X...
Done.
Syncing files to device iPhone X...                              1,328ms

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".
An Observatory debugger and profiler on iPhone X is available at:
http://127.0.0.1:63823/uO5BqqTmOrE=/
For a more detailed help message, press "h". To detach, press "d"; to quit,
press "q".

不过Android Studio对Flutter开发调试支持的要更好，毕竟是同厂出品，会有一些新的调试功能和特性可以使用，感兴趣的同学可以研究下。作为一个用惯了Xcode的人，目前来说VSCode已经可以满足我的开发需求了，就不去折腾Android Studio，毕竟开发React Native也还是要用VSCode，搞太多IDE怕自己凌乱～

这里有一点需要注意下就是 flutter attach 之后可能会一直为等待状态

Checking for advertised Dart observatories...
Waiting for a connection from Flutter on iPhone X...

这时我们杀掉APP进程重新启动就可以连接了。这里猜测是每次Native工程做Flutter相关初始化时候才会做一次attach。

总结

我们目前使用的方案是Flutter官方推荐的混合方案，优点缺点并存：

优点：混合集成简单，混合过程很多事情Flutter官方已经帮我们做好了
缺点：虽然iOS工程仓库和Flutter Module工程仓库是分离的，但紧紧做到了代码分离，实际运行两个工程是相互依赖的，也就是iOS和Android端的开发者本地都要安装一套Flutter环境。

目前这套混合方案还比较适合我们（iOS和Android都为3人）这种较小的团队，如果团队人员比较多或者还有Flutter单独的项目组的话，这种混合方案可能就比较笨重了，当然网上还有一些Flutter混合开发工程化的方案，这里我们暂时不做讨论，后续如果去研究了在做补充吧～