12月12号的Flutter Interact大会上，Flutter发布了基于IDEA及AS的插件扩展的最新功能Hot UI,也就是可视化编程，你开源快速更改你的组件属性，然后同步在你的设备上运行起来，这个功能等了这么久终于出来了，真是大快人心啊。
下面看看这个功能的简单具体使用吧：
Flutter插件安装
打开http://plugins.jetbrains.com/plugin/9212-flutter/，（为啥我老是看成9012？哈哈O(∩_∩)O~有毒。。。），然后根据的开发工具版本下载对应的插件版本：
插件支持的IDE版本
一句话：必须是Android Studio3.5及以上版本才可以使用。
| Flutter插件版本号 | 支持的Android Studio内部版本号 | 支持的Android Studio发行版本号 | 支持的Intellij IDEA版本号 |
|---|---|---|---|
| 42.1.4 | Android Studio build 193.3519.25 — 193.* | Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6 | IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc) IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc) |
| 42.1.3 | Android Studio build 192.7142 — 192.* | 这个我找不到 | IntelliJ IDEA Ultimate 2019.2.4 IntelliJ IDEA Community 2019.2.4 |
| 42.1.2 | Android Studio build 192.6262 — 192.7141 | 这个我找不到 | IntelliJ IDEA Ultimate 2019.2.1 — 2019.2.3 IntelliJ IDEA Community 2019.2.1 — 2019.2.3 |
| 42.1.1 | Android Studio build 191.8026 — 191.* | Android Studio 3.5.3 | IntelliJ IDEA Ultimate 2019.1.4 IntelliJ IDEA Community 2019.1.4 |
Flutter42.0.*插件版本：
| Flutter插件版本号 | 支持的Android Studio内部版本号 | 支持的Android Studio发行版本号 | 支持的Intellij IDEA版本号 | 特点 |
|---|---|---|---|---|
| 42.0.4 | Android Studio build 193.3519.25 — 193.* | Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6 | IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc) IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc) | HOT UI的实现 |
| 42.0.3 | Android Studio build 192.7142 — 192.* | 这个我找不到 | IntelliJ IDEA Ultimate 2019.2.4 IntelliJ IDEA Community 2019.2.4 | HOT UI的实现 |
| 42.0.2 | Android Studio build 192.6262 — 192.7141 | 这个我找不到 | IntelliJ IDEA Ultimate 2019.2.1 — 2019.2.3 IntelliJ IDEA Community 2019.2.1 — 2019.2.3 | HOT UI的实现 |
| 42.0.1 | Android Studio build 191.8026 — 191.* | Android Studio 3.5.3 | IntelliJ IDEA Ultimate 2019.1.4 IntelliJ IDEA Community 2019.1.4 | HOT UI的实现 |
以下是我能够在中文官网看到的版本号信息（当然有一些版本号我怎么也找不到，也找不到在哪里可以下载到，英文官网里面没有，中文官网也没有介绍，希望中文官网可以把这些版本下载信息都更新一下。）
| Android Studio发行版本号 | 内部版本号 |
|---|---|
| Android Studio 4.0 Canary 6 | 193.6052267 |
| Android Studio 3.6 Beta 5 | 192.6018865 |
| Android Studio 3.5.3 | 191.6010548 |
| Android Studio 4.0 Canary 5 | |
| Android Studio 4.0 Canary 4 | |
| Android Studio 3.6 Beta 4 | |
| Android Studio 4.0 Canary 3 | |
| Android Studio 4.0 Canary 2 | |
| Android Studio 3.6 Beta 3 | |
| Android Studio 3.5.2 | |
| Android Studio 3.6 Beta 2 | |
| Android Studio 4.0 Canary 1 | |
| Android Studio 3.6 Beta 1 | |
| Android Studio 3.5.1 | |
| Android Studio 3.6 Canary 12 | |
| Android Studio 3.6 Canary 11 | |
| Android Studio 3.6 Canary 10 | 192.5842447 |
| Android Studio 3.6 Canary 9 | 192.5830636 |
| Android Studio 3.6 Canary 8 | 192.5825043 |
| Android Studio 3.6 Canary 7 | 192.5807797 |
| Android Studio 3.5 | 191.5791312 |
| Android Studio 3.6 Canary 6 | 192.5787298 |
| Android Studio 3.6 Canary 5 | 191.5721125 |
| Android Studio 3.6 Canary 4 | 191.5679705 |
| Android Studio 3.6 Canary 3 | 191.5618338 [Js中文网](https://www.javascriptc.com/) |
| Android Studio 3.6 Canary 2 | 191.5599242 |
| Android Studio 3.6 Canary 1 | 191.5595896 |
插件使用介绍
你可以在Flutter的IntelliJ / Android Studio插件中找到这个新功能，目前还是预览版。然后你可以在构建组件时可以直接在IDE中查看它们并与之交互，点击菜单File -> Settings-> Languages & Frameworks（或者打开设置页面之后，直接搜索HOT UI），然后找到Flutter，然后勾选“HOT UI”,具体操作如下图所示：
然后你可以在“HOT UI“上面更改你的组件的属性，然后它会直接在预览界面及你的设备上面更新。
使用动态图解如下图所示：
作者：AWeiLoveAndroid
链接：https://juejin.im/post/5df88a5a5188251278699e6a
看完两件小事
如果你觉得这篇文章对你挺有启发，我想请你帮我两个小忙：
- 把这篇文章分享给你的朋友 / 交流群，让更多的人看到，一起进步，一起成长！
- 关注公众号 「画漫画的程序员」，公众号后台回复「资源」 免费领取我精心整理的前端进阶资源教程
本文著作权归作者所有，如若转载，请注明出处
转载请注明：文章转载自「 Js中文网 · 前端进阶资源教程 」https://www.javascriptc.com
微信扫一扫 
admin 
