# flutter_swipable_stack

**Repository Path**: coder-lijing/flutter_swipable_stack

## Basic Information

- **Project Name**: flutter_swipable_stack
- **Description**: No description available
- **Primary Language**: Dart
- **License**: MIT
- **Default Branch**: develop
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-25
- **Last Updated**: 2025-09-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# swipable_stack
<a href="https://pub.dev/packages/swipable_stack"><img src="https://img.shields.io/pub/v/swipable_stack.svg?style=flat?logo=dart" alt="pub.dev"></a>
<a href="https://github.com/HeavenOSK/flutter_swipable_stack"><img src="https://img.shields.io/static/v1?label=platform&message=flutter&color=1ebbfd" alt="github"></a>
[![likes](https://badges.bar/swipable_stack/likes)](https://pub.dev/packages/swipable_stack/score)
[![popularity](https://badges.bar/swipable_stack/popularity)](https://pub.dev/packages/swipable_stack/score)
[![pub points](https://badges.bar/swipable_stack/pub%20points)](https://pub.dev/packages/swipable_stack/score)
<a href="https://github.com/HeavenOSK/flutter_swipable_stack/blob/main/LICENSE"><img src="https://img.shields.io/github/license/HeavenOSK/flutter_swipable_stack.svg" alt="license"></a>

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

![demo](https://github.com/HeavenOSK/gif_repository/blob/main/swipable_stack/demo.gif?raw=true)
 
(Sorry, the package name `swipable_stack` is typo of swipeable stack)
 
# Usage
## `builder`
A `SwipableStack` uses a builder to display widgets.
```dart
SwipableStack(
  builder: (context, properties) {
    return Image.asset(imagePath);
  },
),
```
## `onSwipeCompleted`
You can get completion event with `onSwipeCompleted`.
```dart
SwipableStack(
  onSwipeCompleted: (index, direction) {
    print('$index, $direction');
  },
)
```

## `overlayBuilder`
You can show overlay on the front card with `overlayBuilder`.
```dart
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(),
    );
  },
)
```

## `controller`
`SwipableStackController` allows you to control swipe action & also rewind recent action.
 
```dart
final controller = SwipableStackController();

SwipableStack(
  controller:controller,
  builder: (context, properties) {
    return Image.asset(imagePath);
  },
);
controller.next(
  swipeDirection: SwipeDirection.right,
);
controller.rewind();
```

`SwipableStackController` provides to access `currentIndex` of `SwipableStack`.
```dart
final controller = SwipableStackController();
controller.addListener(() {
  print('${_controller.currentIndex}');
});
```

## `onWillMoveNext`
You can also restrict user actions according to index or action with `onWillMoveNext`.
```dart
SwipableStack(
  onWillMoveNext: (index, direction) {
    final allowedActions = [
      SwipeDirection.right,
      SwipeDirection.left,
    ];
    return allowedActions.contains(direction);
  },
);
```

## `swipeAssistDuration`

You can set the speed the user is able to swipe through Widgets with the `swipeAssistDuration`.

```dart
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.

```dart
SwipableStack(
  stackClipBehaviour: Clip.none,
)
```

The default is Clip.hardEdge.


## `allowVerticalSwipe`

Disable vertical swipe with `allowVerticalSwipe`.  
Changing to `false` disable vertical swipe capabilities

```dart
SwipableStack(
  allowVerticalSwipe: false,
)
```

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

```dart
SwipableStack(
  swipeAnchor: SwipeAnchor.top,
)
```

The default is SwipeAnchor.top.