美文网首页iOS 进阶Flutter
iOS原生嵌入flutter模块, flutter attach

iOS原生嵌入flutter模块, flutter attach

作者: 一滴矿泉水 | 来源:发表于2022-03-24 16:27 被阅读0次

    简介

    一旦将flutter模块集成到原生项目中,由其是iOS的原生项目,我们是否能够保留flutter的快速开发调试的优势呢?
    即是否还可以通过Hot reload 或者 Hot Restart来快速开发呢?
    那么对应flutter模块,我们如何使用hot reload加速我们的调试速度呢?

    答案就是:flutter attach 调试 (开发工具:Xcode 、Visual Studio Code 、Android Studio )

    一:Visual Studio Code

    1、 Xcode 启动原生项目 (此处flutter模块已嵌入原生,
    2、创建launch.json 文件 如下图


    截屏2022-04-21 下午1.38.16.png

    3、VSCode 编辑 launch.json -> 追加如下代码:

    {
        "name": "Flutter: Attach to Device",
        "type": "dart",
        "request": "attach"
    }
    
    截屏2022-04-19 下午4.38.17.png

    4、如下图选中刚刚配置的 "request": "attach" 点击 Run


    截屏2022-04-19 下午4.40.06.png

    5、完成配置 现在可在iOS 断点Xcode 中调试,Flutter VSCode 中断点调试

    二:Android Studio

    1、Xcode 启动原生项目 (此处flutter模块已嵌入原生,

    2、Android Studio 中打开终端输入 flutter attach 命令(展示可用模拟器列表,仅有一个则跳过此步)

    bogon:test_flutter zhanghua$ flutter attach
    Multiple devices found:
    iPhone 11 Pro Max (mobile) • E1D101FB-F1A5-404F-B3FF-BD981B04B271 • ios •         com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    iPhone 13 Pro Max (mobile) • AD044D50-3DCC-495A-9D96-981349214F67 • ios •     com.apple.CoreSimulator.SimRuntime.iOS-15-2 (simulator)
    [1]: iPhone 11 Pro Max (E1D101FB-F1A5-404F-B3FF-BD981B04B271)
    [2]: iPhone 13 Pro Max (AD044D50-3DCC-495A-9D96-981349214F67)
    Please choose one (To quit, press "q/Q"): q
    bogon:test_flutter zhanghua$ 
    

    3、执行 flutter attach -d <设备ID> 命令选择要启动的模拟器 (无下面报错,跳过此步)

    bogon:test_flutter zhanghua$ flutter attach -d AD044D50-3DCC-495A-9D96-981349214F67
    There are multiple observatory ports available.
    Rerun this command with one of the following passed in as the appId:
         flutter attach -- app-id com.example.myFlutter
         flutter attach -- app-id com.test.flutter
    bogon:test_flutter zhanghua$ 
    

    4、执行 flutter attach -- app-id com.test.flutter -d AD044D50-3DCC-495A-9D96-981349214F67 命令

    bogon:test_flutter zhanghua$ flutter attach -- app-id com.test.flutter -d AD044D50-3DCC-495A-9D96-981349214F67
    Syncing files to device iPhone 13 Pro Max...                       13.5s
    
    Flutter run key commands.
    r Hot reload. 🔥🔥🔥
    R Hot restart.
    h Repeat this help message.
    d Detach (terminate "flutter run" but leave application running).
    c Clear the screen
    q Quit (terminate the application on the device).
    
    Running with unsound null safety
    For more information see https://dart.dev/null-safety/unsound-null-safety
    
    An Observatory debugger and profiler on iPhone 13 Pro Max is available at: http://127.0.0.1:64089/wiDHmXpmDXo=/
    The Flutter DevTools debugger and profiler on iPhone 13 Pro Max is available at: http://127.0.0.1:9103?uri=http%3A%2F    %2F127.0.0.1%3A64089%2FwiDHmXpmDXo%3D%2F
    

    5、到此快快在 Android Studio 中修改 flutter 模块代码 ,在终端中执行 r 或者 R 看看模拟器中样式是否 随之变化吧 。

    注意:只有一个模拟器设备的话 ,执行 flutter attach 命令后将跳过步骤2、3,直接展示 小 4 步骤结果 .


    文章持续更新中、希望对各位有所帮助、有问题可留言 大家共同学习.

    相关文章

      网友评论

        本文标题:iOS原生嵌入flutter模块, flutter attach

        本文链接:https://www.haomeiwen.com/subject/hqnkjrtx.html