如何在颤动中创建带有左右滑块的动画堆叠卡片？答案

【问题标题】：How to create animated stacked card with left and right slider in flutter?如何在颤动中创建带有左右滑块的动画堆叠卡片？
【发布时间】：2022-01-15 01:21:13
【问题描述】：

我希望它看起来像图像，但我找不到方法，请帮忙？我正在尝试为此使用 carousel_slider、pub.dev/packages/flutter_tindercard、flutter_multi_carousel、FlutterCardSwipe 插件并尝试修改此插件，但它实现的效果并不像视频一样。

【问题讨论】：

标签： flutter animation slider

【解决方案1】：

考虑在 Stack 中使用 AnimatedPositioned。您可以使用它们的位置（上、下、左、右）和大小（高度、宽度）的值进行游戏。

这是 Flutter 团队制作的视频：https://www.youtube.com/watch?v=hC3s2YdtWt8

认为这只是一种方法，有很多方法。

【讨论】：

【解决方案2】：

使用AnimatedContainer 并使用Timer 更改活动容器的简单操作。

在dartPad上运行

class AnimC3 extends StatefulWidget {
  const AnimC3({Key? key}) : super(key: key);

  @override
  _AnimC3State createState() => _AnimC3State();
}

class _AnimC3State extends State<AnimC3> {
  final duration = const Duration(seconds: 1);

  int _currentIndex = 0;

  late Timer _timer;

  @override
  void initState() {
    _timer = Timer.periodic(duration, (timer) {
      setState(() {
        _currentIndex++;
        if (_currentIndex > 2) _currentIndex = 0;
      });
    });
    super.initState();
  }

  @override
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          width: 200,
          child: Row(
            children: [
              AnimatedContainer(
                duration: duration,
                width: _currentIndex == 0 ? 100 : 50,
                color: Colors.purpleAccent,
              ),
              AnimatedContainer(
                duration: duration,
                color: Colors.cyanAccent,
                width: _currentIndex == 1 ? 100 : 50,
              ),
              AnimatedContainer(
                duration: duration,
                color: Colors.red,
                width: _currentIndex == 2 ? 100 : 50,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：