> For the complete documentation index, see [llms.txt](https://docs.goril.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.goril.app/cookbook/my-first-application/create-the-edittask-component.md).

# Create the EditTask component

The same way you did for the CreateTask, you are going to create a **New Component.**

1. Create an **New Component** named "EditTask".
2. Add the same pattern as the **CreateTask** component : **Container>SafeArea>SingleChildScrollView>Form>Card>Column.**
3. Add a **Row** composed of **2 Button**, add a **Text** in each **Button.**
4. Add a **Row** composed of an **Icon** and a **TextField** in a **Flexible.**
5. Add a **Row** composed of an **Icon** and a **TextField** in a **Flexible.**
6. Add a **Row** composed of an **Icon** and a **DateTimePicker** in a **Flexible.**
7. Add a **Row** composed of an **Icon** and a **ChoiceChip** in a **Flexible.**
8. Add a **Divider.**
9. Add a **Column** composed of a **Text.**
10. Add a **Row** composed of a **TextField** in a **Flexible** and an **IconButton.**

You should have the same result as shown below.

<figure><img src="/files/ZL1NXTzDuVn3xs3msBNC" alt=""><figcaption><p>Create EditTask Layout</p></figcaption></figure>

With a completed layout, you now have to 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 **CrossAxisAlignment** to **Start.**
3. Select the first **Row** and set the **MainAxisAlignment** to **Space Between.**
4. In this **Row** select the first **Button**, name it "cancelButton" and set the **Style Type** to **Outlined Button,** enable **Style,** enable **Side** and set **Color** with **Error.** \
   Select the **Text** inside, set the **Text** as "Cancel", enable **TextStyle** and add the same color as above in **TextColor.**
5. Select the second **Button**, name it "saveButton" and repeat the step above with the color #FF33AA23 and the **Text** "Save".
6. Select the **ChoiceChip** and name it "priority".
7. Select the **Icon** in the second **Row**, enable **Icon** and search for "circle outlined", set its **Color** to a **Conditional Value** that have **3** conditions that evaluates if the **WidgetState priority value** is **Equal To 1, 2,** or **3** and set a **Default Value** to **Outline.** (see capture below).\
   Select the **TextField** inside the **Flexible,** name it "title" and enable **Decoration,** set **Is Dense** to **True,** enable **Border** and set it to **Outline**, enable **Border Side** and set the **Width** to **0** and the **Style** to **None**, enable **Validation Builder** and set **Required** to **True.**

<figure><img src="/files/7UnFk4z6lAx73CTkem5m" alt="" width="375"><figcaption><p>Icon color conditional value</p></figcaption></figure>

7. Select the **Icon** in the third **Row**, enable **Icon** and search for "text", set the **Color** to **Outline.**\
   Select the **TextField** inside the **Flexible**, name it "description" and repeat the **Decoration** step from the **TextField** "title" without the **Validation Builder** part and with an **Hint Text** of "Description" in addition.
8. Select the **Icon** in the fourth **Row**, enable **Icon** and search for "today", set the same **Conditional Value** in **Color** as the **Icon** in 6.\
   Select the **DateTimePicker** inside the **Flexible**, name it "date" and repeat the **Decoration** step from the **TextField** "title".
9. Select the **Icon** in the fifth **Row**, enable **Icon** and search for "flag", set the same **Conditional Value** in **Color** as the **Icon** in 6.\
   Select the **ChoiceChip** "priority" inside the **Flexible** and enable **Decoration** and set **Is Dense** and **Is Collapsed** to **True.** Set the same **Border** as you did on 6. Set **Initial Value** to **0** and below in **Options** add 3 values : **1**, **2** and **3**.
10. Select the **Divider** and set the **Thickness** to **2.**
11. Select the **Column** and set **Cross Axis Alignment** to **Start.**\
    Select the **Text,** add a **Static Preview Value** of "My comment" and enable **TextStyle** to set a **FontSize** of **16.**&#x20;
12. Select the last **Row,** set a **Top Padding** of **20**, **MainAxisAlignment** to **Space Between** and **MainAxisSize** to **Max.**\
    Select the **TextField** inside the **Flexible** and name it "comment", enable **Decoration** set an **Hint Text** of "Add comment", enable **Border** and set a **BorderRadius** of 10 on all.\
    Select the **IconButton,** name it "addComment" and set the **Icon** "send" of **Size 32** and **Color Primary.**

You should have the same result as shown below.

<figure><img src="/files/DEqbBwi8DpizNlZJPOhO" alt=""><figcaption><p>EditTask Themed Layout</p></figcaption></figure>

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

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