flutter_dynamic

flutter_dynamic 是一个能动态创建Flutter应用的引擎。flutter_dynamic不但支持写UI，还支持写代码逻辑。
EN: The flutter_dynamic is an engine that create flutter application dynamically. flutter_dynamic not only supports writing UI, but also writing code logic.

中文文档
English Document
Github地址
153768151@qq.com - feel free to contact me

Best Practice (最佳实践)

Step 1

TextFieldA

var _textFieldA = {
  "xKey": "_TextFieldA", 
  "widgetName": "TextField",      
  "props": { 
    "style": {
      "color": "0xff000000",
      "fontWeight": "bold"
    },
    "keyboardType": "number",
    "value": "Input",
    "decoration" : {          
      "hint": "I am TextFieldA",
      "border": {
        "color": "0xffffff00",
        "width": "2"
      }
    }        
  }   
};

TextFieldB

var _textFieldB = {
  "xKey": "_TextFieldB", 
  "widgetName": "TextField",      
  "props": { 
    "style": {
      "color": "0xff000000",
      "fontWeight": "bold"
    },
    "value": "Input",
    "decoration" : {          
      "hint": "I am TextFieldB",
      "border": {
        "color": "0xffffff00",
        "width": "2"
      }
    }        
  }   
};

button

var _button = {
  "xKey": "_RawMaterialButton",
  "widgetName": "RawMaterialButton",
  "props": {
    "fillColor": "0xfff2f2f2",
    "padding": "[10,0,10,0]",
    "child": {
      "type": "sysWidget",
      "widgetName": "Text",
      "props": {
        "data": "'RawMaterialButton'. Click",
        "color": "0xff123456",
        "backgroundColor": "0xff00ff00",
        "fontSize": "16",
        "fontWeight": "bold",
        "lineHeight": "1.2"
      }
    }
  }
};

Step 2

var _dslRootWidget = {
  "xKey": "",
  "widgetName": "Scaffold",
  "props": {
    "appBar": {
      "xKey": "",
      "widgetName": "AppBar",
      "props": {
        "title": {
          "widgetName": "Text",
          "props": {"data": "Navigator"}
        }
      }
    },
    "body": {
      "xKey": "",
      "widgetName": "SafeArea",
      "props": {
        "child": {
          "xKey": "",
          "widgetName": "Column",
          "props": {
            "children": [
              _textFieldA,
              _textFieldB,
              _button                
            ]
          }
        }
      }
    }
  }      
};

Step 3


Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext contex){
    return YZDynamic.buildWidget(context, bestPraticeDsl, preConfig: null);
}));

Step 4

event

 "xEvents": [
    {
      "eventType": "onClick",
      "code": '''
      <c:valueA>=<w:_TextFieldA>;
      action:yzToast(tip:<c:valueA>)
      '''
    }       
  ]

and button json will show as:

var _button = {
  "xKey": "_RawMaterialButton",
  "widgetName": "RawMaterialButton",
  "props": {
    "fillColor": "0xfff2f2f2",
    "padding": "[10,0,10,0]",
    "child": {
      "type": "sysWidget",
      "widgetName": "Text",
      "props": {
        "data": "Button",
        "color": "0xff123456",
        "backgroundColor": "0xff00ff00",
        "fontSize": "16",
        "fontWeight": "bold",
        "lineHeight": "1.2"
      }
    }
  },
  "xEvents": [
    {
      "eventType": "onClick",
      "code": '''
      <c:valueA>=<w:_TextFieldA>;
      action:yzToast(tip:<c:valueA>)
      '''
    }       
  ]
};

Flutter动态创建UI(flutter_dynamic)最佳实践