# 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 %}

<figure><img src="/files/LY79I8vTQ7KYDN8nkScR" alt="" width="375"><figcaption><p>Test Default Value</p></figcaption></figure>

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 %}

<figure><img src="/files/NRq6glL04II5Fp9DhgXx" alt=""><figcaption><p>How to add a Preview Value</p></figcaption></figure>

<figure><img src="/files/9w3Wvq79jlo3jL0fGIqv" alt="" width="375"><figcaption><p>Before Preview Value</p></figcaption></figure>

<figure><img src="/files/1of66yNKP71hjDU7iZCt" alt="" width="375"><figcaption><p>After Preview Value</p></figcaption></figure>

#### 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.**&#x20;

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.

<figure><img src="/files/exeft5Gxa4UfsWIiIRKx" alt="" width="375"><figcaption><p>Title</p></figcaption></figure>

#### 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.**&#x20;
6. In **Default Value** select **Static.**
7. Click on **Save.**

You should now have the same result as shown below.

<figure><img src="/files/wWEdhvawAO0gDlZ7x4k6" alt="" width="375"><figcaption><p>Description</p></figcaption></figure>

#### 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](/main-pages/custom-code/custom-functions.md) 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 :&#x20;

```dart
import 'package:intl/intl.dart';
```

7. Set the following code to complete the function :&#x20;

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

<figure><img src="/files/OaFDXyTf7vyzxiMgzwKz" alt="" width="375"><figcaption><p>Date </p></figcaption></figure>

#### 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\<String>** in **Generated Variable IS NOT EMPTY.**
4. &#x20;Click on the **Icon** and search for **Comment.**&#x20;
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](/main-pages/custom-code/custom-functions.md) 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\<String>.**
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\<String>** in **Generated Variable IS NOT EMPTY** **THEN** the return value is the **Custom Function** with said **comments -> List\<String>** in parameter.
10. In **Default Value** select **Static.**

<figure><img src="/files/gtnnfvwvsabLj51SY7mt" alt="" width="375"><figcaption><p>Condition on comment Text</p></figcaption></figure>

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.

<figure><img src="/files/0VVVKcqaTN9IGJ2DlZoB" alt="" width="375"><figcaption><p>Comment Icon and Text</p></figcaption></figure>

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

<figure><img src="/files/9YJgIo3UKMZ3nKemUTnJ" alt="" width="375"><figcaption><p>Edit Button</p></figcaption></figure>

Now that the HomePage layout is completed, the next step is to add some actions in it !

{% content-ref url="/pages/13OGbA0l2oK6S05ByH9G" %}
[Add Update Task Action in HomePage](/cookbook/my-first-application/add-update-task-action-in-homepage.md)
{% endcontent-ref %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.goril.app/cookbook/my-first-application/complete-the-homepage-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.