Flutter卡片翻转动画插件flutter_flip_card的使用

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

Flutter卡片翻转动画插件flutter_flip_card的使用

flutter_flip_card 是一个Flutter插件,它提供了一种在两个子组件之间进行翻转过渡的方式。这个插件非常适用于创建类似卡片翻转的效果,可以用于展示更多信息、切换界面状态等场景。

如何使用

要开始使用 flutter_flip_card 插件,首先需要导入包:

import 'package:flutter_flip_card/flutter_flip_card.dart';

当前可用的方法

  • FlipCard:一个提供翻转卡片动画的组件。
  • GestureFlipCard:一个支持手势(如滑动)触发翻转动画的组件。

FlipCard

FlipCard 组件允许你定义卡片的正面和背面,并且可以通过编程方式控制其翻转行为。下面是一个简单的例子:

FlipCard(
    rotateSide: RotateSide.bottom, // 翻转方向为底部
    onTapFlipping: false, // 点击时自动翻转,默认关闭
    axis: FlipAxis.horizontal, // 水平翻转
    controller: con1, // 控制器实例
    frontWidget: Center(
        child: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                'image/01.png',
                fit: BoxFit.fitHeight,
            ),
        ),
    ),
    backWidget: Container(
        height: 200,
        width: 140,
        child: Image.asset(
            'image/02.jpg',
            fit: BoxFit.fitHeight,
        ),
    ),
)

你可以通过控制器来手动触发翻转:

final controller = FlipCardController();
// 触发翻转
controller.flipcard();

GestureFlipCard

GestureFlipCard 组件除了支持编程控制外,还支持用户通过手势(例如滑动手势)来进行卡片翻转。以下是一个示例代码:

GestureFlipCard(
    animationDuration: const Duration(milliseconds: 300),
    axis: FlipAxis.horizontal,
    controller: cong, // 控制器实例
    enableController: false, // 是否允许编程控制,默认关闭
    frontWidget: Center(
        child: Container(
            width: 300,
            height: 200,
            child: Image.asset(
                'image/011.jpg',
                fit: BoxFit.contain,
            ),
        ),
    ),
    backWidget: Container(
        width: 300,
        height: 200,
        child: Image.asset(
            'image/11.jpg',
            fit: BoxFit.contain,
        ),
    ),
)

示例Demo

为了更好地理解如何将这些组件集成到应用程序中,这里提供了一个完整的示例应用,展示了如何同时使用 FlipCardGestureFlipCard 组件:

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

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

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

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

