How to create slidable list item in Flutter

A Flutter implementation of slidable list item with directional slide actions that can be dismissed.

Features

• Accepts primary (left/top) and secondary (right/bottom) widget lists as slide actions.
• Can be dismissed.
• 4 built-in action panes.
• 2 built-in slide action widgets.
• 1 built-in dismiss animation.
• You can easily create custom layouts and animations.
• You can use a builder to create your slide actions if you want special effects during animation.
• Closes when a slide action has been tapped (overridable).
• Closes when the nearest Scrollable starts to scroll (overridable).
• Option to disable the slide effect easily.

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  flutter_slidable:

In your library add the following import:

import 'package:flutter_slidable/flutter_slidable.dart';

For help getting started with Flutter, view the online documentation.

Constructors

You can create a Slidable in two different ways:

• By calling the Slidable constructor and passing a list of slide actions.
• By calling the Slidable.builder constructor and passing slide action builders, if you want special effects during the animation.

A Slidable needs multiple things:

• Slide actions (see below for details). They can be any widget. For convenience, this package has 2 built-in side action widgets.
• A slide action pane widget. This is what controls the layout and the animation of the slide menu.
• An extent ratio between a slide action extent and the item extent.
• A child.

The actions contains the slide actions that appear when the child has been dragged down or to the right. The secondaryActions contains the slide actions that appear when the child has been dragged up or to the left.

A direction parameter lets you choose if you want actions to appear when you slide horizontally (default) or vertically.

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'),
    ),
  ],
);

Built-in slide actions

This package comes with 2 kinds of slide actions:

• SlideAction, which is the most flexible. You can choose a background color, or any decoration, and it takes any widget as a child.
• IconSlideAction, which requires an icon. It can have a background color and a caption below the icon.

Built-in action panes

This package comes with 4 kinds of action panes:

SlidableBehindActionPane

The slide actions stay behind the item while it’s sliding:

SlidableScrollActionPane

The slide actions follow the item while it’s sliding:

SlidableDrawerActionPane

The slide actions animate like drawers while the item is sliding:

SlidableStrechActionPane

The slide actions stretch while the item is sliding: