> 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/add-update-task-action-in-homepage.md).

# Add Update Task Action in HomePage

In this task, you will add the update task action in the 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FhSEloEiQHdWrYuNeak0x%2FCleanShot%202023-06-07%20at%2011.28.40%402x.png?alt=media&amp;token=42eb4d0e-3e63-49d3-878d-da03ee5b3ce9" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FHDqgVvOmlfVxgOuZ01XP%2Ftodo_condi.png?alt=media&amp;token=64c2d5dc-2a25-4047-a687-8eb12fc18a49" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FKEVu568yONGSzK2uVpCW%2Ftodo_sna.png?alt=media&amp;token=6f1c462f-f396-4e6d-acd0-8907edf4350d" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FZ36rs75wWqfPbamXAECY%2Ftodo_obscon.png?alt=media&amp;token=c326826b-f571-43aa-ae56-ca4344f3f2f3" 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="https://2361990732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FruhMqqOvKXgZPke0Ehds%2Fuploads%2FYiPU8Y36Larb3VzVO3kZ%2FCleanShot%202023-06-07%20at%2012.23.10.gif?alt=media&amp;token=dac519f4-01dd-4f0b-9764-99ba9544746f" 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 %}