动画翻转卡片

AnimatedFlipCard 包允许您在 Flutter 应用中添加一个动画翻转卡片，可以隐藏和显示更多信息。

功能

AnimatedFlipCard 小部件被设计成一个动画卡片，用于显示或隐藏所展示项目的更多信息。
它接受两张图片。一张用于卡片的front（正面），另一张用于卡片的back（背面）。

推荐

在提供 AnimatedFlipCard 小部件的 front 和 back 图片时，请确保在图片资源中设置所需的 width 和 height（更多详情请参见示例）。

  • 它是如何工作的？

按下卡片小部件时，它会根据当前状态翻转到卡片的正面或背面。

该包将自行处理动画。

animated flip card

入门

  1. 将最新版本的包添加到您的 pubspec.yaml 文件中（并运行 dart pub get）

dependencies:
  animated_flip_card: ^1.0.2
  1. 导入包并在您的 Flutter 应用中使用它。

import 'package:animated_flip_card/animated_flip_card.dart';

用法

有许多属性可以修改

  • front（卡片正面图片）
  • back（卡片背面图片）

示例用法（包含所有参数）

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      child: AnimatedFlipCard(
          front: Image.asset(
            'assets/images/front.png',
            width: 250,
            fit: BoxFit.contain,
          ),
          back: Image.asset(
            'assets/images/back.png',
            width: 250,
            fit: BoxFit.contain,
          )),
    );
  }
}
 效果如下

animated-flip-card.mp4


后续目标

我们正在进行一些改进，包括

  • 增加选择翻转动画方向的可能性。
  • 自定义翻转动画的速度。

问题与反馈

请提交一个issue来发送反馈或报告错误。谢谢！

GitHub

查看 Github