# 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="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&#x26;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&#x26;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&#x26;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&#x26;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&#x26;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="create-the-createtask-component" %}
[create-the-createtask-component](https://docs.goril.app/cookbook/my-first-application/create-the-createtask-component)
{% endcontent-ref %}