# 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.
Create EditTask Layout
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.**
Icon color conditional value
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.**
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.
EditTask Themed Layout
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 %}
---
# 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-edittask-component.md?ask=
```
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.