flicked_cards

Description:

flicked cards

flicked_cards #














A gesture driven card swipping widget supporting custom animations.
Features #

Awesome default animations provided out of the box
Progress through cards swipping both direction or in a single direction
Extensible through custom provided animations
Support piling or popping (depending on animation spec)

Examples #
Here are some of the animation provided out of the box, take a look at the example to see all.






Cards used in these examples where taken from Brocodev
Example usage
FlickedCards(
count: Superhero.marvelHeroes.length,
animationStyle: FlipAnimation(),
onSwiped: (idx, dir) => print('>>> $dir $idx'),
builder: (index, progress, context) {
final superHeroe = Superhero.marvelHeroes[index];
return Container(
child: Center(
child: SuperheroCard(
superhero: superHeroe,
factorChange: 1 - progress),
),
);
},
)
copied to clipboard
Custom animations #
flicked_cards provides an easy way to create custom animations but it is required to have a basic understanding
of how cards can be layed out and how to position them depending on the drag progress and some of the properties in AnimationConfig.
Animations will be provided a progress value in the range (-1, 1) you should try to make you animation symmetric around 0
when posible. Like this:

You will have to reason about relative card indices:

Interface for animations #
All animations will need to implement CardAnimation which basically
defines:

animation of a particular card depending on swipe progress required
opacity of a particular card depending on swipe progress optional
where to apply transformations on cards (Fractional Offset)

typedef SwipeAnimation = Matrix4 Function(double progress);
typedef OpacityAnimation = double Function(double progress);

abstract class CardAnimation {
AnimationConfig get config;
LayoutConfig get layoutConfig;

SwipeAnimation animationForCard({required int relativeIndex});

OpacityAnimation opacityForCard({required int relativeIndex}) {
return (_) => 1;
}

FractionalOffset fractionalOffsetForCard({required int relativeIndex});
}
copied to clipboard
Additionally to make this process a bit easier, 2 extra abstract classes that implement
CardAnimation which are:

SymmetricCardAnimation
AsymmetricCardAnimation

Carousel animation is an example of a SymmetricCardAnimation take a look here
If struggling to make the animationlook at how the animations provided out of the box where implemented: here
Card layouts #
Internally cards are placed in Stack widget so an animation can choose to work with a single or both of the following
layouts:

Note that depending on the index some of cards will not be displayed: