Flutter Dynamic Widget - Build your widget on the fly

本人在某电商公司搬砖，一般来说电商APP的首页都需要非常动态灵活的展现方式，例如：某天产品突发奇想为后天的xx大促活动设计了一个酷炫的UI展现方式，跟技术说如果按照我的这种展示交互来做的话，这个转化率肯定能提升100%。问我们什么时候能搞定，我们一评估发现这个需要发版才能搞定。后天的xx大促肯定是来不及了。产品会觉得我们技术太差，我们也在产品面前抬不起头。

电商app

对于这种问题，APP有React Native、Weex这种解决方案，但是我们调研RN后发现，RN有很多问题，而且性能方面也不是太好。好像现在越来越多的公司也已经抛弃RN了。所以我们就决定自己定义了一套UI组件协议，在Android、iOS，JS设置小程序端分别实现。这种方案前期工作量确实很大，但是当你的UI组件协议越来越丰富时，带来的好处也是极大的。APP中的很多页面我们都能做到随时更新。甚至是能做到随时新增一些页面。避免APP一旦修改都需要发版的问题。极大的提升了产品迭代速度。带来极大的收益。

Flutter

其实早在17年的时候，我们就已经有关注Flutter了，那时候还是叫Sky。我们在团队内分享后觉得还是处于非常早期的阶段，后面也没有再持续关注了，没想到Flutter在18年12月份放出了1.0正式版。Flutter天然的跨平台，支持Android，iOS。Web和桌面也在支持的计划中。可以说几乎跨了所有的平台。而且是基于同一份代码，注意这里跟RN还是有区别的，RN是Learn once, write everywhere.

在学习Flutter的过程中发现写Flutter的Widget跟我们公司定义的那套UI协议是非常相似的。我们定义的UI协议是基于json语法，而Flutter的Widget代码跟json几乎一致。

sample

这里可以把Widget的类型对应到json string的type属性。其他的属性基本保持一致，这里color的属性在json中使用#aarrggbb就行。看到这里心中就涌现一个想法，如果我用Flutter来实现一个DynamicWidget，这个Widget可以通过json来创建的话，这样我只要用Flutter实现一遍就能天然的跨多端。而且Flutter的Widget就是天然的UI协议呀，我只要把Flutter官方的Widget转成json然后实现一遍就行了。这样用户只要会了解了Flutter的Widget基本上就能写出对应的json了。用户不需要再理解一套特殊的UI协议。我们公司的UI协议，为了兼容Android、iOS各端走的是一套特殊的UI协议，需要使用者去学习。

Flutter Dynamic Widget

说干就干，先定义一个WidgetParser接口。

/// extends this class to make a Flutter widget parser.
abstract class WidgetParser{

  /// parse the json map into a flutter widget.
  Widget parse(Map map);

  /// check the matched widget type. for example:
  /// {"type" : "Text", "data" : "Denny"}
  /// if you want to make a flutter Text widget, you should implement this
  /// method as "Text" == widgetName, for more details, please see
  /// @TextWidgetParser
  bool forWidget(String widgetName);
}

parse方法解析json得到Flutter的Widget，forWidget方法表示这个Parser是对应json中对应的type属性。我们来实现一个Container widget的Parser， 如下：

class ContainerWidgetParser extends WidgetParser{
  @override
  bool forWidget(String widgetName) {
    return "Container" == widgetName;
  }

  @override
  Widget parse(Map map) {
    Alignment alignment = parseAlignment(map['alignment']);
    Color color = parseHexColor(map['color']);
    BoxConstraints constraints = parseBoxConstraints(map['constraints']);
    //TODO: decoration, foregroundDecoration and transform properties to be implemented.
    EdgeInsetsGeometry margin = parseEdgeInsetsGeometry(map['margin']);
    EdgeInsetsGeometry padding = parseEdgeInsetsGeometry(map['padding']);
    Map childMap =  map['child'];
    Widget child;
    for(var parser in DynamicWidgetBuilder.parsers){
      if (parser.forWidget(childMap['type'])){
        child = parser.parse(childMap);
        break;
      }
    }
    return Container(
      alignment: alignment,
      padding: padding,
      color: color,
      margin: margin,
      width: map['width'],
      height: map['height'],
      constraints: constraints,
      child: child,
    );
  }

}

你需要做的就是解析json的各个属性，然后最后拼装一个Container对象。很简单把。基于以上的想法，我把实现放在github上，大家可以在这里查看源码和各个实现的Widget的demo。同时也发布到dart pub上了。
github：https://github.com/dengyin2000/dynamic_widget
dart pub：https://pub.dartlang.org/packages/dynamic_widget

目前只是实现了几个Flutter Widget，计划是把Flutter官方的widget都实现一遍。大家如果有问题的话，欢迎随时联系我。

demo1.gif