flutter_tindercard_2 是一个用于实现类似 Tinder 卡片滑动效果的 Flutter 插件。它允许你在应用中创建可滑动的卡片堆栈，用户可以通过左右滑动来匹配或拒绝卡片。以下是使用 flutter_tindercard_2 的基本步骤：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  flutter_tindercard_2: ^0.0.2

然后运行 flutter pub get 来安装依赖。

2. 导入包

在你的 Dart 文件中导入 flutter_tindercard_2：

import 'package:flutter_tindercard_2/flutter_tindercard_2.dart';

3. 使用 TinderSwapCard 组件

TinderSwapCard 是 flutter_tindercard_2 中的核心组件。你可以通过它来创建卡片堆栈，并处理卡片的滑动事件。

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

class TinderCardExample extends StatefulWidget {
  [@override](/user/override)
  _TinderCardExampleState createState() => _TinderCardExampleState();
}

class _TinderCardExampleState extends State<TinderCardExample> {
  List<String> cards = [
    'Card 1',
    'Card 2',
    'Card 3',
    'Card 4',
    'Card 5',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tinder Card Example'),
      ),
      body: Center(
        child: TinderSwapCard(
          orientation: AmassOrientation.BOTTOM,
          totalNum: cards.length,
          stackNum: 3,
          swipeEdge: 4.0,
          maxWidth: MediaQuery.of(context).size.width * 0.9,
          maxHeight: MediaQuery.of(context).size.height * 0.7,
          minWidth: MediaQuery.of(context).size.width * 0.8,
          minHeight: MediaQuery.of(context).size.height * 0.6,
          cardBuilder: (context, index) => Card(
            child: Center(
              child: Text(
                cards[index],
                style: TextStyle(fontSize: 24.0),
              ),
            ),
          ),
          cardController: CardController(),
          swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
            // You can customize the swipe behavior here
          },
          swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
            // Handle the swipe complete event
            if (orientation == CardSwipeOrientation.LEFT) {
              print('Card $index swiped left');
            } else if (orientation == CardSwipeOrientation.RIGHT) {
              print('Card $index swiped right');
            }
          },
        ),
      ),
    );
  }
}

4. 主要参数说明

• orientation: 卡片的排列方向，可以是 AmassOrientation.BOTTOM 或 AmassOrientation.TOP。
• totalNum: 卡片的总数量。
• stackNum: 显示的卡片堆叠数量。
• swipeEdge: 卡片滑动的边缘阈值。
• maxWidth 和 maxHeight: 卡片的最大宽度和高度。
• minWidth 和 minHeight: 卡片的最小宽度和高度。
• cardBuilder: 用于构建卡片的回调函数。
• cardController: 卡片控制器，用于控制卡片的滑动行为。
• swipeUpdateCallback: 卡片滑动时的回调函数。
• swipeCompleteCallback: 卡片滑动完成时的回调函数。

5. 运行应用

现在你可以运行你的 Flutter 应用，并体验类似 Tinder 的卡片滑动效果。

6. 自定义和扩展

你可以根据需要自定义卡片的外观、滑动行为以及处理卡片的匹配逻辑。例如，你可以为卡片添加图片、按钮，或者根据用户的滑动行为来更新应用状态。

示例代码

完整的示例代码如下：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tinder Card Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: TinderCardExample(),
    );
  }
}

class TinderCardExample extends StatefulWidget {
  [@override](/user/override)
  _TinderCardExampleState createState() => _TinderCardExampleState();
}

class _TinderCardExampleState extends State<TinderCardExample> {
  List<String> cards = [
    'Card 1',
    'Card 2',
    'Card 3',
    'Card 4',
    'Card 5',
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tinder Card Example'),
      ),
      body: Center(
        child: TinderSwapCard(
          orientation: AmassOrientation.BOTTOM,
          totalNum: cards.length,
          stackNum: 3,
          swipeEdge: 4.0,
          maxWidth: MediaQuery.of(context).size.width * 0.9,
          maxHeight: MediaQuery.of(context).size.height * 0.7,
          minWidth: MediaQuery.of(context).size.width * 0.8,
          minHeight: MediaQuery.of(context).size.height * 0.6,
          cardBuilder: (context, index) => Card(
            child: Center(
              child: Text(
                cards[index],
                style: TextStyle(fontSize: 24.0),
              ),
            ),
          ),
          cardController: CardController(),
          swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
            // You can customize the swipe behavior here
          },
          swipeCompleteCallback: (CardSwipeOrientation orientation, int index) {
            // Handle the swipe complete event
            if (orientation == CardSwipeOrientation.LEFT) {
              print('Card $index swiped left');
            } else if (orientation == CardSwipeOrientation.RIGHT) {
              print('Card $index swiped right');
            }
          },
        ),
      ),
    );
  }
}