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及以上版本才能夠使用。

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那些事】，乾貨等你來拿。