# Complete the HomePage Layout
To complete the HomePage layout, we have to define the general settings of the **CheckboxListTile** and the widgets inside it.
1. Select the **CheckboxListTile** and in the **Settings Panel**, click on the **Function** button of the **Value** field.
2. Change the **From Value** to **Generated Variable.**\
The **Generated Variable** comes from the **Data Source** we have set in **ListView.**\
So, for each value in **taskList,** it can check its properties.
3. The **Generated Variable** insert is now red because we didn't set a a value.
4. Click on it and fill the field with **itemTaskList -> Task** and **isDone -> bool.**\
Here we set the value of the **CheckboxListTile** to **True** if the field **isDone** in a task is **True**, and **False** otherwise.
5. Search the field **Tile Color** and set your desired color (#FFFFFFFF in the example).
6. Search the field **Control Affinity** and set it to **Leading.**
7. Search the field **Checkbox Shape**, enable it and set the shape to **Circle.**
We are going to set the color of the leading circle icon depending on the **Priority** property in our **Task.** ( 1 being high, 2 being medium, 3 being low and 0 being default/none).
8. Search for the field **Side** (Beware to not choose the **Side** field inside **Checkbox Shape**) and enable it. Inside it, click on the **Function** button of the field **Color.**
9. Change the **From Value** to **Conditional Value.**
10. Click on **Add Conditional Value.**
11. Open the **Condition 0** created and fill, below the **IF** block, the field that define if it's a **Single** or **Multiple** condition to **Single**.
12. In the **First Value** insert, change the **From Value** to **Generated Variable** and select the **itemTaskList -> Task** and **priority -> int?** inside.
13. Let the **Equal To** condition type.
14. In the **Second Value** insert, set the **From Value** to **1.**
15. In the **Then** insert, set the **From Value** to the color desired (name Error in the example).
16. Click on **Save.**
17. Repeat the step **10-16** with the **From Value** from **Second Value** to 2 and the **From Value** from **Then** to the color desired (#FFFF6E40 in the example).
18. Repeat the step **10-16** with the **From Value** from **Second Value** to 3 and the **From Value** from **Then** to the color desired (#FF33AA23 in the example).
19. Set the **Default Value** to **On Surface.**
20. Click on **Save.**
{% hint style="info" %}
In the **Local State** you can add some **Default Value** to the **taskList** and fill the field with different value to watch on a simulator or a device the different **Conditional Value** you have set.
{% endhint %}
Test Default Value
You can see the different color on the check icon you have set in the conditional value of the **CheckboxListTile Value.**
The next step is to set the value of the other fields of our Tasks, i.e the Title, Subtitle, Date, Comments icon and number, and Edit Button.
{% hint style="info" %}
If you want to see some value in the **Application Preview** instead of a simulator/device, you can add a **Preview Value** by clicking on the **Preview** button when hovering a field.
{% endhint %}
How to add a Preview Value
Before Preview Value
After Preview Value
#### Title
1. Select the **Text** inside **CheckboxListTile>Title.**
2. Click on the **Function** button of the field **Text.**
3. Change the **From Value** to **Generated Variable.**
4. Set the fields with **itemTaskList -> Task** and **title -> String.**
5. Click on **Save.**
6. Set a **Padding** of **10** on the **Top.**
7. Set **Ellipsis** in **Overflow.**
If you run again the project on your simulator/device you will see an update of the title of the default value.
You should now have the same result as shown below.
Title
#### Subtitle
1. Select the **Column** inside **CheckboxListTile>Subtitle** and set the **Cross Axis Alignment** to **Start.**
2. Select the **Text** inside **CheckboxListTile>Subtitle>Column.**
3. Click on the **Function** button of the field **Text.**
4. Change the **From Value** to **Generated Variable.**
5. Set the fields with **itemTaskList -> Task** and **title -> String.**
6. In **Default Value** select **Static.**
7. Click on **Save.**
You should now have the same result as shown below.
Description
#### Date
Because we want to show the **Date** with a precise format, we have to create a **Custom Function.**
1. Click on the [custom-functions](https://docs.goril.app/main-pages/custom-code/custom-functions "mention") tab.
2. Click on **Add** and choose **Functions.**
3. Fill the **Name** of the function with "dateTimeToString".
4. Set a parameter "dateTime" with a **Field Type** of **DateTime.**
5. Let the return type as **String.**
6. Between the two commented line add the following import :
```dart
import 'package:intl/intl.dart';
```
7. Set the following code to complete the function :
```dart
final now = DateTime.now();
final calculateDifference = DateTime(dateTime.year, dateTime.month, dateTime.day).difference(DateTime(now.year, now.month, now.day)).inDays;
switch (calculateDifference) {
case -1:
return 'Yesterday';
case 0:
return 'Today';
case 1:
return 'Tomorrow';
default:
return DateFormat('dd/MM - hh:mm').format(dateTime);
}
```
We can now use this function everywhere in the application.
8. Select the **Row** inside **CheckboxListTile>Subtitle>Column** and add a **Padding** of **10** on **Top.**
9. Select the **Text** inside **CheckboxListTile>Subtitle>Column>Row>Flexible.**
10. Click on the **Function** button of the field **Text.**
11. Change the **From Value** to **Custom Function.**
12. Select **dateTimeToString.**
13. Click on the **Function** button of the Parameters insert.
14. Change **From Value** to **Generated Variable.**
15. Click on the **Function** button of the **dateTime** parameter.
16. Select **itemTaskList -> Task** and **date -> DateTime.**
17. Click on **Save.**
The date is now well formatted and displayed but it lacks some colors to quickly see the priority.
16. Enable **Text Style.**
17. Click on the **Function** button of **Text Color.**
18. Set the same **Conditional Value** as the one you did in the steps **9-20** in the **CheckboxListTile** widget in the beginning of this task.
You should now have the same result as shown below.
Date
#### Comment Icon and Text
1. Select the **Icon** inside **CheckboxListTile>Subtitle>Column>Row.**
2. Set a **Padding** of **5** on the **Left** and **Right.**
3. Enable **Conditional Visibility** and set a **Single** condition which if the field **comments -> List\** in **Generated Variable IS NOT EMPTY.**
4. Click on the **Icon** and search for **Comment.**
5. Set a **size** of **18.**
6. Set **Outline** as **Color.**
We have to create a custom function to retrieve the length of the comments list to show it next to the previous **Icon.**
1. Click on the [custom-functions](https://docs.goril.app/main-pages/custom-code/custom-functions "mention") tab.
2. Click on **Add** and choose **Functions.**
3. Fill the **Name** of the function with "getListLength".
4. Set a parameter "list" with a **Field Type** of **List\.**
5. Set the return type as **int.**
6. Set the following code to complete the function :
```dart
return list.length;
```
We can now use this function everywhere in the application.
7. Select the **Text** inside **CheckboxListTile>Subtitle>Column>Row.**
8. Click on the **function** button of the field **Text.**
9. Set a **Conditional Value** that evaluates a **single** condition : **IF** the field **comments -> List\** in **Generated Variable IS NOT EMPTY** **THEN** the return value is the **Custom Function** with said **comments -> List\** in parameter.
10. In **Default Value** select **Static.**
Condition on comment Text
10. Click on **Save.**
11. Enable **TextStyle,** inside set a **FontSize** of **14** and a **TextColor** of **Outline.**
You should now have the same result as shown below.
Comment Icon and Text
#### Edit button
1. Select the **IconButton** inside **CheckboxListTile>Secondary.**
2. Set the **Name** as "editButton".
3. Set the **Icon** as **Edit** and the **Color** as **Primary.**
You should now have the same result as shown below.
Edit Button
Now that the HomePage layout is completed, the next step is to add some actions in it !
{% content-ref url="add-update-task-action-in-homepage" %}
[add-update-task-action-in-homepage](https://docs.goril.app/cookbook/my-first-application/add-update-task-action-in-homepage)
{% endcontent-ref %}
