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