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

scrumlab_flutter_tindercard

Tinder/TanTan 卡片组件。

截图

开始使用

1. 在 pubspec.yaml 文件中添加依赖:

   dependencies:
     scrumlab_flutter_tindercard: ^x.x.x
   

2. 导入库：

   import 'package:scrumlab_flutter_tindercard/scrumlab_flutter_tindercard.dart';
   

3. 在你的布局中添加 TinderSwapCard 组件，并编写单个卡片布局。这样你就可以得到一个类似探探的滑动卡片组件。
4. 使用 CardSwipeCompleteCallback 获取滑动方向和索引。
5. 使用 CardController 触发外部滑动。初始化一个 CardController 并将其作为参数传递给组件，然后调用 triggerLeft 或 triggerRight 方法来触发滑动。
6. 使用 CardDragUpdateCallback 获取正在滑动卡片的详细信息。

示例

你可以在这里查看完整的示例代码：查看示例

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Tinder Cards')),
        body: TinderSwapCardDemo(),
      ),
    );
  }
}

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

class _TinderSwapCardDemoState extends State<TinderSwapCardDemo> {
  final List<String> cards = [
    'Card 1',
    'Card 2',
    'Card 3',
    // 添加更多卡片
  ];

  final CardController cardController = CardController();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Expanded(
            child: TinderSwapCard(
              swipeUp: false,
              swipeDown: false,
              totalNum: cards.length,
              stackNum: 3,
              cardController: cardController,
              cardBuilder: (cardIndex, val) {
                return Container(
                  alignment: Alignment.center,
                  color: Colors.lightBlue,
                  child: Text(cards[cardIndex]),
                );
              },
              cardDragEndCallback: (cardIndex, val) {
                print('Card $cardIndex was dragged');
              },
              swipeCompleteCallback: (cardIndex, val) {
                print('Card $cardIndex was swiped ${val.direction}');
              },
            ),
          ),
          ElevatedButton(
            onPressed: () {
              cardController.triggerLeft();
            },
            child: Text('Swipe Left'),
          ),
          ElevatedButton(
            onPressed: () {
              cardController.triggerRight();
            },
            child: Text('Swipe Right'),
          ),
        ],
      ),
    );
  }
}