Flutter动画效果插件flippy的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter动画效果插件flippy的使用

Flippy是一个用于Flutter的交互式翻转小部件。它允许你以直观的方式轻松定制和在卡片的两面之间进行翻转。以下是关于如何使用Flippy插件的详细说明和示例代码。

开始使用Flippy

依赖添加

首先，在pubspec.yaml文件中添加Flippy依赖：

dependencies:  
   flippy: ^0.1.0

导入包

在你的Dart文件中导入Flippy：

import 'package:flippy/flippy.dart';

特性

  • ✅ 支持拖动和非拖动翻转卡片
  • ✅ 函数可以转向所有侧面
  • ✅ 动态可定制阴影
  • ✅ 完全控制小部件

TODO：即将推出

  • 🟩 动画持续时间
  • 🟩 可选粘性动画
  • 🟩 卡片厚度
  • 🟩 单个小部件翻转
  • 🟩 翻转时的声音

Flippy 使用方法

拖动翻转器（Draggable Flipper）

DragFlipper 是一个支持手势和控制器多种函数的翻转小部件。

DragFlipper(  
  front: const FrontWidget(),  // 必填
  back: const BackWidget(),  // 必填
  controller: flipperController,  // 必填
  height: double,  
  width: double,  
  padding: EdgeInsets,  
  margin: EdgeInsets,  
  backgroundColor: Color,  
  border: Border,  
  borderRadius: BorderRadius,  
  gradient: Gradient,  
  shape: BoxShape,  
)

常规翻转器（Regular Flipper）

RegularFlipper 不支持拖动手势，仅通过控制器进行翻转。

Flipper(  
  front: FrontWidget(),  // 必填
  back: BackWidget(),  // 必填
  controller: flipperController,  // 必填
  height: double,  
  width: double,  
  padding: EdgeInsets,  
  margin: EdgeInsets,  
  backgroundColor: Color,  
  border: Border,  
  borderRadius: BorderRadius,  
  gradient: Gradient,  
  shape: BoxShape,  
)

控制器使用方法

FlipperController 是 Flipper 和 DragFlipper 的必需参数，允许手动和程序化地控制动画。

FlipperController controller = FlipperController(  
  dragAxis: DragAxis.both,  
);

方法

  • flipLeft()：水平或双向翻转到左侧。
  • flipRight()：水平或双向翻转到右侧。
  • flipDown()：垂直或双向翻转到底部。
  • flipUp()：垂直或双向翻转到顶部。

示例代码

以下是一个完整的示例演示如何使用Flippy插件：

