swipable_stack

Description:

swipable stack

swipable_stack #






A widget for stacking cards, which users can swipe horizontally and vertically with beautiful animations like Tinder UI.

(Sorry, the package name swipable_stack is typo of swipeable stack)
Usage #
builder #
A SwipableStack uses a builder to display widgets.
SwipableStack(
builder: (context, properties) {
return Image.asset(imagePath);
},
),
copied to clipboard
onSwipeCompleted #
You can get completion event with onSwipeCompleted.
SwipableStack(
onSwipeCompleted: (index, direction) {
print('$index, $direction');
},
)
copied to clipboard
overlayBuilder #
You can show overlay on the front card with overlayBuilder.
SwipableStack(
overlayBuilder: (context, properties) {
final opacity = min(properties.swipeProgress, 1.0);
final isRight = properties.direction == SwipeDirection.right;
return Opacity(
opacity: isRight ? opacity : 0,
child: CardLabel.right(),
);
},
)
copied to clipboard
controller #
SwipableStackController allows you to control swipe action & also rewind recent action.
final controller = SwipableStackController();

SwipableStack(
controller:controller,
builder: (context, properties) {
return Image.asset(imagePath);
},
);
controller.next(
swipeDirection: SwipeDirection.right,
);
controller.rewind();
copied to clipboard
SwipableStackController provides to access currentIndex of SwipableStack.
final controller = SwipableStackController();
controller.addListener(() {
print('${_controller.currentIndex}');
});
copied to clipboard
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);
},
);
copied to clipboard
swipeAssistDuration #
You can set the speed the user is able to swipe through Widgets with the swipeAssistDuration.
SwipableStack(
swipeAssistDuration: Duration(milliseconds: 100),
)
copied to clipboard
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,
)
copied to clipboard
The default is Clip.hardEdge.
allowVerticalSwipe #
Disable vertical swipe with allowVerticalSwipe.
Changing to false disable vertical swipe capabilities
SwipableStack(
allowVerticalSwipe: false,
)
copied to clipboard
The default is true.
swipeTopAnchor #
Set the swipe anchor with swipeAnchor with the following enum
SwipeAnchor.top : card rotation on bottom and anchored on top
SwipeAnchor.bottom : card rotation on top and anchored on bottom
SwipableStack(
swipeAnchor: SwipeAnchor.top,
)
copied to clipboard
The default is SwipeAnchor.top.