Flutter: Using index of an item in a list in the same Widget

Question

Hope you’re safe and doing great. Okay so my problem is that I want to use the index of the cardBuilder

cardBuilder: (context, index) => Card(

In the swipeUpdateCallback, I wanna use it when I swipe to the right or to the left, How can I do that? How do I call the index in swipeUpdateCallback?

 swipeUpdateCallback:
          (DragUpdateDetails details, Alignment align) {
       
        if (align.x < 0) {
          _dataService.seenPost(
              welcomeImages[_index].id, ///want to use the index here///
              welcomeImages[_index].seen, ///want to use the index here///
              welcomeImages[_index].imgPath); ///want to use the index here///
        }

Here’s the full code of the widget:

child: new TinderSwapCard(
      swipeUp: true,
      swipeDown: true,
      orientation: AmassOrientation.BOTTOM,
      totalNum: welcomeImages.length,
      stackNum: 3,
      swipeEdge: 4.0,
      maxWidth: MediaQuery.of(context).size.width * 1.5,
      maxHeight: MediaQuery.of(context).size.width * 1.5,
      minWidth: MediaQuery.of(context).size.width * 1.4,
      minHeight: MediaQuery.of(context).size.width * 1.4,
      cardBuilder: (context, index) => Card( ///Here's the index i want to use///
        child: SingleChildScrollView(
          child: Column(
            children: [
              Text('s'),
              new Image.network(
                '${welcomeImages[index].imgPath}',
                fit: BoxFit.cover,
              ),
            ],
          ),
        ),
      ),
      cardController: controller = CardController(),
      swipeUpdateCallback:
          (DragUpdateDetails details, Alignment align) {
        if (align.x < 0) {
          _dataService.seenPost(
              welcomeImages[index].id, ///want to use the index here///
              welcomeImages[index].seen,
              welcomeImages[index].imgPath);
        } else if (align.x > 0) {
          //Card is RIGHT swiping
        }
      },

Answer 1

You can use swipeCompleteCallback to save current index and use in swipeUpdateCallback
But if you use swipeUpdateCallback, your _dataService will be called multiple times when swipe happening
I don't know your use case but you can put _dataService code in swipeCompleteCallback
code snippet

    swipeUpdateCallback:
          (DragUpdateDetails details, Alignment align) {
        if (align.x < 0) {
          _dataService.seenPost(
              welcomeImages[currentIndex].id, ///want to use the Index here///
              welcomeImages[currentIndex].seen,
              welcomeImages[currentIndex].imgPath);
        } else if (align.x > 0) {
          //Card is RIGHT swiping
        }
      },
    swipeCompleteCallback:
                (CardSwipeOrientation orientation, int index) {
              currentIndex = index;
              print("$currentIndex ${orientation.toString()}");

              /// Get orientation & index of swiped card!
            },

full example 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 = [
    "https://picsum.photos/250?image=9",
    "https://picsum.photos/250?image=10",
    "https://picsum.photos/250?image=11",
    "https://picsum.photos/250?image=12",
    "https://picsum.photos/250?image=13",
    "https://picsum.photos/250?image=14"
  ];

  int currentIndex = 0;
  @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(
            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.network('${welcomeImages[index]}'),
            ),
            cardController: controller = CardController(),
            swipeUpdateCallback: (DragUpdateDetails details, Alignment align) {
              /// Get swiping card's alignment
              if (align.x < 0) {
                //Card is LEFT swiping
                print("left");
              } else if (align.x > 0) {
                print("right");
                //Card is RIGHT swiping
              }
            },
            swipeCompleteCallback:
                (CardSwipeOrientation orientation, int index) {
              currentIndex = index;
              print("$currentIndex ${orientation.toString()}");

              /// Get orientation & index of swiped card!
            },
          ),
        ),
      ),
    );
  }
}