A card switching UI for Flutter, support custom animation

BakerJQ 0 615 Views 
void initState() {
    super.initState();
    _controller = InfiniteCardsController(
      itemBuilder: _renderItem,
      itemCount: 5,
      animType: AnimType.SWITCH,
    );
  }
  
InfiniteCards(
  controller: _controller,
)

InfiniteCardsController(
            ...
            transformToFront: yourCustomTransformToFront,
            transformToBack: yourCustomTransformToBack,
            curve: yourCustomCurve
            ...
          )

Dani AI

Generated

A few practical notes to complement 's repo — focused on making custom card-switch animations robust and smooth.

Use explicit animations (one AnimationController) and an AnimatedBuilder/AnimatedWidget so only the transform/opacity layer rebuilds each tick; avoid calling setState for every frame. Drive easing with CurvedAnimation or physics (fling) for swipe feel — this gives consistent timing and makes it easy to combine programmatic and gesture-driven motion. (docs.flutter.dev)

For the visual transform, animate a Matrix4 (rotate, translate, scale) and add a small perspective for depth. Keep the transform origin/alignment consistent across front/back faces and use transformHitTests to control whether the widget still receives pointer events while transforming. If you prefer a helper, MatrixTransition shows how to animate a Matrix4 cleanly. (api.flutter.dev)

Back-face handling needs explicit attention: Flutter does not provide a CSS-style backface-visibility toggle. The usual patterns are (a) paint only the front or back depending on the animation value (swap at the 50% point), or (b) use a battle-tested widget such as the flip_card package which handles swapping and touch triggers for you. That avoids mirrored/backside artefacts and gives predictable hit-testing. (pub.dev)

Performance and gesture tips: wrap each card subtree in a RepaintBoundary so frequent repaints are contained, and pass any large, static subtree as the child to your AnimatedBuilder so it isn't rebuilt every frame. Use GestureDetector (or RawGestureDetector when you need custom gesture logic) to map drag delta/velocity to controller.value and then call fling/animateTo to complete the action. Always dispose controllers in State.dispose to avoid leaks. (api.flutter.dev)

These patterns keep animations smooth across devices, make custom transforms easier to reason about, and reduce common pitfalls (backface artefacts, excessive rebuilds, lost gestures).

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Edit Preview