如何在Flutter中创建像堆叠纸牌一样的火种? [英] How to create tinder like stacked cards in Flutter?

问题描述

我想在Flutter中创建可滑动的类似tinder的卡，它可以在向左或向右滑动时调用某些功能，但是在Flutter中这样做太复杂了.现在，我已经使用具有Dismissible的列表视图构建器实现了该功能，该功能按预期工作，并且可以在用户滑动时通过API调用更新列表，但是UI看起来没有吸引力，因为在水平关闭时该卡不会旋转.在这里发布之前，我已经阅读了许多博客文章，尽管其中一些文章提出了实现此目标的想法，但是无法像使用本示例中那样使用堆栈来创建一副牌之类的技术在后台更新列表.

输出

  I/flutter(32086):CardSwipeOrientation.LEFTI/颤振(32086):卡向左滑动I/颤振(32086):3I/flutter(32086):CardSwipeOrientation.RIGHTI/颤振(32086):卡向右滑动I/颤振(32086):3 

完整代码

  import'package:flutter/material.dart';导入'package:flutter_tindercard/flutter_tindercard.dart';void main()=>runApp(MyApp());MyApp类扩展了StatelessWidget {//此小部件是您的应用程序的根.@override窗口小部件build(BuildContext context){返回MaterialApp(标题:"Flutter演示"，主题:ThemeData(primarySwatch:Colors.blue，)，主页:ExampleHomePage()，);}}class ExampleHomePage扩展StatefulWidget {@override_ExampleHomePageState createState()=>_ExampleHomePageState();}类_ExampleHomePageState扩展了State< ExampleHomePage>与TickerProviderStateMixin {List< String>welcomeImages = ["assets/welcome0.png"，"assets/welcome1.png"，"assets/welcome2.png"，];@override窗口小部件build(BuildContext context){CardController控制器；//使用它来触发交换.返回新的脚手架(正文:新中心(子代:集装箱(高度:MediaQuery.of(context).size.height * 0.6，子代:新的TinderSwapCard(方向: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 :(上下文，索引){print('index $ {index}');退货卡(子级:Image.asset('$ {welcomeImages [index]}')，);}，cardController:控制器= CardController()，swipeUpdateCallback:((DragUpdateDetails详细信息，对齐方式对齐){///获取刷卡的对齐方式如果(align.x< 0){//print(卡片在向左滑动");}否则，如果(align.x> 0){//print(卡片正向滑动");}}，swipeCompleteCallback:(CardSwipeOrientation方向，整数索引){print(orientation.toString());如果(方向== CardSwipeOrientation.LEFT){打印(卡片向左滑动")；打印(welcomeImages.length);} else if(orientation == CardSwipeOrientation.RIGHT){打印(卡向右滑动")；打印(welcomeImages.length);}}，)，)，)，);}} 

I want to create swipeable tinder-like cards in flutter which can call some function on left or right swipe but it seems too complicated to do so in Flutter. Right now I have implemented the functionality using list view builder with Dismissible which is working as expected and I can update the list via API call while the user is swiping but UI doesn't look that appealing because the card doesn't rotate while dismissing horizontally. I have read many blog posts before posting here and while some of them give an idea to achieve this but it is not possible to update the list in the background with those techniques like using a stack to create a deck of cards as in this example. https://github.com/geekruchika/FlutterCardSwipe

Here's my current code relevant to swiping.

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


import 'loader.dart';
import '../screens/profile_overview.dart';
import '../providers/user.dart';

class SwipeProfiles extends StatefulWidget {
  final double deviceHeight;
  final double deviceWidth;
  SwipeProfiles(this.deviceHeight, this.deviceWidth);
  @override
  _SwipeProfilesState createState() => _SwipeProfilesState();
}

class _SwipeProfilesState extends State<SwipeProfiles> {
  List _profiles = [];
  bool _isLoading = true;
  bool _gettingMoreProducts = false;

  _loadMoreProfiles() async {
    print('Reached end of list');
    if (_gettingMoreProducts) {
      print('Already getting products');
      return;
    }
    print('Firestore function called');
    _gettingMoreProducts = true;
    dynamic newProfiles =
        await Provider.of<User>(context, listen: false).getProfiles();
    _profiles.addAll(newProfiles);
    setState(() {});
    print('New Products added');
    _gettingMoreProducts = false;
  }

  @override
  void initState() {
    print('Getting new products from init state');
    Provider.of<User>(context, listen: false).getProfiles().then((profiles) {
      setState(() {
        _profiles = profiles;
        _isLoading = false;
      });
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(10),
        height: widget.deviceHeight * 0.75,
        decoration: BoxDecoration(borderRadius: BorderRadius.circular(10)),
        child: _isLoading
            ? Loader()
            : ListView.builder(
                itemCount: _profiles.length,
                itemBuilder: (context, index) {
                  if (index == _profiles.length - 1) {
                    _loadMoreProfiles();
                  }
                  return Dismissible(
                    key: UniqueKey(),
                    onDismissed: (direction) {
                      setState(() {
                        _profiles.removeAt(index);
                      });
                    },
                    background: Container(
                      color: Colors.red,
                      child: Icon(
                        Icons.cancel,
                        color: Colors.white,
                        size: 50,
                      ),
                    ),
                    secondaryBackground: Container(
                      color: Colors.green,
                      child: Icon(
                        Icons.check,
                        color: Colors.white,
                        size: 50,
                      ),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: ProfileOverview(_profiles[index],
                          widget.deviceHeight, widget.deviceWidth),
                    ),
                  );
                },
              ));
  }
}

解决方案

You can directly use package https://pub.dev/packages/flutter_tindercard
or reference source code
In output you can see the List length did not change and you can detect swipe left or right

swipeCompleteCallback:
                (CardSwipeOrientation orientation, int index) {
              print(orientation.toString());
              if (orientation == CardSwipeOrientation.LEFT) {
                print("Card is LEFT swiping");
                print(welcomeImages.length);
              } else if (orientation == CardSwipeOrientation.RIGHT) {
                print("Card is RIGHT swiping");
                print(welcomeImages.length);
              }
            },

working demo

output

I/flutter (32086): CardSwipeOrientation.LEFT
I/flutter (32086): Card is LEFT swiping
I/flutter (32086): 3
I/flutter (32086): CardSwipeOrientation.RIGHT
I/flutter (32086): Card is RIGHT swiping
I/flutter (32086): 3

full code

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ExampleHomePage(),
    );
  }
}

