swipable_stack

The user needs to browse the content of varying types and lengths in a flexible way. This is the reason why we use stacking cards in design. 

One of the most important things about cards is their ability to be manipulated almost infinitely. They can be turned over to reveal more, stacked to save space, folded for a summary and expanded for more details, sorted, and grouped.

Here is a widget for stacking cards with beautiful animations for flutter. It can help you with your web design.
With this widget, users can swipe horizontally and vertically with beautiful animations. See the tutorials below for more pieces of information.

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.

GitHub

https://github.com/HeavenOSK/flutter_swipable_stack