-
-
Notifications
You must be signed in to change notification settings - Fork 571
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.
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
:
IconSlideAction(
caption: 'Archive',
color: Colors.blue,
icon: Icons.archive,
onTap: () {},
);
SlidableAction(
label: 'Archive',
backgroundColor: Colors.blue,
icon: Icons.archive,
onPressed: (context) {},
);
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.
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: () {},
),
],
);
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(),
);
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 |
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.
Slidable(
key: ValueKey(0), // A key is necessary.
dismissal: SlidableDismissal(
child: SlidableDrawerDismissal(),
onDismissed: (actionType) {
// Remove this Slidable from the widget tree.
},
),
);
Slidable(
key: ValueKey(0), // A key is necessary.
startActionPane: ActionPane(
dismissible: DismissiblePane(
onDismissed: () {
// Remove this Slidable from the widget tree.
},
),
),
);