Flutter attach

1.背景

hot-reload，热重载，允许开发者在应用运行时更改源代码，并实时观看效果。目前SwiftUI与Flutter都具备热重载的能力，开发阶段调试UI的效率极高。在原生iOS应用中混编flutter模块时，原生部分(非SwiftUI的)在修改后还是需要通过重新Run来查看效果，而其中的 Flutter 部分则是可以基于flutter attach实现热重载的，本文就简单的做一次配置记录。

2.配置Info.plist

On iOS 14 and higher, enable the Dart multicast DNS service in the Debug version of your app to add debugging functionalities such as hot-reload and DevTools via flutter attach.

配置本地网络使用权限：

<key>NSBonjourServices</key>
        <array>
            <string>_dartobservatory._tcp</string>
        </array>
    <key>NSLocalNetworkUsageDescription</key>
    <string>需要访问本地网络权限</string>

上架前须删掉以上配置，否则审核会被拒。

为方便起见，可配置两份Info.plist，只在开发环境中保留上述配置。

配置步骤：

1. 复制Info.plist文件并分别重命名为Info-dubug.plist和Info-release.plist；

   

2. 在Info-dubug.plist中加入上述配置，Info-release.plist保持原样不变：

   

3. TARGET->Build Settings 中搜索INFOPLIST_FILE，配置如下：

   

4. Build Settings -> Build Phases -> Copy Bundle Resources中移除多余的plist资源；

   

3.Run原生应用

运行原生应用并跳转到 flutter 所在模块，以便后面观看热重载后的效果。

4.flutter attach

打开终端，cd到原生项目的flutter模块所在根目录，我的是flutters：

├── Hello
│   ├── Hello
│   │   ├── Assets.xcassets
│   │   ├── Base.lproj
│   ├── Hello.xcodeproj
│   │   ├── project.xcworkspace
│   ├── Hello.xcworkspace
│   │   ├── xcshareddata
│   ├── Pods
│   │   ├── RxSwift
│   └── flutters
│       ├── build
│       ├── lib
│       └── test

在Hello/flutters目录下执行flutter attach命令：

% flutter attach

Syncing files to device 12...                                      36.2s

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

之后就可以修改 flutter 模块中的代码了，记得保存；

第一次修改完之后，终端里输入R - Hot restart 页面查看效果;

之后再修改时，输入r - Hot reload 即可查看效果；

5.注意事项：

经测试，APP运行时，第一次修改完Flutter模块后，须在终端输入R重启才能查看修改效果，输入小写的r时页面会报错。经过第一次的R重启后，再修改Flutter模块，直接r就能正常热加载了。

Run了应用并且执行flutter attach之后，如果关闭了应用，则终端里会提示”Lost connection to device”，如果再想看Flutter模块修改后的效果，则要重新执行Run->flutter attach->R->r这一流程。

---

相关参考：

#©Apple-Add Flutter to existing app