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 :

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

1. Set the following code to complete the function :

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

We can now use this function everywhere in the application.

1. Click on the CheckboxListTile and open the Action Flow Editor.

2. Add an Action with the name "update".

3. Set the Type to Update Local State.

4. Set the Update Local State Source to your taskList local state.

5. In the Update Type set Set Value.

6. Click on the Function button of the Update Source.

7. 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>.

8. The task parameters are LocalState taskList -> List<Task> and Generated Variable itemTaskList -> List<Task>.

9. Click on Save.

Update action

1. Below the Update action, click on the + and choose Add Condition.

2. The condition is Single and evaluates IF the Action Parameter selected -> bool? is Equal To From Value True.

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.

Selected Condition

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

1. Below True, add an Action named "showSnackbar".

2. The Type of action is Show Snackbar.

3. Click on the Function button of the Message field.

4. Select Combined Text and click on Add below Sources.

5. Set the text to "Well Done !".

6. Add a second source with the Generated Variable itemTaskList title.

7. Add a third source with the text "is completed !".

8. Enable TextStyle.

9. Set the TextColor to your desired one (#FFFFFFFF in the example).

10. Set the Background color to your desired one (#FF33AA23 in the example).

11. Click on Save.

Show Snackbar

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.

1. Beneath the condition block, add an Action named "updateObservable".

2. Set the Type as Set Observable and choose your taskList observable.

3. In Item Index select Generated Index indexItemTaskList.

4. In Update Source select Local State and your taskList -> List<Task>.

5. Click on Save.

Completed Action

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

Complete Update Action

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

Create the CreateTask component