Flutter 1.12 Hot UI 简介

Flutter 1.12发布会上提到一个新的Flutter插件 Hot UI。
Hot UI可以快速修改widget属性，快速预览widget显示效果
仿真调试时可以实现极其快速的热重启效果。

本文介绍Hot UI的安装及基本使用。

安装

1. 更新Flutter Plugins

   
   
   

   Preference Plugins

2. 开启Hot UI功能

   
   
   

   Experiments
   
   

   3.新建一个Flutter工程，选取main.dart
   4.在IDE的最右侧点开Hot UI

   
   
   

   Flutter Outline
   
   5.打开仿真器，运行程序。

基本使用

1. 选中MaterialApp Widget，我们可以看到

   
   
   

   MaterialApp
   
   

   Properties展示了MaterialApp全部的属性

2.选中Text Widget，我们可以看到

Text

同样，Properties展示了作为title的Text全部的属性

3. 当我们在Properties中修改Text的某个属性时，例如修改显示的文字。
   左侧的代码会同步补充或修改。与此同时，我们可以看到仿真器进行了毫秒级别的热重载，更新了我们的设置。

个人感觉这个功能可能有以下几个用处

1. 对于不熟悉的Widget的人，可以查看到全部可设置的属性。
2. 偷懒使用Properties添加修改属性。
3. 快速的UI调试

根据官方发布会上的说明，似乎还有IDE内快速预览的功能（还未上线）
也许我们不运行仿真也能直观、快速的修改我们的相关代码。

官方图片

结束语

对于我这种喜欢使用StoryBoard类似的图形化UI布局的菜鸡，这种方式比较亲切。毕竟之前进行iOS和Andorid开发，都逐步进入了图形化辅助设计阶段。无论如何，秒级的热重载都实在太节约时间了。

我是官方文档