Add Actions in EditTask component

In this task, you will add all the actions mandatory to correctly edit a task.

In order to update a task, we first have to ensure our widgets interacts well together.

To update a task we have to make sure the EditTask component is opened with a Task in parameter and the modification update the global layout of the view.

1. Select the top widget EditTask and add a Parameter named "task" of Type Task.

EditTask task parameter

1. Add an Observable named "taskObs" with Field Type Task. Set the Default Value of title to "Default", of date to Now in DateFormat dropdown, of isDone to False, of comments to an empty list by clicking on Add Value then deleting the value 0.

EditTask taskObs observable

1. Select the widget title and set an Initial Value of Observable taskObs -> (Task) title.

2. Select the widget description and set an Initial Value of Observable taskObs -> (Task) description.

3. Select the widget date and set an Initial Value of Observable taskObs -> (Task) date.

4. Select the widget priority and set an Initial Value of a Conditional Value that evaluates the value of Observable taskObs -> (Task) priority value to set a Static From Value of it. The priority can have the values 1, 2, 3 or a Default Value of 0. (see capture below).

priority Initial Value Conditional Value

priority Initial Value Conditional Value

1. Select the Column and set a Conditional Visibility to True if the Observable taskObs -> (Task) comments Is Not Empty. In the Generate Children tab, set the Data Source as Observable taskObs -> (Task) comments. Select the Text inside and set the Text as Combined Text with two Sources : "-" and the Generated Variable comments -> String.

The layout is correctly updating itself on changes, now you need to add actions to the component.

1. Add an Action to EditTask component named "setObs" that Set Observable taskObs - (Task) with the task -> Task from the Parameters.

Init EditTask observable

1. Add an Action to cancelButton that Navigate Back.

Action on cancelButton

1. Add a Conditional Action to saveButton that evaluates the Widget State Form form. In the True branch, add an Action "save" Navigate Back that Return a Task Value From Value. The title is the value of the Widget State title Force Not Null. The date is the value of the Widget State date Force Not Null. The description is the value of the Widget State description. The isDone is the value of the Observable taskObs -> (Task) isDone. The priority is a Conditional Value that evaluates IF the Widget State priority Is Not Null then the value is the Widget State priority Force Not Null. The comments is the value of the Observable taskObs -> (Task) comments.

saveButton Form condition

save action

Before getting to the next step we have to add a Custom Function named "addComment", that takes two parameters : a String comment and a Task task. The Return Type is a List<String>.

Between the two commented line add the following import :

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

Set the following code :

  List<String> comments = List.of(task.comments);
  comments.add(comment);
  return comments;

We can now use this function everywhere in the application.

1. Add a Conditional Action to addComment that evaluates IF the Widget State comment Is Not Empty. In the True branch add an Action named "updateTaskObservable" of Type Set Observable, the Observable Source is taskObs - (Task), the Update Type is Set Value. The fields in Update Source are the same as 10. except for the comments. In this case comments is a Custom Function addComment -> List<String>, the parameter comment being the Widget State comment Force Not Null and the parameter task being the Observable taskObs -> (Task).

addComment is not empty condition

updateTaskObservable action

Now, the EditTask component return a task and navigate back to the HomePage. But we have no action to actually open this component and handle the returned task.

1. In the HomePage select the editButton, open the Action Flow Editor and create an action named "showEditTask" of Type Show Bottom Sheet. Select your EditTask component and set Generated Variable itemTaskList -> Task as Parameters and set a Return Value of type Task?. The return value is nullable because the user can cancel the bottom sheet without updating a task. Click on Save on the bottom on the panel.

editButton showEditTask action

1. Below add a Condition that evaluates IF the Action Output of showEditTask->Task? IS NOT NULL. Let the Default Value empty.

showEditTask Action Output null condition

1. In the True branch of the condition, add an action named "updateLocalState" of Type Update Local State. The Update Local State Source is your taskList - (List<Task>) local state. Set the Update Type to Update Item At Index, the Item Index is From Generated Index and the Update Source to Action Output showEditTask -> Task? Force To Null.

updateLocalState Action

1. Add an action named "updateObservable" of type Set Observable. Set the Observable Source with your observable taskList - (List<Task>) and the Update Type with Set Value. Set the Update Source to Local State taskList -> List<Task>.

updateObservable Action

Now, you should be able to edit a task, and have the same result as shown below.

Edit a Task

Congratulations ! You have completed the ToDo application tutorial !