Flutter开发小抄iOS开发小抄

在iOS项目中集成Flutter,Flutter页面白屏及Cou

2022-04-22  本文已影响0人  zhangyin

问题描述:

按照官方文档将Flutter model集成到iOS 原生项目后(使用官方推荐的cocoaPod集成方案),运行APP后flutter入口页面显示未白屏,控制台打印如下错误信息:

Failed to find assets path for "Frameworks/App.framework/flutter_assets"
[VERBOSE-2:engine.cc(197)] Engine run configuration was invalid.
[VERBOSE-2:shell.cc(580)] Could not launch engine with configuration.

注:
关于如何将Flutter model 集成到iOS 原生APP中,可以参见官方文档,按照文档描述操作即可;

集成文档:

翻译稿:
https://flutter.cn/docs/development/add-to-app/ios/project-setup

官方原稿:
https://docs.flutter.dev/development/add-to-app/ios/project-setup

解决方案:

1、添加脚本

target->Build Phases->+->New Run Script Phase->Run Script

"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed ${SOURCE_ROOT}/Flutter/App.framework

如下图所示:


image.png

注意⚠️:
$FLUTTER_ROOT 是当前Flutter环境的跟路径,例如在我的电脑上,路径为:

/Users/zhangyin/macTools/flutter_2.10.5

您需要检查 $FLUTTER_ROOT 是否已经正确设置过;

target->Build Settings(若没有搜索到FLUTTER_ROOT)->+->Add User-Defined Setting
image.png image.png

重新运行APP

首先在Xcode中clean build folder
然后在APP的项目文件夹下执行命令:pod install
然后重新启动项目就可以看到Flutter中的页面了,运行效果如下:


WeChatf697293d502950ad1851561f6d80912c.png

(底层是原生APP,弹窗来自Flutter的main页面)

鸣谢:

本文参考简友[NJ_墨]的文章编写,实测有效;
https://www.jianshu.com/p/c36b1873a043

上一篇下一篇

猜你喜欢

热点阅读