How to create a Component to display ToDo Item – Part 2

In the previous post, we have seen how to store data no-code way for a ToDO app. Now let’s see how to create a component to display ToDo item.
This is the list screen that we need to create.

If you observe closely then each ToDO item has a Title, Subtitle, Leading Icon, and Trailing check box. These are the components of a ListTile widget.
Each ListTile widget has been placed vertically in a Column. So, the ListTile widget has been reused as a Component

Here are the steps to add the ListTile component.

  1. Go to Components and click Create Components.

  2. Make the Width of the Container 100% and Keep the height 100 Pixels.

  3. Reset the Fill Color.

  4. Drag List Tile to the screen.

  5. We need to add Title, SubTitle, Leading, and Trailing Widgets.
    Add the Text Title to the List Tile. You can do this in 3 ways. Drag Text to the Screen, Navigator, or Properties panel. A screen will ask you where you want to place Text Widget. Choose Title.

  6. Similarly, add a Text widget as a Subtitle.

  7. Add the Checkbox widget as a trailing icon.

  8. Search for a Check Icon and add the Check Icon as the leading icon widget.

  9. Change the Size and Color of the Icon from the Right-hand Properties Panel.

This way we can create a Component to display ToDoItem.

You may refer to Video Tutorial for the same.