Flutter动画翻转效果插件animated_flip_widget的使用

Flutter动画翻转效果插件animated_flip_widget的使用

介绍

animated_flip_widget 是一个Flutter插件，用于创建卡片翻转动画。通过这个插件，你可以在应用程序中轻松实现卡片的前后两面切换，并且可以自定义翻转的方向、持续时间等属性。

功能特性

• 创建卡片翻转动画
• 支持在卡片的正面和背面显示不同的小部件
• 提供 FlipController 类来控制翻转动画
• 支持设置卡片是否可点击
• 支持自定义翻转动画的持续时间
• 支持设置翻转方向（水平或垂直）

开始使用

要使用这个插件，首先需要在 pubspec.yaml 文件中添加依赖：

dependencies:
  animated_flip_card: ^<latest version>

使用示例

下面是一个完整的示例代码，展示了如何使用 AnimatedFlipWidget 实现卡片翻转效果。

import 'package:animated_flip_widget/animated_flip_widget/flip_controler.dart';
import 'package:animated_flip_widget/animated_flip_widget/flip_widget.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flip Widget',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final controller = FlipController(); // 创建FlipController实例
  FlipDirection direction = FlipDirection.vertical; // 设置默认翻转方向为垂直

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Animated Flip Widget Demo'),
      ),
      body: Center(
        child: AnimatedFlipWidget(
          front: const _FrontWidget(), // 正面小部件
          back: const _BackWidget(),   // 背面小部件
          flipDirection: direction,    // 翻转方向
          controller: controller,       // 控制器
        ),
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              if (direction == FlipDirection.vertical) {
                setState(() {
                  direction = FlipDirection.horizontal; // 切换为水平翻转
                });
              }

              controller.flip(); // 触发翻转动画
            },
            tooltip: 'Flip',
            child: const Icon(Icons.flip_rounded),
          ),
          const SizedBox(width: 16),
          RotatedBox(
            quarterTurns: 1,
            child: FloatingActionButton(
              onPressed: () {
                if (direction == FlipDirection.horizontal) {
                  setState(() {
                    direction = FlipDirection.vertical; // 切换为垂直翻转
                  });
                }

                controller.flip(); // 触发翻转动画
              },
              tooltip: 'Flip',
              child: const Icon(Icons.flip_rounded),
            ),
          ),
        ],
      ),
    );
  }
}

class _FrontWidget extends StatelessWidget {
  const _FrontWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      color: Colors.grey, // 正面背景颜色
      child: const Center(
        child: Text(
          '?', // 正面显示的文本
          style: TextStyle(fontSize: 32),
        ),
      ),
    );
  }
}

class _BackWidget extends StatelessWidget {
  const _BackWidget({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      decoration: const BoxDecoration(
        image: DecorationImage(
          image: AssetImage('assets/dog.jpg'), // 背面显示的图片
          fit: BoxFit.cover,
        ),
      ),
    );
  }
}