class _MyAppState extends State<MyApp> {
  final con = FlipCardController();
  final con1 = FlipCardController();
  final cong = GestureFlipCardController();
  final cong1 = GestureFlipCardController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("FlipCards"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: ListView(
          children: [
            // GestureFlipCard 示例
            GestureFlipCard(
              controller: cong1,
              axis: FlipAxis.vertical,
              enableController: true,
              animationDuration: const Duration(seconds: 3),
              frontWidget: Center(
                child: Container(
                  height: 200,
                  width: 140,
                  child: Image.asset(
                    'image/01.png',
                    fit: BoxFit.fitHeight,
                  ),
                ),
              ),
              backWidget: Container(
                height: 200,
                width: 140,
                child: Image.asset(
                  'image/02.jpg',
                  fit: BoxFit.fitHeight,
                ),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text('Flip Bottom'),
              onPressed: () {
                cong.flipcard();
                cong1.flipcard();
              },
            ),
            // 另一个 GestureFlipCard 示例
            GestureFlipCard(
              enableController: true,
              controller: cong,
              animationDuration: const Duration(milliseconds: 800),
              axis: FlipAxis.horizontal,
              frontWidget: Center(
                child: Container(
                  width: 300,
                  height: 200,
                  child: Image.asset(
                    'image/011.jpg',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
              backWidget: Container(
                width: 300,
                height: 200,
                child: Image.asset(
                  'image/11.jpg',
                  fit: BoxFit.contain,
                ),
              ),
            ),
            const SizedBox(height: 20),
            // FlipCard 示例
            FlipCard(
              rotateSide: RotateSide.bottom,
              axis: FlipAxis.horizontal,
              controller: con1,
              frontWidget: Center(
                child: Container(
                  height: 200,
                  width: 140,
                  child: Image.asset(
                    'image/01.png',
                    fit: BoxFit.fitHeight,
                  ),
                ),
              ),
              backWidget: Container(
                height: 200,
                width: 140,
                child: Image.asset(
                  'image/02.jpg',
                  fit: BoxFit.fitHeight,
                ),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text('Flip Bottom'),
              onPressed: () {
                con1.flipcard();
              },
            ),
            const SizedBox(height: 20),
            FlipCard(
              rotateSide: RotateSide.right,
              disableSplashEffect: false,
              splashColor: Colors.orange,
              onTapFlipping: true,
              axis: FlipAxis.vertical,
              controller: con,
              frontWidget: Center(
                child: Container(
                  width: 300,
                  height: 200,
                  child: Image.asset(
                    'image/011.jpg',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
              backWidget: Container(
                width: 300,
                height: 200,
                child: Image.asset(
                  'image/11.jpg',
                  fit: BoxFit.contain,
                ),
              ),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              child: const Text('Flip Right'),
              onPressed: () {
                con.flipcard();
              },
            ),
          ],
        ),
      ),
    );
  }
}

以上就是关于 flutter_flip_card 插件的基本介绍及其使用方法。希望这能帮助你在项目中实现炫酷的卡片翻转效果!如果有任何问题或发现bug,请随时前往GitHub提交issue。


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

1 回复

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


当然,下面是一个关于如何使用 flutter_flip_card 插件来实现卡片翻转动画的示例代码。这个插件允许你在 Flutter 应用中创建具有翻转效果的卡片。

首先,你需要在你的 pubspec.yaml 文件中添加 flutter_flip_card 依赖项:

dependencies:
  flutter:
    sdk: flutter
  flutter_flip_card: ^1.0.0  # 请确保使用最新版本

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

接下来,在你的 Dart 文件中使用 FlipCard 组件。下面是一个完整的示例,展示了一个简单的卡片翻转动画:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Flip Card Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FlipCardExample(),
    );
  }
}

class FlipCardExample extends StatefulWidget {
  @override
  _FlipCardExampleState createState() => _FlipCardExampleState();
}

class _FlipCardExampleState extends State<FlipCardExample> with SingleTickerProviderStateMixin {
  bool isFront = true;

  void _flipCard() {
    setState(() {
      isFront = !isFront;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flip Card Example'),
      ),
      body: Center(
        child: FlipCard(
          front: Container(
            color: Colors.blue,
            child: Center(
              child: Text(
                'Front Side',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
          back: Container(
            color: Colors.green,
            child: Center(
              child: Text(
                'Back Side',
                style: TextStyle(color: Colors.white, fontSize: 24),
              ),
            ),
          ),
          flipDirection: FlipDirection.HORIZONTAL, // 或者 FlipDirection.VERTICAL
          isFlipped: !isFront,
          onFlip: _flipCard,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _flipCard,
        tooltip: 'Flip Card',
        child: Icon(Icons.flip_to_back),
      ),
    );
  }
}

代码解释:

  1. 依赖项:在 pubspec.yaml 中添加 flutter_flip_card 依赖项。
  2. 导入包:在 Dart 文件中导入 flutter_flip_card 包。
  3. 主应用:创建一个 MyApp 组件,它包含应用的主题和主页面 FlipCardExample
  4. FlipCardExample:这是一个有状态的组件,用于控制卡片的翻转状态。
  5. 状态变量isFront 用于跟踪卡片当前是正面还是背面。
  6. 翻转函数_flipCard 函数在卡片被点击时调用,用于切换 isFront 的值。
  7. FlipCard 组件
    • frontback 属性分别定义卡片的正面和背面内容。
    • flipDirection 属性定义翻转的方向(水平或垂直)。
    • isFlipped 属性根据 isFront 的值决定卡片是否翻转。
    • onFlip 属性绑定翻转事件处理函数 _flipCard
  8. 浮动按钮:在页面底部添加一个浮动按钮,点击时也会触发翻转动画。

这样,你就可以在你的 Flutter 应用中实现一个简单的卡片翻转动画了。

回到顶部