# Add Update Task Action in HomePage

Now that the layout is completed, you need to add your first action : update the isDone task property on click !

#### Click on the CheckboxListTile

The click on the **CheckboxListTile** will set the done status of the task.

To update a **Task** we need a **Custom Function**.

1. Create a **Custom Function** named "updateTask".
2. Set the **Parameter task** a **Task**.
3. Set the **Return Type** as **Task.**
4. Between the two commented line add the following import : 

```dart
import 'package:todo_doc/models/models.dart';
```

7. Set the following code to complete the function : 

```dart
  final updatedTask = task.copyWith(isDone: !task.isDone);
  return updatedTask;
```

We can now use this function everywhere in the application.

8. Click on the **CheckboxListTile** and open the **Action Flow Editor.**
9. Add an **Action** with the name "update".
10. Set the **Type** to **Update Local State.**
11. Set the **Update Local State Source** to your **taskList** local state.
12. In the **Update Type** set **Set Value.**
13. Click on the **Function** button of the **Update Source.**
14. The **Update Source** is which data (i.e a list of task in this example) are we using to **Set the** **Value** in the local state.\
    Select **Custom Function** and choose **updateTask -> List\<Task>.**
15. The task parameters are **LocalState taskList -> List\<Task>** and **Generated Variable itemTaskList -> List\<Task>.**
16. Click on **Save.**

<figure><img src="/files/z2dpOtMrUUtYUo8fs0oT" alt=""><figcaption><p>Update action</p></figcaption></figure>

17. Below the **Update** action, click on the **+** and choose **Add Condition.**
18. The condition is **Single** and evaluates **IF** the **Action Parameter selected -> bool?** is **Equal To From Value True.**&#x20;

{% hint style="info" %}
The **Action Parameter** is a parameter induced by the component you are adding an action. In this case because it is a **CheckboxListTile** (so a Checkbox) the induced parameter is **selected -> bool?**

In a condition, the **From Value** is represented by a switch and true/false is the switch selected/unselected.
{% endhint %}

<figure><img src="/files/SvXnJj1YroGiTkv6AuBk" alt=""><figcaption><p>Selected Condition</p></figcaption></figure>

If the result of the condition is **True**, the task is done, we can show the user a congratulations message.

19. Below **True**, add an **Action** named "showSnackbar".
20. The **Type** of action is **Show Snackbar.**
21. Click on the **Function** button of the **Message** field.
22. Select **Combined Text** and click on **Add** below Sources.
23. Set the text to "Well Done !".
24. Add a second source with the **Generated Variable itemTaskList title.**
25. Add a third source with the text "is completed !".
26. Enable **TextStyle.**
27. Set the **TextColor** to your desired one (#FFFFFFFF in the example).
28. Set the **Background color** to your desired one (#FF33AA23 in the example).
29. Click on **Save.**

<figure><img src="/files/Ng0XqIL9CUXHudPvwovW" alt=""><figcaption><p>Show Snackbar</p></figcaption></figure>

When clicked, your task is updated and your local state as well. But if you do not update the **taskList** observable you are not going to see any visual change beside the Snackbar.

30. Beneath the condition block, add an **Action** named "updateObservable".
31. Set the **Type** as **Set Observable** and choose your **taskList** observable.
32. In **Item Index** select **Generated Index indexItemTaskList.**
33. In **Update Source** select **Local State** and your **taskList -> List\<Task>.**
34. Click on **Save.**

<figure><img src="/files/eYUE164YkA2JpHK35hnu" alt=""><figcaption><p>Completed Action</p></figcaption></figure>

The action to set a task to Done/Undone is now complete. You should have the same result as shown below.

<figure><img src="/files/YEDRXEYflM8NzxU3zfi4" alt="" width="334"><figcaption><p>Complete Update Action</p></figcaption></figure>

Now that you can update a task and set it as done/undone, the next step is to be able to create a task.

{% content-ref url="/pages/KFbB54Lra7P64MdcZNjH" %}
[Create the CreateTask component](/cookbook/my-first-application/create-the-createtask-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/add-update-task-action-in-homepage.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.