> For the complete documentation index, see [llms.txt](https://codandotv.gitbook.io/craftd/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://codandotv.gitbook.io/craftd/how-to-use/flutter.md).

# Flutter

### 1. Create your ComponentPropertyClass with properties that you need

* In this example i used Button component

```dart
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

```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...

```dart
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.

```dart

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

```dart
 // 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}");
            });
          }

```