flutter create wallet_app

class CreditCardsPage extends StatefulWidget {
  const CreditCardsPage({
    super.key,
    this.onCardPagePush,
    this.onCardPagePop,
  });

  final VoidCallback? onCardPagePush;
  final VoidCallback? onCardPagePop;

  @override
  State<CreditCardsPage> createState() => _CreditCardsPageState();
}

class _CreditCardsPageState extends State<CreditCardsPage> {
  int activeCard = 0;

  @override
  Widget build(BuildContext context) {
    final screenSize = MediaQuery.of(context).size;
    final cardHeight = screenSize.width * 0.75;
    final cardWidth = cardHeight * 1.6;

    return Center(
      child: SizedBox(
        width: cardHeight,
        height: cardWidth,
        child: CreditCardsStack(
          itemCount: 3,
          initialActiveCard: activeCard,
          onCardTap: (index) {
            Navigator.of(context).push(
              PageRouteBuilder(
                transitionDuration: const Duration(milliseconds: 800),
                pageBuilder: (_, animation, __) {
                  return FadeTransition(
                    opacity: animation,
                    child: Scaffold(
                      appBar: AppBar(title: const Text("Card Details")),
                      body: Center(child: Text("Card Index: $index")),
                    ),
                  );
                },
              ),
            );
          },
          itemBuilder: (context, index) {
            return Transform.rotate(
              angle: -0.5,
              child: Container(
                width: cardWidth,
                height: cardHeight,
                decoration: BoxDecoration(
                  color: Colors.deepPurple,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Center(
                  child: Text(
                    "Card ${index + 1}",
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 22,
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }
}

class CreditCardsStack extends StatefulWidget {
  const CreditCardsStack({
    required this.itemCount,
    required this.itemBuilder,
    this.onCardTap,
    this.initialActiveCard = 0,
    super.key,
  });

  final int itemCount;
  final Widget Function(BuildContext, int) itemBuilder;
  final ValueChanged<int>? onCardTap;
  final int initialActiveCard;

  @override
  State<CreditCardsStack> createState() => _CreditCardsStackState();
}

class _CreditCardsStackState extends State<CreditCardsStack>
    with SingleTickerProviderStateMixin {

  late AnimationController _controller;
  Offset dragOffset = Offset.zero;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 200),
    );
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: List.generate(widget.itemCount, (index) {
        return Positioned(
          top: index * 10,
          left: 0,
          right: 0,
          child: GestureDetector(
            onTap: () => widget.onCardTap?.call(index),
            onPanUpdate: (details) {
              setState(() {
                dragOffset += details.delta;
              });
            },
            onPanEnd: (_) {
              setState(() {
                dragOffset = Offset.zero;
              });
            },
            child: Transform.translate(
              offset: index == widget.itemCount - 1
                  ? dragOffset
                  : Offset.zero,
              child: widget.itemBuilder(context, index),
            ),
          ),
        );
      }),
    );
  }
}