class ExampleHomePage extends StatefulWidget {
  @override
  _ExampleHomePageState createState() => _ExampleHomePageState();
}

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

  @override
  Widget build(BuildContext context) {
    CardController controller; //Use this to trigger swap.

    return new Scaffold(
      body: new Center(
        child: Container(
          height: MediaQuery.of(context).size.height * 0.6,
          child: new TinderSwapCard(
            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) {
              print('index ${index}');
              return Card(
                child: Image.asset('${welcomeImages[index]}'),
              );
            },
            cardController: controller = CardController(),
            swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
              /// Get swiping card's alignment
              if (align.x < 0) {
                //print("Card is LEFT swiping");
              } else if (align.x > 0) {
                //print("Card is RIGHT swiping");
              }
            },
            swipeCompleteCallback:
                (CardSwipeOrientation orientation, int index) {
              print(orientation.toString());
              if (orientation == CardSwipeOrientation.LEFT) {
                print("Card is LEFT swiping");
                print(welcomeImages.length);
              } else if (orientation == CardSwipeOrientation.RIGHT) {
                print("Card is RIGHT swiping");
                print(welcomeImages.length);
              }
            },
          ),
        ),
      ),
    );
  }
}

这篇关于如何在Flutter中创建像堆叠纸牌一样的火种?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！