# 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FxlBUo8c0hJqQHkwb0JO7%2Fa.png?alt=media&#x26;token=dd6445dd-fc5a-4911-8cd6-7a6db40df731" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FsOR2iDxTARCAokSyEocF%2Fb.png?alt=media&#x26;token=35ead856-654f-453d-9d0d-b6d0ccd8caed" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2F8X1JRWDuohAuBVIyoe0x%2Fc.png?alt=media&#x26;token=13283ece-7085-48c3-adef-b25982332426" 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="add-actions-in-createtast-component" %}
[add-actions-in-createtast-component](https://docs.goril.app/cookbook/my-first-application/add-actions-in-createtast-component)
{% endcontent-ref %}