Android Studio Flutter 调试技巧 Flutter Inspector 提升你的维护开发效率 轻松定位复杂嵌套Widget代码位置

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精。

Flutter是谷歌推出的最新的移动开发框架。

【x1】微信公众号的每日提醒 随时随记 每日积累 随心而过

【x2】各种系列的**** 免费开源 关注 你不会迷路

【x3】系列文章 百万 Demo 随时 复制粘贴 使用

Flutter 是最新一代的跨平台开发框架，目前我们使用 Flutter 来架构了产业链中的几款 APP，随着业务的扩大，以及项目的快速迭代，在未进行模式设计时，Flutter 中堆叠了大量的代码，有时一个Widget 页面的代码量就可能达 5000 多行，如果你是开发人员，新接手到这样的项目，多多少少会有点想吐，或者说这个页面也可能是你亲自开发出来的，但是经过一年两年这样的时间历程以及多次业务逻辑的改造，你再去维护这样的页面内容多少会有点闹心，当然小编也亲身经历过，那就是在初次使用 Flutter 开发项目时，边学边堆叠代码，到最后代码的风格各式各样的写法，当然也堆叠了大量的代码块，经过几个月后，再去维护，真是那个闹心😂。

所幸的是，在 Android Studio 中，对 Flutter 项目，有了很好的扩展工具支持，默认情况下，在Android Studio 开发工具的右侧边栏上有一个 Flutter Inspector 工具，可以快速的定位 UI 代码，操作步骤【点击查看视频】，合理的应用这个工具，可以帮你节省1倍以上的开发时间。

当然需要注意的是每次切换选择时，都需要执行一下如下图所示的第二步的刷新同步一下页面的 Widget 。 当你不再使用时，执行一下第三步的操作，不选中即可。