SlidableListTile

The SlidableListTile is a special type of ListTile widget that reveals a list of actions that can be taken on a ListTile when a user swipes right.

Add a SlidableListTile to Your Project

Here's an example of how you can use a SlidableListTile 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 SlidableListTile 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 Item 1.
Scroll down below and find the Subtitle section. Change the property to the Item description.

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

To copy-paste the SlideableListTile widget:

Select the SlideableListTile widget (called SlideableActionWidget in the Widget Tree).
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 SlidableListTile looks like this:

Opening the Slidable Action in the editor allows you to customize the Slideable widget.

To open/close the Slidable Action in the editor:

Select ListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Slidable Properties section.
Click on the Open Slidable button to open the action in the editor.
Click on the Close Slidable button to close the action.

The default SlidableListTile adds one icon and text with the background color set to blue. You may want to change it to match your design.

Here's an example of how you can update the icon, text, and background color of slidable action:

First, open the Slidable Action in the editor.
Select SlidableActionWidget (Under the ListTile) from the widget tree.
Move to the Property Editor and find the Slidable Action Widget Properties section.
Change the Text property to Delete.
Find the Color property below and click on the box next to Blue, select the Red color, and then click Use Selected Color or click on Blue and enter a Hex Code directly. You can also choose the color by clicking on the Palette and Simple button.
To change the icon, find the Icon Selector property, Click on the button named Share then search and select the icon name with delete.

To add a Slidable Action:

Select ListTile from the widget tree or from the canvas area.
Move to the Property Editor and scroll down to the Slidable Properties section.
Click on the Add Slidable Action button.

To remove any Slidable Action:‌

Select SlidableActionWidget (Under the ListTile) which you want to remove.
Hit the Delete button on the keyboard and the Tab will be deleted from the widget tree. You can also delete the Tab by right-clicking in the widget tree and selecting Cut.

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

Here are the instructions on how to add padding.

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

Here are the instructions on styling the SlidableListTile.

Here are the instructions on customizing the title.

Here are the instructions on customizing the subtitle.

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

Here are the instructions on adding a leading icon.

The Trailing Icon appears at the end (far right side) of the ListTile.

Here's an example of how you can add a 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 None button then search and select the icon name from the image picket popup.
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.