Migration from version 0.6.0 to version 1.0.0

There are a lot of breaking changes between the version 0.6.0 and the 1.0.0. This document aims to identify them and to help you to migrate your code.

Actions

In the 0.6, you can use an IconSlideAction to show an action with an icon and a label. In the 1.0, this widget is now called SlideAction:

0.6

IconSlideAction(
  caption: 'Archive',
  color: Colors.blue,
  icon: Icons.archive,
  onTap: () {},
);

1.0

SlidableAction(
  label: 'Archive',
  backgroundColor: Colors.blue,
  icon: Icons.archive,
  onPressed: (context) {},
);

Action Pane

In the 0.6, the primary and secondary action panes share the same properties, they use the same kind of animation and have the same extent ratio. While this is simple to set up, it does not answer to all kind of usages. The 1.0 aims to fix that by decoupling the action pane from each other.

0.6

In the 0.6 you would write something like this:

Slidable(
  actionPane: SlidableDrawerActionPane(),
  actionExtentRatio: 0.25,
  child: const MyWidget(),
  actions: <Widget>[
    IconSlideAction(
      caption: 'Archive',
      color: Colors.blue,
      icon: Icons.archive,
      onTap: () {},
    ),
  ],
  secondaryActions: <Widget>[
    IconSlideAction(
      caption: 'Delete',
      color: Colors.red,
      icon: Icons.delete,
      onTap: () {},
    ),
  ],
);

1.0

The same widget would be write like that with the 1.0 version:

Slidable(
  startActionPane: ActionPane(
    motion: const DrawerMotion(),
    extentRatio: 0.25,
    children: [
      SlidableAction(
        label: 'Archive',
        backgroundColor: Colors.blue,
        icon: Icons.archive,
        onPressed: (context) {},
      ),
    ],
  ),
  endActionPane: ActionPane(
    motion: const DrawerMotion(),
    extentRatio: 0.25,
    children: [
      SlidableAction(
        label: 'Delete',
        backgroundColor: Colors.red,
        icon: Icons.delete,
        onPressed: (context) {},
      ),
    ],
  ),
  child: const MyWidget(),
);

Motions

In the 0.6, the type of the action pane defined the animation behavior. In the 1.0, this behavior is controlled by a motion. This is the lookup table:

ActionPane	Motion
SlidableBehindActionPane	BehindMotion
SlidableScrollActionPane	ScrollMotion
SlidableDrawerActionPane	DrawerMotion
SlidableStrechActionPane	StretchMotion

Dismissible

In the 0.6, the dismissal member of the Slidable widget handled the way the Slidable could be dismissed. Now, in the 1.0, you will have to set a DismissiblePane to the dismissible member to have the same behavior.

0.6

Slidable(
  key: ValueKey(0), // A key is necessary.
  dismissal: SlidableDismissal(
    child: SlidableDrawerDismissal(),
    onDismissed: (actionType) {
      // Remove this Slidable from the widget tree.
    },
  ),
);

1.0

Slidable(
  key: ValueKey(0), // A key is necessary.
  startActionPane: ActionPane(
    dismissible: DismissiblePane(
      onDismissed: () {
        // Remove this Slidable from the widget tree.
      },
    ),
  ),
);