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

Overview

swipable_stack

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

(Sorry, the package name swipable_stack is typo of swipeable stack)

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.

Comments
  • adds dragstart animation

    adds dragstart animation

    Normally it doesn't make much difference if you choose Dragstartbehavior.down or Dragstartbehavior.start with this package. This changes if you use e.g. a list in the cards. Then the swipe gesture must first win in the gesture arena, making Dragstartbehavior.down more reactive. However, the animation is not so smooth in this case, which is why I added an animation for these cases. I can also add an example if desired. This animation is not executed if the default value (Dragstartbehavior.start) is chosen.

    opened by MaddinMade 8
  • adds allowDirection parameter

    adds allowDirection parameter

    Sorry for the commit chaos. There were problems with the first merge and I repeated that. I added the allowDirection parameter. With this you can now disallow directions independent of the allowVertical parameter. What is new here is that also the overlay can be built correctly as you can see in the following. Also you can still move the card in all directions unlike with allowVertical.

    Before:

    old_example

    After:

    example_horizontal example_vertical

    opened by MaddinMade 7
  • Additional builder parameters

    Additional builder parameters

    Hello :) I had the problem with this package that very many widgets were built, although you can not see them anyway. In addition, the overlay had performance problems, since this was above all widgets in the stack and below and not only above the top widget. This led to very poor performance for me with BackdropFilters. So I modified the package to pass in the builder where in the stack the current widget is and also the data that is passed to the OverlayBuilder. So you have on the one hand the possibility to adjust also lower widgets in the stack depending on the swipe progress, and on the other hand to implement the topmost overlay more efficiently in some situations. In addition, you can now optionally not build the lower widgets more easily, since it is directly passed where they are located in the stack. The overlayBuilder remains nevertheless further. The disadvantage of this request are the three parameters that are now additionally passed to the builder.

    Apart from this small problem I had, this package is really very well done and I want to commend this work here.

    opened by MaddinMade 6
  • Not able to swipe any cards if building inside FutureBuilder.

    Not able to swipe any cards if building inside FutureBuilder.

    If a build the SwipableStack inside FutureBuilder, I am not able to swipe the stack of individual widgets. The widgets to get rendered on screen but nothing happens if I try to drag them.

    Expanded( flex: 15, child: Padding( padding: const EdgeInsets.all(10.0), child: FutureBuilder( future: Provider.of<Property>(context, listen: false) .fetchProperties(), builder: (ctx, snapShot) { if (snapShot.connectionState == ConnectionState.waiting) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const CircularProgressIndicator(), ], ); } else { return Consumer<Property>(builder: (bldctx, data, child) { return SwipableStack( swipeAnchor: SwipeAnchor.bottom, onSwipeCompleted: (index, direction) { print('$index, $direction'); }, stackClipBehaviour: Clip.none, onWillMoveNext: (index, direction) { if (direction == SwipeDirection.up) { showModalBottomSheet( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(10.0), ), context: context, builder: (ctx) { return Container( child: Center( child: Text('Dummy Text'), ), ); }); } final allowedActions = [ SwipeDirection.right, SwipeDirection.left, ]; return allowedActions.contains(direction); }, controller: _controller, itemCount: data.properties.length, builder: (ctxt, props) { return ClipRRect( borderRadius: BorderRadius.circular(8.0), child: data.properties[props.index].thumbnailId != null ? Image.network( '${CommonEndpoints.assetUrl}/${data.properties[props.index].thumbnailId!.files!.elementAt(0)}', fit: BoxFit.cover, ) : null, ); }); }); } }, // child: , ), ), )

    The swipeable stack works if use List made of imageUrls, but widgets is undraggable after async call.

    opened by immutablesyntax 5
  • Invalid value: Not in inclusive range

    Invalid value: Not in inclusive range

    Hi,

    I recently noticed that the package has a new version (0.8.0) so I decided to update from version 0.7.1 to 0.8.0.

    Now I got this error when I swipe first card:

    The following RangeError was thrown building LayoutBuilder:
    RangeError (index): Invalid value: Not in inclusive range 0..2: 3
    
    The relevant error-causing widget was: 
      SwipableStack-[LabeledGlobalKey<_SwipableStackState>#fa547] file:///[MY_PROJECT]/lib/src/ui/screens/home/home.dart:74:12
    When the exception was thrown, this was the stack: 
    #0      List.[] (dart:core-patch/growable_array.dart:254:60)
    #1      _HomeScreenState._swipeableContent.<anonymous closure> (package:[MY_PROJECT]/src/ui/screens/home/home.dart:81:34)
    #2      _SwipableStackState._buildCards.<anonymous closure> (package:swipable_stack/src/swipable_stack.dart:395:37)
    #3      new _GrowableList.generate (dart:core-patch/growable_array.dart:133:28)
    #4      _SwipableStackState._buildCards (package:swipable_stack/src/swipable_stack.dart:391:19)
    

    I can confirm that with version 0.7.1 the code and package works perfectly :)

    PS: I can bring more code or info if needed.

    opened by martesabt 5
  • Cards rebuilding constantly.

    Cards rebuilding constantly.

    Hey, looks like all cards are rebuilding all the time as the user is dragging/as builder gets called. Seems like all children in the card are getting rebuilt. Can't quite figure it out, is there some magic with keys where all children are not really rebuilding, even though their build method is being called?

    opened by luke5dm 4
  • Builder Index not getting reset when list is initialize with new data.

    Builder Index not getting reset when list is initialize with new data.

    I have two mode is my app with two differnt list. In mode 1 i swipe for example 3 profile but when i switch to mode 2 my builder index remains 2. I don't if it is an isssue but this is not working as it should be. It should build from index 0 every time new list is feed.

    opened by TouseefAQ 4
  • [Swipe Gesture] problem onComplete works but cards do not move

    [Swipe Gesture] problem onComplete works but cards do not move

    My layout is something like this

    selector _stack __swipable stack

    selector as data load after an api call and is passed to item count parameter

    Problem: sometime swipe has not effect on ui cards do not move but my onComplete function prints and shows the sipedirection.

    and if i hot reload it starts working again

    opened by Rishabh-Negi 4
  • Swipe Animation lagging

    Swipe Animation lagging

    Hi! Is there any chance that i can fix the lagging while user swiping? I think it is because of the animation or maybe the perfomance of the lib. Is there any way that i can solve this issue? Because this library is awesome, also unuseable because of the lagging(tearing). Thank you!

    opened by thePlayer094 3
  • Black screen in release mode

    Black screen in release mode

    https://user-images.githubusercontent.com/65075504/169685227-311e2966-8d0a-4331-8115-db8c9236cdf5.mp4

    To replicate this, run any app with swipable stack in release mode.

    opened by imcybergeek 3
  • Fix Flutter 3 migration warnings

    Fix Flutter 3 migration warnings

    When migrating to Flutter 3, you might see warnings like the following:

    Warning: Operand of null-aware operation '?.' has type 'WidgetsBinding' which excludes null.
    

    These are caused by a simplification of the API (the instance property on bindings is now non-nullable).

    opened by elmsec 3
  • Stack direction

    Stack direction

    Hi

    I can see the cards in the stack painted below the current card. Is there a way to move the back cards to be poking out of the top so the cards are falling down the page?

    Aka this part:

    image

    Draw that along the top and the right, not just the right?

    opened by bradintheusa 0
  • Empty placeholder

    Empty placeholder

    Hi! Great package, thanks. would be great, if there would be a property for customization of the empty state, when the stack is empty: image

    Currently by default it shows empty container, a placeholder "Sorry, no more profile for you", or something like that,

    Or any workaround?

    opened by radikris 1
  • How do I reset the stack?

    How do I reset the stack?

    When users have swiped all the cards in stack, I want to let them choose to restart (swipe from the first card). controller has only one method to rewind the last action not all the way back to the first card

    opened by dangduoc 1
  • feat : rewind till first , onSwipeForbiden

    feat : rewind till first , onSwipeForbiden

    opened by maxzod 3
  • Add an updateCallback for SwipeableStack

    Add an updateCallback for SwipeableStack

    I have a suggestion but first - Thanks for a great component.

    Can we add an onSwipeUpdate callback that is passed SwipeDirection and SwipeProgress or else add them to the SwipableStackController ?

    These values should be part of the controller so that the controller can be used in other Widgets (I need to provide additionally animation when a card is moved).

    Currently the only way to get access to these values is via the OverlayBuilder which causes rebuild issues if animation is triggered from that callback.

    Ideally we should have either the SwipableStackController enriched with these values or else provide an onSwipeUpdate(properties) callback.

    opened by therealjohnsummer 1