import 'package:flippy/flippy.dart';
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flippy Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late FlipperController controller;

  @override
  void initState() {
    controller = FlipperController(dragAxis: DragAxis.both);
    super.initState();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Flippy Example")),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            DragFlipper(
              front: const FrontWidget(),
              back: const BackWidget(),
              controller: controller,
              borderRadius: const BorderRadius.all(Radius.circular(10.0)),
              gradient: const LinearGradient(colors: [Color(0xff9b96ee), Color(0xff5f5eda)]),
              padding: const EdgeInsets.symmetric(vertical: 8),
              height: 210,
            ),
            const SizedBox(height: 40),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                FloatingActionButton(
                  onPressed: () => controller.flipLeft(),
                  child: const Icon(Icons.arrow_back, color: Colors.white, size: 33),
                ),
                FloatingActionButton(
                  onPressed: () => controller.flipRight(),
                  child: const Icon(Icons.arrow_forward, color: Colors.white, size: 33),
                ),
                FloatingActionButton(
                  onPressed: () => controller.flipDown(),
                  child: const Icon(Icons.arrow_downward_outlined, color: Colors.white, size: 33),
                ),
                FloatingActionButton(
                  onPressed: () => controller.flipUp(),
                  child: const Icon(Icons.arrow_upward_outlined, color: Colors.white, size: 33),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 12),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text("PLATINUM", style: TextStyle(fontSize: 15, color: Colors.white)),
              Text("MOCKUP BANK", style: TextStyle(fontSize: 15, color: Colors.white)),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              Container(width: 70, height: 43, decoration: BoxDecoration(color: const Color(0xffe0b056), borderRadius: BorderRadius.circular(8))),
              const Text("CREDIT CARD", style: TextStyle(fontSize: 15, color: Colors.white)),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: const [
              Text("0603", style: TextStyle(fontSize: 27, color: Colors.white, fontWeight: FontWeight.bold)),
              Text("9020", style: TextStyle(fontSize: 27, color: Colors.white, fontWeight: FontWeight.bold)),
              Text("0714", style: TextStyle(fontSize: 27, color: Colors.white, fontWeight: FontWeight.bold)),
              Text("1234", style: TextStyle(fontSize: 27, color: Colors.white, fontWeight: FontWeight.bold)),
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Text("JANE DOE", style: TextStyle(fontSize: 17, color: Colors.white, fontWeight: FontWeight.bold)),
                  const SizedBox(height: 3),
                  const Text("VALID THRU 05/28", style: TextStyle(fontSize: 10, color: Colors.white)),
                ],
              ),
              const RotatedBox(quarterTurns: 1, child: Icon(Icons.wifi, color: Colors.white, size: 30)),
            ],
          ),
        ],
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: [
        Container(width: double.infinity, height: 43, decoration: const BoxDecoration(color: Color(0xff1f1e1e))),
        Container(width: 180, height: 37, alignment: Alignment.centerRight, decoration: const BoxDecoration(color: Colors.white70), child: const Text("0210  ", style: TextStyle(fontSize: 18))),
        const Padding(padding: EdgeInsets.symmetric(horizontal: 12), child: Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.", style: TextStyle(fontSize: 13, color: Colors.white))),
        Padding(padding: const EdgeInsets.symmetric(horizontal: 12), child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: const [
          Text("MOCKUP BANK", style: TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.bold)),
          Text("CREDIT CARD", style: TextStyle(fontSize: 15, color: Colors.white, fontWeight: FontWeight.bold)),
        ])),
      ],
    );
  }
}

以上代码展示了如何使用Flippy插件创建一个可以翻转的小部件，并通过按钮控制其翻转方向。希望这些信息能帮助你在Flutter项目中实现酷炫的翻转效果！


更多关于Flutter动画效果插件flippy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter动画效果插件flippy的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，flippy 是一个用于在 Flutter 中实现卡片翻转动画效果的插件。以下是一个简单的代码示例，展示了如何使用 flippy 插件来实现卡片翻转的动画效果。

首先，你需要在你的 pubspec.yaml 文件中添加 flippy 依赖：

dependencies:
  flutter:
    sdk: flutter
  flippy: ^latest_version  # 请替换为最新版本号

然后运行 flutter pub get 来获取依赖。

接下来是一个完整的 Flutter 应用示例，展示了如何使用 flippy 来实现卡片翻转效果：

import 'package:flutter/material.dart';
import 'package:flippy/flippy.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flippy Animation Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 1),
      vsync: this,
    )..repeat(reverse: true);

    _animation = Tween<double>(begin: 0, end: Math.pi).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flippy Animation Demo'),
      ),
      body: Center(
        child: Flippy(
          front: Card(
            child: Container(
              alignment: Alignment.center,
              color: Colors.blue,
              child: Text(
                'Front Side',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
          back: Card(
            child: Container(
              alignment: Alignment.center,
              color: Colors.green,
              child: Text(
                'Back Side',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
          flip: _animation,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _controller.reset();
            _controller.forward();
          });
        },
        tooltip: 'Flip Card',
        child: Icon(Icons.flip_to_back),
      ),
    );
  }
}

在这个示例中：

  1. Flippy 组件用于实现卡片翻转效果。
  2. front 属性定义了卡片的前面，这里是一个带有蓝色背景和白色文字的 Card。
  3. back 属性定义了卡片的背面，这里是一个带有绿色背景和白色文字的 Card。
  4. flip 属性绑定了一个 Animation<double> 对象，这个动画控制卡片的翻转。
  5. AnimationController 用于控制动画的时长和重复行为。
  6. 一个 FloatingActionButton 用于触发卡片的翻转动画。

当你点击浮动按钮时，卡片会执行翻转动画。_controller.reset() 和 _controller.forward() 用于重置并启动动画。

你可以根据需要调整动画的时长、颜色、文字等，以实现你想要的卡片翻转效果。

回到顶部