I want the ListTile to show extra icons when the user drag it horizontally from right to left like the behavior in the screenshots.

The needed output demo: A ListTile A Dragged ListTile

My code:

return ListTile(
          contentPadding: const EdgeInsets.all(5),
          onTap: () {},
          onLongPress: () {},
          horizontalTitleGap: 10,
          minVerticalPadding: 15,
          leading: CircleAvatar(
            radius: 34,
            child: Text(
              account['Name']!.substring(0, 1),
              style: const TextStyle(fontSize: 34, fontWeight: FontWeight.bold),
            ),
          ),
          title: Text(
            account['Name']!,
            style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          ),
          subtitle: FittedBox(
              alignment: Alignment.centerLeft,
              fit: BoxFit.scaleDown,
              child: Text(account['Email']!)),
          trailing: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              GestureDetector(
                onTap: () {},
                child: const Icon(
                  Icons.favorite_border,
                ),
              ),
              GestureDetector(
                onTap: () {},
                child: const Icon(
                  Icons.edit,
                ),
              ),
              GestureDetector(
                onTap: () {},
                child: const Icon(
                  Icons.delete,
                ),
              ),
            ],
          ),
        );

CodePudding user response：

You will need the flutter_slidable widget . See here : https://pub.dev/packages/flutter_slidable . Then just follow the instructions . If you want visual aid , please see here : Flutter Slidable

From the flutter slidable widget docs :

Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
child: Container(
color: Colors.white,
child: ListTile(
  leading: CircleAvatar(
    backgroundColor: Colors.indigoAccent,
    child: Text('$3'),
    foregroundColor: Colors.white,
  ),
  title: Text('Tile n°$3'),
  subtitle: Text('SlidableDrawerDelegate'),
  ),
),
actions: <Widget>[
  IconSlideAction(
  caption: 'Archive',
  color: Colors.blue,
  icon: Icons.archive,
  onTap: () => _showSnackBar('Archive'),
   ),
   IconSlideAction(
     caption: 'Share',
     color: Colors.indigo,
     icon: Icons.share,
     onTap: () => _showSnackBar('Share'),
   ),
 ],
   secondaryActions: <Widget>[
   IconSlideAction(
     caption: 'More',
     color: Colors.black45,
     icon: Icons.more_horiz,
     onTap: () => _showSnackBar('More'),
   ),
   IconSlideAction(
     caption: 'Delete',
     color: Colors.red,
     icon: Icons.delete,
     onTap: () => _showSnackBar('Delete'),
   ),
 ],
 );