Create the base HomePage Layout

In this task, you will initialize the HomePage with an observable, set the values, create and update the layout in consequence.

To see the Function, Preview and Delete buttons, hover the desired field.

1. In the Explorer section, select the HomePage top widget and in the Settings Panel, click on the Add button below Observables.

2. Fill the field Name with taskList.

3. Select Task as Field Type in the bottom of the dropdown, in the Custom type section.

4. Click on List.

The Observable is created as shown below.

Created Observable

Because we can store our Tasks in Local State, we have to initialize the observable taskList with the current values in the local state variable taskList.

1. Open the Action Flow Editor of HomePage.

2. Click on Add Action.

3. An Action 0 appears, click on it.

4. On the Define Action right panel, fill the Action Name with "setTaskList".

5. Select Set Observable as Type.

6. In Set Observable Source select the observable we have created on the HomePage taskList - (List<Task>).

7. Let the Update Type as Set Value because we are setting the observable with a value.

8. When you Hover on the Update Source section, you can click on a button that appeared. It allows us to select a Source Value from dynamic fields.
9. Select Local State instead of From Value in the dropdown.

10. The field below allows us to select which Local State we want to use, select taskList -> List<Task>.

11. Click on Save.

Set Observable Action

Now that the observable is created, and the HomePage initializes it with the stored values of the Local State. We have to create our layout.

1. In the Toolbox section, search and drag and drop a ListView in the Body of the Scaffold.

2. Add a Card in the Children of ListView.

3. Add a CheckboxListTile in the Child of Card.

4. Add a Text in the Title of CheckboxListTile.

5. Add a Column in the Subtitle of CheckboxListTile.

6. Add a Text, then a Row below it in the Children of Column.

7. Add a Flexible in the Children of Row.

8. Add a Text in the Child of Flexible.

9. Add an Icon and a Text below Flexible in Row.

10. Add an IconButton in the Secondary of CheckboxListTile.

Without any theming, naming and settings it should looks like shown below.

HomePage initial layout

We have created a ListView with a defined layout for any item in it, now we have to set the Data Source of it with our taskList observable.

1. Click on ListView and in the Settings Panel, select the second tab, i.e the Generate Children From Variable tab.

2. Set the Type of the Data Source as List<Task>.

3. Change the From Value to Observable.

4. Select the taskList -> (List<Task>) in the list of observable.

5. Let the following field to empty, because we want a list of Task, and not a list of a property of Task like a list of the Title of all the Task.

6. Click on Save.

Now the ListView will be populated with the data from our observable. To have a visual preview, the list view shows in the Application Preview multiple items to perfect our layout.

Generate ListView item with our taskList observable

Complete the HomePage Layout