Flutter Chat - SwipeTo reply, replies wrong message [with code snippet]

Question

I have a Flutter Chat that streams messages from Firestore, everything fine there. Now I added a reply functionality. I am wrapping the chat bubbles with a SwipeTo Widget that when swiped adds the message info to a field Message in the chat page. If the first thing I do when I enter the screen is reply a message it works correctly but any message added (this reply or any other message) seems to mess some index because if I keep replying messages it starts to "pick" the wrong one, for any added, 1 further apart from the correct one, this is fixed if I leave the chat screen and reopen. I have no idea how the wrong one can be selected when it is the bubble itself passing the information to create the reply.

Chat list (I removed clutter to verify sender, isRead, etc):

Widget chatMessages() {
return StreamBuilder(
  stream: messageStream,
  builder: (context, AsyncSnapshot snapshot) {
    return snapshot.hasData
        ? ListView.builder(
            controller: scrollController,
            physics: const BouncingScrollPhysics(),
            padding: const EdgeInsets.only(bottom: 70, top: 16),
            itemCount: snapshot.data!.docs.length,
            reverse: true,
            itemBuilder: (context, index) {
              DocumentSnapshot ds = snapshot.data!.docs[index];
              Map<String, dynamic> map = ds.data() as Map<String, dynamic>;
              ChatMessage message = ChatMessage.fromMap(map);


              
              return chatMessageTile(message);
            })
        : const Center(child: CircularProgressIndicator());
  },
);

}

Chat Tile:

Widget chatMessageTile(
  ChatMessage message) {
return SwipeTo(
  animationDuration: const Duration(milliseconds: 100),
  offsetDx: 0.2,
  iconColor: Colors.transparent,
  onRightSwipe: () => onSwipedMessage(message),
  child: Container(
    child: ChatBubble(
      chatMessage: message,
      lastSender: lastSender,
      lastSenderTs: lastSenderTs,
      ),
  ),
);

}

With this alone, onSwipedMessage() is receiving the wrong Message if there was messages added to the Listview after the initial load (if the first event is Me replying it works fine).

without a code snippet, it would be difficult to find the issue. you can use gist to share the code if its too long to paste in here — Sujan Gainju, Aug 24 '22 at 12:25
There I tried to simplify where I think the problem might be. — JMGpp, Aug 24 '22 at 13:03

score 1 · Answer 1 · answered Mar 22 '23 at 07:23

Have some problem, I think it's because the swipe_to package. This issue still open in their repository https://github.com/Purvik/SwipeTo/issues/17. But you can create your custom widget like swipe_to using GestureDetector to detect user swipe direction like this.

GestureDetector(
  onHorizontalDragEnd: (value) {
    // Check swipe is to right or left
    if (value.primaryVelocity! > 0) {
      print("Right");
    } else {
      print("Left");
    }
  },
  child: Text("your message"),
)

Flutter Chat - SwipeTo reply, replies wrong message [with code snippet]

1 Answers1