12月12号的Flutter Interact大会上，Flutter发布了基于IDEA及AS的插件扩展的最新功能Hot UI,也就是可视化编程，你开源快速更改你的组件属性，然后同步在你的设备上运行起来，这个功能等了这么久终于出来了，真是大快人心啊。

下面看看这个功能的简单具体使用吧：

Flutter插件安装

打开http://plugins.jetbrains.com/plugin/9212-flutter/，（为啥我老是看成9012？哈哈O(∩_∩)O~有毒。。。），然后根据的开发工具版本下载对应的插件版本：

插件支持的IDE版本

一句话：必须是Android Studio3.5及以上版本才可以使用。

Flutter42.1.*插件版本：

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
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"上面更改你的组件的属性，然后它会直接在预览界面及你的设备上面更新。

使用动态图解如下图所示：

作者写文章不容易，觉得好看的话，点个赞支持一下吧，谢谢大家。

更多关于Flutter精彩干货，欢迎关注公众号【Flutter那些事】，干货等你来拿。