Flutter终于有可视化编辑页面了(Hot UI)

50,557 阅读3分钟

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那些事】,干货等你来拿。