无法在 Flutter/Dart 中添加操作按钮

Question

I have spent my whole day trying to add a simple button that would perform the same action as a swipe right on the cards in the following flutter widget. I however can't seem to make it work. Here is my code for now:

class TinderCards2 extends StatefulWidget {
  @override
  _TinderCards2State createState() => _TinderCards2State();
}

class _TinderCards2State extends State<TinderCards2> with SingleTickerProviderStateMixin {


  // Add a counter variable
  int counter = 0;
  late AnimationController _animationController = AnimationController(
    vsync:  this,  // pass the SingleTickerProviderStateMixin instance as the vsync parameter
    duration: Duration(milliseconds: 500),
  );
  List<AnimatedPositioned> cards = [
    AnimatedPositioned(left: 0, top: 0, duration: Duration(milliseconds: 500),
      child: Card(
        child: Container(
            width: 400.0,height: 400.0,decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage("assets/1.png"),fit: BoxFit.cover)),
            padding: EdgeInsets.all(16.0)), ),
    ),
    AnimatedPositioned(left: 0, top: 0, duration: Duration(milliseconds: 500),
      child: Card(
        child: Container(
            width: 400.0,height: 400.0,decoration: BoxDecoration(
          image: DecorationImage(image: AssetImage("assets/2.png"),fit: BoxFit.cover,),),
            padding: EdgeInsets.all(16.0)), ),
    ),
    
  ];

  @override
  int currentCardIndex = 0;
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
  }
  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  Widget build(BuildContext context) {
    return Container(
      // Set the background color to pink
      color: Colors.pink,
      child: Center(
        // Wrap the Stack widget in a Container
        child: Container(
          // Set the height and width to a larger value
            height: 400.0,
            width: 400.0,
            // Use a Stack widget to stack the cards on top of each other

            child: Stack(
              children: cards.map((card) {
                return GestureDetector(
                  // Handle swipe gestures
                  onPanUpdate: (details) {
                    // Check the direction of the swipe
                    if (details.delta.dx > 0) { // Use last card's name
                      // Swiped right
                      setState(() {
                        int index = cards.indexOf(card);
                        currentCardIndex = index;
                        cards.removeAt(index);
                        cards.insert(index, AnimatedPositioned(left: 1000, top: 0, duration: Duration(milliseconds: 500), child: card.child));
                        right2.add(index);
                        ;});
                    } else if (details.delta.dx < 0) {

                      // Swiped left
                      setState(() {
                        int index = cards.indexOf(card);
                        currentCardIndex = index;
                        cards.removeAt(index);
                        cards.insert(index, AnimatedPositioned(left: -1000, top: 0, duration: Duration(milliseconds: 500), child: card.child));
                        left2.add(index);
                        ;});
                    }  /*else if (details.delta.dy > 0) {
                      setState(() {
                        int index = cards.indexOf(card);
                        currentCardIndex = index;
                        cards.removeAt(index);
                        cards.insert(index, AnimatedPositioned(left: 0, top: 2000, duration: Duration(milliseconds: 500), child: card.child));
                        down2.add(index);

                      });
                    }*/;

                  },
                  onPanEnd: (details) {
                    if (currentCardIndex == 0) {
                      // Navigate to a new screen
                      Navigator.pushNamed(context, '/GroupGame');
                    }
                  },
                  child: Stack(
                    children: [
                      card,
                    ],
                  ),
                );
              }).toList(),
              alignment: Alignment.center,
            )
        ),
      ),
    );
  }
}

Do you know what I could try? Any help is greatly appreciated.

I tried wrapping the Stack widget containing the swipeable cards in a Column widget and adding a TextButton widget as the last child but never got it to work.

Answer 1

Can't help you at all with your specific question, but without any other context I'd suggest you to not try to reinvent the wheel. There are many packages already doing Tinderlike cards. I'd suggest this one specifically since it is the most similar and with many customizable options.

https://pub.dev/packages/swipable_stack