ListTile

The ListTile widget contains a Title, Subtitle, Leading Icon, and Trailing Icon. The ListTile widget is typically used to populate a ListView.

For example, you can use the ListTile to show a list of To Do items or emails.

Add a ListTile to Your Project

Here's an example of how you can use a ListTile widget in your project:

First, drag the ListView widget from the Layout Elements tab (in the Widget Panel) or add it directly from the widget tree.
Drag the ListTile widget from the Base Elements tab and drop it inside the ListView.
Select ListTile from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Title section.
Change the Text property to Email.
Scroll down below and find the Subtitle section. Change the property to the From:xyz.

At this point, you have one item added to the list. To fill the ListView with more items simply copy-paste the ListTile widget.

To copy-paste the ListTile widget:

Select the ListTile widget.
Right-click on it and select Copy. You can also use the keyboard shortcut Ctrl+C or Command+C.
Select the ListView widget.
Right-click on it and select Paste. You can also use the keyboard shortcut Ctrl+V or Command+V.

After adding a number of items, the list created using ListTile looks like this:

Making The ListTile Slidable

You may want the ListTile widget to reveal a list of actions that can be taken on a ListTile when a user swipes right. Using the Slidable properties you can achieve this behavior.

To make the ListTile slidable:

Select ListTile from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Slidable Properties section.
Checkmark the Slidable property (click on it).

Learn more about SlidableListTile here.

Changing the Properties

The Properties Panel can be used to customize the appearance and behavior of your widget.

Add Padding

Here are the instructions on how to add padding.

Styling The ListTile

Using various properties under the Style Properties section, you can customize the ListTile as per your design.

Here are the instructions on styling the ListTile.

Customizing The Title

Here are the instructions on customizing the title.

Customizing The Subtitle

Here are the instructions on customizing the subtitle.

Add A Leading Icon

The Leading Icon appears at the start (left side) of the ListTile.

Here are the instructions on adding a leading icon.

Customize The Trailing Icon

The Trailing Icon appears at the end (far right side) of the ListTile. By default, the trailing icon is an arrow.

Here's an example of how you can customize the trailing icon:

Select ListTile from the widget tree or from the canvas area.
Move to the Property Editor (on the right side of your screen) and scroll down to the Trailing Icon section.
Click on the Trailing Icon button, search for a new icon and select the icon you want to use.
Set the Icon Size by entering the value in the Icon Size property.
To change the color, find the Icon Color property, click on the box next to Unset, select the color, and then click Use Selected Color. Or click on Unset and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.