On December 12th, at the Flutter Interact conference, Flutter announced its latest feature, Hot UI, a plugin extension based on IDEA and AS. This is visual programming, where you open source and quickly change the properties of your components and synchronously run them on your device. This feature has been waiting so long. Oh, that’s so refreshing.
Here’s a simple example of how to use this feature:
Flutter plug-in installation
Open the http://plugins.jetbrains.com/plugin/9212-flutter/, (why do I always like 9012? Haha O(∩_∩)O~ toxic…) , and then download the corresponding plug-in version according to the development tool version:
The IDE version supported by the plug-in
Bottom line: You must be Android Studio3.5 or above to use it.
Flutter42.1. Plugin version:
| Version number of the Flutter plugin | Supported Android Studio internal version number | Supported Android Studio distribution number | Supported Version of Intellij IDEA |
|---|---|---|---|
| 42.1.4 | Android Studio Build 193.3519.25 — 193.* | Android Studio 3.5.3; Android Studio 3.6Beta 5 and 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.* | I can’t find this | IntelliJ IDEA Ultimate 2019.2.4 IntelliJ IDEA Community 2019.2.4 |
| 42.1.2 | Android Studio Build 192.6262 — 192.7141 | I can’t find this | 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 |
* Plugin versions:
| Version number of the Flutter plugin | Supported Android Studio internal version number | Supported Android Studio distribution number | Supported Version of Intellij IDEA | The characteristics of |
|---|---|---|---|---|
| 42.0.4 | Android Studio Build 193.3519.25 — 193.* | Android Studio 3.5.3; Android Studio 3.6Beta 5 and Android Studio 4.0 Canary 6 | IntelliJ IDEA Ultimate 2019.3 — 2019.3.1 (RC) IntelliJ IDEA Community 2019.3 — 2019.3.1 (RC) |
Implementation of HOT UI |
| 42.0.3 | Android Studio Build 192.7142 — 192.* | I can’t find this | IntelliJ IDEA Ultimate 2019.2.4 IntelliJ IDEA Community 2019.2.4 |
Implementation of HOT UI |
| 42.0.2 | Android Studio Build 192.6262 — 192.7141 | I can’t find this | IntelliJ IDEA Ultimate 2019.2.1 — 2019.2.3 IntelliJ IDEA Community 2019.2.1 — 2019.2.3 |
Implementation of 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 |
Implementation of HOT UI |
The following is the version number information THAT I can see on the Chinese official website (of course, I can’t find some version numbers, nor can I find where to download them. They are not available on the English official website, and there is no introduction on the Chinese official website. I hope the Chinese official website can update the download information of these versions.)
| Android Studio release number | Internal version number |
|---|---|
| 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 track of | |
| 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 |
Introduction to plug-in
You can find this new feature in the IntelliJ/Android Studio plugin for Flutter, which is currently in preview form. You can then view and interact with the components directly in the IDE while building them. Go to File -> Settings-> Languages & Frameworks (or after opening the Settings page, search for HOT UI) and find the Flutter. Then select “HOT UI”, as shown below:
You can then change the properties of your component in the “HOT UI” and it will be updated directly in the preview screen and on your device.
The dynamic diagram is shown below:
It is not easy for the author to write an article. If you think it looks good, please click a “like” to support it. Thank you.
For more information about Flutter, please follow our public account “Flutter things”.