Flutter 与 iOS 混合项目初探

背景

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

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

前言

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

开发工具

1. Xcode版本 10.2
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

1. CocoaPods依赖本地Flutter模块

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

2. 每一个target嵌入Flutter

target 'MyApp' do
   install_all_flutter_pods(flutter_application_path)
 end
复制代码

3. 执行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已经修复这个问题。

解决方案有两种：

1. 执行 channel master 或者 channel dev 先换个channel用。
2. 修改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混合开发工程化的方案，这里咱们暂时不作讨论，后续若是去研究了在作补充吧～

相关连接

Flutter环境配置

官方混合文档