Flutter动画效果插件flipfx_widgets的使用

Flip Widget

Flip Widget 是一个可定制的小部件，用于在两个子小部件之间进行翻转，支持水平或垂直方向，并带有平滑的动画效果。

Features

• 在两个小部件（正面和背面）之间翻转。
• 自定义翻转方向（垂直或水平）。
• 为正面和背面小部件指定自定义大小。
• 可调节的动画持续时间。
• 通过 VoidCallback 简单集成点击事件。

Installation

要将 flipfx_widgets 包添加到您的Flutter项目中，请在 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  flipfx_widgets: ^latest_version # 请确保替换为最新版本号

然后运行 flutter pub get 来安装该包。

示例代码

下面是一个完整的示例代码，演示了如何使用 flipfx_widgets 创建一个可以翻转的小部件。这个例子包含了四个按钮，每个按钮触发不同类型的翻转动画：垂直方向带自定义尺寸、水平方向带自定义尺寸、垂直方向默认尺寸、水平方向默认尺寸。

完整示例Demo

main.dart

import 'package:flutter/material.dart';
import 'package:flipfx_widgets/flipfx_widgets.dart'; // 导入flipfx_widgets包

void main() {
  runApp(FlipFxWidgetsExample());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: FlipFxWidgetsScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('FlipFX Widgets Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(12),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => FlipFXWidget(
                        front: Container(color: Colors.red, child: Center(child: Text('Front'))),
                        back: Container(color: Colors.blue, child: Center(child: Text('Back'))),
                        isHorizontal: false,
                        size: Size(200, 200), // 自定义大小
                      ),
                    ),
                  );
                },
                child: const Text(
                  'Flip Widget Using vertical direction with CustomSize',
                  textAlign: TextAlign.center,
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => FlipFXWidget(
                        front: Container(color: Colors.green, child: Center(child: Text('Front'))),
                        back: Container(color: Colors.orange, child: Center(child: Text('Back'))),
                        isHorizontal: true,
                        size: Size(200, 200), // 自定义大小
                      ),
                    ),
                  );
                },
                child: const Text(
                  'Flip Widget Using Horizontal direction with CustomSize',
                  textAlign: TextAlign.center,
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => FlipFXWidget(
                        front: Container(color: Colors.purple, child: Center(child: Text('Front'))),
                        back: Container(color: Colors.yellow, child: Center(child: Text('Back'))),
                        isHorizontal: true,
                      ),
                    ),
                  );
                },
                child: const Text(
                  'Flip Widget Using Horizontal direction with default size',
                  textAlign: TextAlign.center,
                ),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => FlipFXWidget(
                        front: Container(color: Colors.cyan, child: Center(child: Text('Front'))),
                        back: Container(color: Colors.grey, child: Center(child: Text('Back'))),
                        isHorizontal: false,
                      ),
                    ),
                  );
                },
                child: const Text(
                  'Flip Widget Using Vertical direction with default size',
                  textAlign: TextAlign.center,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

注意事项

1. 导入包：请确保在文件顶部正确导入 flipfx_widgets 包。
2. 版本号：在 pubspec.yaml 中，用实际的最新版本号替换 ^latest_version。
3. 自定义内容：您可以根据需要修改 front 和 back 小部件的内容以适应您的应用场景。

通过上述步骤，您应该能够在Flutter项目中成功集成并使用 flipfx_widgets 插件来创建炫酷的翻转动画效果。