Flutter卡片滑动匹配插件 flutter_tindercard_plus 的使用

flutter_tindercard_plus 是一个用于实现类似 Tinder 卡片滑动效果的 Flutter 插件。本文将详细介绍如何使用该插件，并提供完整的示例代码。

屏幕截图

开始使用

1. 添加依赖

在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_tindercard_plus: ^x.x.x

请确保替换 ^x.x.x 为最新版本号。

2. 导入包

在 Dart 文件中导入该插件：

import 'package:flutter_tindercard_plus/flutter_tindercard_plus.dart';

3. 使用 TinderSwapCard 组件

在你的小部件布局中添加 TinderSwapCard，并编写单个卡片布局构建器，即可获得类似 Tinder 的卡片滑动效果。

4. 使用 CardSwipeCompleteCallback

使用 CardSwipeCompleteCallback 获取卡片滑动的方向和索引。

5. 使用 CardController

初始化一个 CardController 作为参数传递给组件，并调用 triggerLeft() 或 triggerRight() 方法触发滑动。

6. 使用 CardDragUpdateCallback

使用 CardDragUpdateCallback 获取正在滑动的卡片的详细信息。

示例代码

以下是一个完整的示例应用，展示了如何使用 flutter_tindercard_plus 实现卡片滑动效果。

import 'package:flutter/material.dart';
import 'package:flutter_tindercard_plus/flutter_tindercard_plus.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: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const ExampleHomePage(),
    );
  }
}

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

  @override
  State<ExampleHomePage> createState() => _ExampleHomePageState();
}

class _ExampleHomePageState extends State<ExampleHomePage>
    with TickerProviderStateMixin {
  List<String> welcomeImages = [
    "assets/welcome0.png",
    "assets/welcome1.png",
    "assets/welcome2.png",
    "assets/welcome2.png",
    "assets/welcome1.png",
    "assets/welcome1.png"
  ];

  late CardController controller; // Use this to trigger swap.

  @override
  void initState() {
    super.initState();
    controller = CardController();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tinder Card Example'),
      ),
      body: Center(
        child: SizedBox(
          height: MediaQuery.of(context).size.height * 0.6,
          child: TinderSwapCard(
            swipeUp: true,
            swipeDown: true,
            orientation: AmassOrientation.bottom,
            totalNum: welcomeImages.length,
            stackNum: 3,
            swipeEdge: 4.0,
            maxWidth: MediaQuery.of(context).size.width * 0.9,
            maxHeight: MediaQuery.of(context).size.width * 0.9,
            minWidth: MediaQuery.of(context).size.width * 0.8,
            minHeight: MediaQuery.of(context).size.width * 0.8,
            cardBuilder: (context, index) => Card(
              child: Image.asset(welcomeImages[index]),
            ),
            cardController: controller,
            swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
              /// Get swiping card's alignment
              if (align.x < 0) {
                // Card is LEFT swiping
              } else if (align.x > 0) {
                // Card is RIGHT swiping
              }
            },
            swipeCompleteCallback:
                (CardSwipeOrientation orientation, int index) {
              /// Get orientation & index of swiped card!
              print("Card Swiped $orientation, Index $index");
            },
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Trigger a left swipe programmatically
          controller.triggerLeft();
        },
        child: const Icon(Icons.arrow_back),
      ),
    );
  }
}

运行示例

1. 确保你已经将图片资源（如 welcome0.png, welcome1.png, welcome2.png）添加到项目的 assets 目录中。
2. 在 pubspec.yaml 中声明这些资源：

   assets:
     - assets/welcome0.png
     - assets/welcome1.png
     - assets/welcome2.png
   

3. 运行应用程序，查看卡片滑动效果。

通过以上步骤，你可以轻松地在自己的 Flutter 应用中集成 flutter_tindercard_plus 插件，实现卡片滑动匹配功能。