Complete the HomePage Layout

In this task, you will complete the layout of the HomePage.

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

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

  2. Change the From Value to Conditional Value.

  3. Click on Add Conditional Value.

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

  5. In the First Value insert, change the From Value to Generated Variable and select the itemTaskList -> Task and priority -> int? inside.

  6. Let the Equal To condition type.

  7. In the Second Value insert, set the From Value to 1.

  8. In the Then insert, set the From Value to the color desired (name Error in the example).

  9. Click on Save.

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

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

  12. Set the Default Value to On Surface.

  13. Click on Save.

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.

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.

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.

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.

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.

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

import 'package:intl/intl.dart';

  1. Set the following code to complete the function : 

  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.

  1. Select the Row inside CheckboxListTile>Subtitle>Column and add a Padding of 10 on Top.

  2. Select the Text inside CheckboxListTile>Subtitle>Column>Row>Flexible.

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

  4. Change the From Value to Custom Function.

  5. Select dateTimeToString.

  6. Click on the Function button of the Parameters insert.

  7. Change From Value to Generated Variable.

  8. Click on the Function button of the dateTime parameter.

  9. Select itemTaskList -> Task and date -> DateTime.

  10. Click on Save.

The date is now well formatted and displayed but it lacks some colors to quickly see the priority.

  1. Enable Text Style.

  2. Click on the Function button of Text Color.

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

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

return list.length;

We can now use this function everywhere in the application.

  1. Select the Text inside CheckboxListTile>Subtitle>Column>Row.

  2. Click on the function button of the field Text.

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

  4. In Default Value select Static.

  1. Click on Save.

  2. Enable TextStyle, inside set a FontSize of 14 and a TextColor of Outline.

You should now have the same result as shown below.

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.

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

Add Update Task Action in HomePage
PreviousCreate the base HomePage LayoutNextAdd Update Task Action in HomePage

Last updated