flutter ui html,Flutter终于有可视化编辑页面了（Hot UI）

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.4Android Studio build 193.3519.25 — 193.*Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc)

IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc)

42.1.3Android Studio build 192.7142 — 192.*这个我找不到IntelliJ IDEA Ultimate 2019.2.4

IntelliJ IDEA Community 2019.2.4

42.1.2Android 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.1Android Studio build 191.8026 — 191.*Android Studio 3.5.3IntelliJ IDEA Ultimate 2019.1.4

IntelliJ IDEA Community 2019.1.4

Flutter42.0.*插件版本：Flutter插件版本号支持的Android Studio内部版本号支持的Android Studio发行版本号支持的Intellij IDEA版本号特点42.0.4Android Studio build 193.3519.25 — 193.*Android Studio 3.5.3; Android Studio 3.6Beta 5 以及 Android Studio 4.0 Canary 6IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (rc)

IntelliJ IDEA Community 2019.3 — 2019.3.1 (rc)HOT UI的实现

42.0.3Android Studio build 192.7142 — 192.*这个我找不到IntelliJ IDEA Ultimate 2019.2.4

IntelliJ IDEA Community 2019.2.4HOT UI的实现

42.0.2Android Studio build 192.6262 — 192.7141这个我找不到IntelliJ IDEA Ultimate 2019.2.1 — 2019.2.3

IntelliJ IDEA Community 2019.2.1 — 2019.2.3HOT UI的实现

42.0.1Android Studio build 191.8026 — 191.*Android Studio 3.5.3IntelliJ IDEA Ultimate 2019.1.4

IntelliJ IDEA Community 2019.1.4HOT UI的实现

以下是我能够在中文官网看到的版本号信息(当然有一些版本号我怎么也找不到，也找不到在哪里可以下载到，英文官网里面没有，中文官网也没有介绍，希望中文官网可以把这些版本下载信息都更新一下。)Android Studio发行版本号内部版本号Android Studio 4.0 Canary 6193.6052267

Android Studio 3.6 Beta 5192.6018865

Android Studio 3.5.3191.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 10192.5842447

Android Studio 3.6 Canary 9192.5830636

Android Studio 3.6 Canary 8192.5825043

Android Studio 3.6 Canary 7192.5807797

Android Studio 3.5191.5791312

Android Studio 3.6 Canary 6192.5787298

Android Studio 3.6 Canary 5191.5721125

Android Studio 3.6 Canary 4191.5679705

Android Studio 3.6 Canary 3191.5618338 [Js中文网](https://www.javascriptc.com/)

Android Studio 3.6 Canary 2191.5599242

Android Studio 3.6 Canary 1191.5595896

插件使用介绍

你可以在Flutter的IntelliJ / Android Studio插件中找到这个新功能，目前还是预览版。然后你可以在构建组件时可以直接在IDE中查看它们并与之交互，点击菜单File -> Settings-> Languages & Frameworks(或者打开设置页面之后，直接搜索HOT UI)，然后找到Flutter，然后勾选“HOT UI”,具体操作如下图所示：

然后你可以在“HOT UI“上面更改你的组件的属性，然后它会直接在预览界面及你的设备上面更新。

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

作者：AWeiLoveAndroid

链接：https://juejin.im/post/5df88a5a5188251278699e6a

原文标题：Flutter终于有可视化编辑页面了(Hot UI) - Js中文网 · 前端进阶资源教程