A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations.

flutter_animated_dialog A new Flutter dialog with a series of beautiful animations, slide fade rotate size scale rotate3D animations. Dialog barrier i

null 20 Dec 3, 2022
A flutter package which will help you to generate pin code fields with beautiful design and animations

A flutter package which will help you to generate pin code fields with beautiful design and animations. Can be useful for OTP or pin code inputs ?? ??

Adar 550 Dec 23, 2022
Create powerful animations in Flutter and use the hero animation for complex animations

Hero Animation - Locations UI - Flutter Create powerful animations in Flutter and use the hero animation for complex animations. ⚡  Social Media  Twit

null 3 Dec 11, 2021
Flutter tinder like cards

TCard Tinder like cards. TCard Install Usage Normal widget Network image Use a controller to control Determine the sliding direction Reset with new ca

Bruno Jurković 132 Dec 9, 2022
🔔 A flutter package to create cool and beautiful text animations. [Flutter Favorite Package]

Animated Text Kit A flutter package which contains a collection of some cool and awesome text animations. Recommended package for text animations in C

Ayush Agarwal 1.4k Jan 6, 2023
A catalog of beautiful, reusable and elegant animations

Animations Catalog The goal of this project is to catalog and build multiple animation patterns with flutter. Budget App Animation Harley Swipe To Enl

