# Create the CreateTask component

Now that you can update a task, you need to be able to create one and use real data rather than default value in local state. To do so, you are going to create a component.

1. In the **Toolbox** select the **Component List** and click on **Add New Component.**
2. Fill the fields with "CreateTask".
3. Add a **Container** in the top of the **Explorer.**
4. Add a **SafeArea** in the Child of the **Container**.
5. Add a **SingleChildScrollView** in the Child of the **SafeArea**.
6. Add a **Form** in the Child of the **SingleChildScrollView**.
7. Add a **Card** in the Child of the **Form**.
8. Add a **Column** in the Child of the **Card**.
9. In the **Column** add two **TextField**, a **DateTimePicker** and a **Row**.
10. In the **Row** add an **IconButton**, a **Flexible** and a **Button**.
11. Add a **ChoiceChip** in the Child of the **Flexible**.
12. Add an **Icon** in the Child of the **Button**.

You should have the same result as shown below.

<figure><img src="/files/B34TnKHrAiQGcgxIB4N6" alt=""><figcaption><p>Create Tast component</p></figcaption></figure>

With a complete layout, you can now add the theme and settings.

1. Set the **Color** of the **Card** with desired one (#FFFFFFFF in the example).
2. In the **Column** set a **Padding** of **10** on the **Left** and **Right, 20** on the **Bottom.** Set the **MainAxisSize** to **Min** and the **CrossAxisAlignment** to **Start.**
3. Select the first **TextField** and add the **Name** "title". Enable **Decoration** and set an **Hint Text** like "Ex : Make Waffles". Enable **Hint Style** and set the **Text Color** as **Outline.** Set **Is Dense** to **True.** Enable **Border** and set it to **Outline.** Enable **Border Side** and set a **Width** of **0** and a **Style** of **None.** Enable **Validation Builder** and set **Required** to **True.**
4. Select the second **TextField** and repeat the same action on the 3. except for the **Validation Builder.** Make sure to correctly name the **TextField** description, and fill a correspondant hint.
5. Select the **DateTimePicker** and name it "date". Enable **Decoration** and set an **Hint Text** like "Select due date". Enable **Hint Style** and set the **Theme Text Style** as **Title small**, set the **Text Color** as you wish (#FF33AA23 in the example). Enable **Prefix Icon** and search the icon "month", set the same **Color** as above. Set the same **Border** and **Validation Builder** you did on 3.
6. Select the **Row,** set a **Padding** of **5** on **Top** and **10** on **Bottom,** set **MainAxisAlignment** to **Space Between** and set **MainAxisSize** to **Max.**
7. Select the first **IconButton** in **Row,** name it "priorityButton". Add a **Padding** of **10** on the **right**. Enable **Icon** and search for the icon "flag", set its **Color** to a **Conditional Value** that have **3** conditions that evaluates if the **WidgetState ChoiceChip value** is **Equal To 1, 2,** or **3** and set a **Default Value** to **Outline.** (see capture below).

<figure><img src="/files/0uvpRr3LHCQeOCu5AE5h" alt="" width="375"><figcaption><p>Color Conditional Value</p></figcaption></figure>

8. Select the **ChoiceChip** and enable **Decoration** and set **Is Dense** and **Is Collapsed** to **True.** Set the same **Border** as you did on 3. Set **Initial Value** to **0** and below in **Options** add 3 values : **1**, **2** and **3**.
9. Select the second **IconButton** in **Row,** name it "createTaskButton". Add **Style Type** to **Elevated Button**. Enable **Style** and set **Background Color** to **Primary.** Set a **Padding** of **10** on **all.** Enable **Shape** and set it to **Circle.**
10. Select the **Icon** and enable **Icon,**  search for "check" and set the **Color** to #FFFFFFFF.

You should have the same result as shown below.

<figure><img src="/files/F394Cz3UW5KvJhi3ShpJ" alt=""><figcaption><p>Create Task with Style and Theme</p></figcaption></figure>

The next step is to add the actions to this layout.

{% content-ref url="/pages/DmEpXXQYYiKcOJ02nRZ2" %}
[Add Actions in CreateTast component](/cookbook/my-first-application/add-actions-in-createtast-component.md)
{% endcontent-ref %}


---

# 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://docs.goril.app/cookbook/my-first-application/create-the-createtask-component.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.