🔷Flutter

1. Create your ComponentPropertyClass with properties that you need

• In this example i used Button component

class ButtonProperties {
  const ButtonProperties({
      required this.text,
    ... place your construtor properties
  });

  final String text;
   ... place your properties
}

2. Add your Component json object in Dymanic.json

{
    "key": "CraftDBbutton",
    "value": {
         "text": "Knife",
     ... place your properties
     }
 }
  

3. Create your Component

:memo: Note: Your widget must have two properties.

• ButtonProperties: The mapped properties from json

• callback: This make reference to the component's behaviour, for example: onclick -> for buttons, onchange -> for checkbox etc...

class CraftDButton extends StatelessWidget {
    const CraftDButton(
      {super.key, required this.buttonProperties, required this.callback});

      ... place your code

}

4. Create your Component Builder

:memo: Note: This Builder must extend CraftBuilder Class and override craft and fromJson methods.

class CraftDButtonBuilder extends CraftDBuilder<ButtonProperties> {
  CraftDButtonBuilder() : super(key: key);

  @override
  Widget craft(ButtonProperties model, CraftDViewListener listener) {
    ... place your code
  }

  @override
  ButtonProperties fromJson(properties) {
    return ButtonProperties(
        text: properties["text"],
        ... rest of tour code
    )
  }

  static String key = "CraftDButton";
}

5. In your Page, create your CraftDBuilder declaration and put it into CraftDynamic Widget

 // You can put it in your dependency injection
    final craftdBuilderManager = CraftDBuilderManager();

    return CraftDynamic(
         simplePropertiesList: simplePropertiesList,
         craftDBuilderManager : craftdBuilderManager,
         onAction: (actionProperties) {
        print(
                "categoria ${actionProperties.analyticsProperties?.category} "
                "label ${actionProperties.analyticsProperties?.label} - "
                "track ${actionProperties.analyticsProperties?.track}");
            });
          }