null 3 Sep 6, 2021
Flutter Card Swipe Animation

FlutterCardSwipe Card Swipe Animation Creating the swipe view as used in the Tinder. Swipe right is considered accepted and swipe left is rejected.It

Ruchika Gupta 521 Jan 8, 2023
A flutter package which contains a collection of some cool and beautiful effects; support android and ios

flutter effects A flutter package which contains a collection of some cool and beautiful effects; support android and ios . Screenshot type support ch

大海豚 462 Jan 3, 2023
A beautiful animated flutter widget package library. The tab bar will attempt to use your current theme out of the box, however you may want to theme it.

Motion Tab Bar A beautiful animated widget for your Flutter apps Preview: | | Getting Started Add the plugin: dependencies: motion_tab_bar: ^0.1.5 B

Rezaul Islam 237 Nov 15, 2022
Loading widget based on a Flare animation, allow you to create beautiful custom loading widgets or dialogs

flare_loading Loading widget based on a Flare animation, allow you to create custom loading widgets or dialogs If you're using Rive instead of Flare p

Jimmy Aumard 25 Apr 16, 2021
dart based login-screen that connects with Firebase Auth to enable users to sign-in

A Flutter / Firebase login screen A simple flutter/dart based login-screen that connects with Firebase Auth to enable users to sign-in/up with Email o

Pamela Nyasha Muzoma 2 Nov 20, 2021
Random Users details in flutter from randomusers api

Random Users A new Flutter Random Users Details using randomuser.me api. Getting Started It is an Random users details with some cool UI, Details of u

Bharat Agarwal 14 Jul 29, 2022
Easily add staggered animations to your ListView, GridView, Column and Row children.

Flutter Staggered Animations Easily add staggered animations to your ListView, GridView, Column and Row children as shown in Material Design guideline

null 1.2k Jan 6, 2023
Fun canvas animations in Flutter based on time and math functions.

funvas Flutter package that allows creating canvas animations based on time and math (mostly trigonometric) functions. The name "funvas" is based on F

null 472 Jan 9, 2023
A package to create nice and smooth animations for flutter

animation_director A package to create nice and smooth animations for flutter Introduction A simple package to build beautiful and smooth animations f

null 10 Nov 28, 2022
SwiftUI - Examples projects using SwiftUI released by WWDC2019. Include Layout, UI, Animations, Gestures, Draw and Data.

SwiftUI Examples About Examples projects using SwiftUI & Combine. Include Layout, UI, Animations, Gestures, Draw and Data. See projects files in Files

Ivan Vorobei 4.2k Jan 8, 2023
Making drawings and animations in Flutter extremely simple

?? GraphX™ | rendering | prototype | design | Making drawings and animations in Flutter extremely simple. wiki-tips. To get some extended, boring expl

Roi Peker 382 Dec 21, 2022
My UI and Animations Challanges in Flutter/Dart

ui_challenges Comecei com essa challange, por causa do novo emprego preciso de praticar muito mais animações e telas, toda semana uma UI Nova com o te

Geek Fabio 25 Sep 4, 2022
Orchestrate multiple animations with ease.

flutter_sequence_animation Features No need to use intervals and calculate percentages for your total animation time. Animate the same variable with m

Norbert Kozsir 381 Dec 27, 2022