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.
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.
.gif?alt=media&token=e986280b-5986-4eaa-8d91-7e41d6509edf)
After adding a number of items, the list created using ListTile looks like this:
.gif?alt=media&token=b6a2c1e5-6667-4b53-a74c-59f32fb3fa11)
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).
.gif?alt=media&token=5aedb2a0-6cc4-4e31-a6f2-407b7adc7c2c)
Using various properties under the Style Properties section, you can customize the ListTile as per your design.
The Leading Icon appears at the start (left side) of the ListTile.
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.
.gif?alt=media&token=ab06739c-1490-45ab-b2c1-56e58b63e4c7)
To perform any action on click of the ListTile, add an Action in FlutterFlow. You can find the instructions on adding the Action here.
To show the data retrieved from your Firestore collection and document into the ListTile widget, ensure you:
Last modified 7mo ago