> 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

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 %}