swipable_stack
a widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations.
usage
builder
a swipablestack
uses a builder to display widgets.
swipablestack(
builder: (context, index, constraints) {
return image.asset(imagepath);
},
),
onswipecompleted
you can get completion event with onswipecompleted
.
swipablestack(
onswipecompleted: (index, direction) {
print('$index, $direction');
},
)
overlaybuilder
you can show overlay on the front card with overlaybuilder
.
swipablestack(
overlaybuilder: (
context,
constraints,
index,
direction,
swipeprogress,
) {
final opacity = min(swipeprogress, 1.0);
final isright = direction == swipedirection.right;
return opacity(
opacity: isright ? opacity : 0,
child: cardlabel.right(),
);
},
)
controller
swipablestackcontroller
allows you to control swipe action & also rewind recent action.
final controller = swipablestackcontroller();
swipablestack(
controller:controller,
builder: (context, index, constraints) {
return image.asset(imagepath);
},
);
controller.next(
swipedirection: swipedirection.right,
);
controller.rewind();
swipablestackcontroller
provides to access currentindex
of swipablestack
.
final controller = swipablestackcontroller();
controller.addlistener(() {
print('${_controller.currentindex}');
});
onwillmovenext
you can also restrict user actions according to index or action with onwillmovenext
.
swipablestack(
onwillmovenext: (index, direction) {
final allowedactions = [
swipedirection.right,
swipedirection.left,
];
return allowedactions.contains(direction);
},
);
swipeassistduration
you can set the speed the use is able to swipe through widgets with the swipeassistduration
.
swipablestack(
swipeassistduration: duration(milliseconds: 100),
)
the default is 650ms.
stackclipbehaviour
you can set the clipbehaviour of the stack with the stackclipbehaviour
.
change it to clip.none
to exceed the boundaries of parent widget size.
swipablestack(
stackclipbehaviour: clip.none,
)
the default is clip.hardedge.
Comments are closed.