# 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}");
            });
          }

```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://codandotv.gitbook.io/craftd/how-to-use/flutter.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.