如何在flutter中创建带有动画的堆叠卡片

Question

我正在尝试使用堆栈来制作这个动画

视频

问题是，当背面的卡片动画并假设出现在其他卡片之上时，它会留在背面

我做了一些搜索，但找不到任何可以用来在更改堆叠元素时制作动画的东西

任何帮助将不胜感激。

class CardAnimationScreen extends StatefulWidget {
  @override
  _CardAnimationScreenState createState() => _CardAnimationScreenState();
}

class _CardAnimationScreenState extends State<CardAnimationScreen> {
  // To manage the card states (0 for card 1, 1 for card 2, 2 for card 3)
  List<int> cardOrder = [0, 1, 2];
  bool isAnimating = false;

  void animateCards() {
    if (isAnimating) return;

    setState(() {
      isAnimating = true;
    });
    // Start the animation
    Future.delayed(Duration(milliseconds: 300), () {
      setState(() {
        // Rotate the order of cards (the first becomes last)
        cardOrder.insert(0, cardOrder.removeLast());
        isAnimating = false;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Card Animation')),
      body: Center(
        child: Stack(
          alignment: Alignment.center,
          children: [
            _buildAnimatedCard(0, cardOrder.indexOf(0)), // Card 1
            _buildAnimatedCard(1, cardOrder.indexOf(1)), // Card 2
            _buildAnimatedCard(2, cardOrder.indexOf(2)), // Card 3 (on top)
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: animateCards,
        child: Icon(Icons.play_arrow),
      ),
    );
  }

  Widget _buildAnimatedCard(int cardIndex, int positionIndex) {
    // Defining positions for the cards
    final List<Alignment> positions = [
      Alignment(-0.8, 0.2), // Back-left position (Card 1)
      Alignment(0.8, 0.2), // Back-right position (Card 2)
      Alignment(0, -0.3), // Top position (Card 3)
    ];

    return AnimatedAlign(
      duration: Duration(milliseconds: 300),
      alignment: positions[positionIndex],
      child: Container(
        width: 150,
        height: 200,
        decoration: BoxDecoration(
          color: _getCardColor(cardIndex),
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              blurRadius: 10,
              spreadRadius: 2,
              offset: Offset(2, 4),
            ),
          ],
        ),
      ),
    );
  }

  Color _getCardColor(int cardIndex) {
    // Assign colors based on card index
    switch (cardIndex) {
      case 0:
        return Colors.redAccent;
      case 1:
        return Colors.greenAccent;
      case 2:
        return Colors.blueAccent;
      default:
        return Colors.grey;
    }
  }
}

Answer 1

您可以使用 pub.dev 中现有的 flutter 包之一，例如 stacked_card_carousel 包。

您还可以检查以下链接以获取有关此 UI 的更多包。