Flutter iOS 真机测试 -- 值得收藏

15,332 阅读2分钟

在文章Flutter 布局备忘录 -- 多图警告,干货建议收藏中,我们了解了常用的布局。在文章Flutter 结合 Dio 使用中,我们了解了接口请求。那么,当一个 Flutter 应用开发完之后,我们怎么在 iOS 真机的调试呢?本文,我们来了解下。

准备工作

  • 一台 Mac 电脑,安装了 Xcode 软件

xcode软件app.png

  • 一条 USB 线
  • 一台 iPhone
  • 一个能正常运行的 Flutter 项目

这里的 Flutter 项目,我使用了在 Flutter 结合 Dio 使用文章中的项目。

USB 将手机和电脑连接起来。手机中弹窗选择信任该电脑。

信任该电脑.png

Xcode 配置

打开ios项目.png

进入项目的 ios 文件夹,双击文件 Runner.xcworkspace,自动调起 Xcode 软件。

ios项目跑起.png

因为准备工作的时候,已经将手机连接到电脑,所以,你在 Runner 这里会找到你的手机,点选连接的手机:

点选自己的手机.png

这里我连接的是自己的手机,手机名称为嘉明

Signing & Capabilities 配置信息中,你需要选择一个团队,如果团队状态未识别,你需要登陆。

Signing登陆验证.png

成功登陆后,你可以看到类似下面成功的页面。

signing成功登陆的状态.png

操作完上面之后,你可以点击运行按钮,运行项目。

运行项目run.png

此时,你会看到 codesign 想访问您的钥匙串中的密钥 的弹窗。

允许钥匙串登陆.png

填写你本机的登陆密码,并点选 始终允许允许

建议选择始终允许,不然选择允许后,下次进来你还得允许。

手机配置

在上面输入登陆的钥匙后,我们连接的手机上会弹出提示不受信任的开发者的信息。

不受信任的开发者.png

我们根据提示,在设置中允许使用这些 App

操作路径:设置 -> 通用 -> 描述文件与设备管理 -> 开发者APP

选中我们的 Apple Development 信息。

手机选择开发者APP.png

成功选中后,我们可以看到状态变更为下面👇这样:

Flutter-demo验证成功的状态.png

Flutter Demo 是我项目的名称

此时,你可以在的手机上看到一个名称为 Flutter DemoFlutter 应用。

app已经安装进入.png

此时你点击打开 Flutter Demo 应用,可能会得到下面的信息提示:

directive-open-flutter-app.png

因为自己手机系统是 14.2,所以它告诉我,应用只能通过 IDE 发起或者是 Xcode。所以,我们在 Xcode 上再次点击运行按钮,运行我们的项目即可,可能会出现下面这个信任弹窗:

重新运行的信任弹窗.png

选择信任后,你可以看到我们的 Flutter 应用内容了。

IMG_1503.JPG

另一种处理方式 iOS 14 not letting Flutter apps (still in dev) to launch from the home screen compared to Building/Running from the IDE

后话

IDE 上更改内容后,再次点击运行按钮之后,你在手机应用上可以看到更新的内容。

很酷,是吧,读者感兴趣可以尝试一下~

如果读者喜欢本文,不妨一键三连:点赞 + 收藏 + 关注 🌹