Flutter Paginated Firebase list items being rebuilt constantly - flutter

Question

I've made my own social media app with Flutter and it has been awesome, however, I'm struggling to stop the chat messages from rebuilding with my paginated firebase list. I've added print statements and refactored everything to stateless widgets or stateful widgets with AutomaticKeepAliveClientMixins, but to no avail.
The problem is worst with link previews and video thumbnails as these disappear and reappear constantly while scrolling, leading to an awful experience.
Paginated List Code Below:
#override
Widget build(BuildContext context) {
return BlocBuilder<PaginationCubit, PaginationState>(
bloc: _cubit,
builder: (context, state) {
if (state is PaginationInitial) {
return widget.initialLoader;
} else if (state is PaginationError) {
return (widget.onError != null)
? widget.onError!(state.error)
: Container();
} else {
final loadedState = state as PaginationLoaded;
if (widget.onLoaded != null) {
widget.onLoaded!(loadedState);
}
if (loadedState.hasReachedEnd && widget.onReachedEnd != null) {
widget.onReachedEnd!(loadedState);
}
if (loadedState.messages.isEmpty) {
return widget.emptyDisplay;
}
return _buildListView(loadedState);
}
},
);
}
Widget _buildListView(PaginationLoaded loadedState) {
return Padding(
padding: widget.padding,
child: ListView.builder(
itemCount: max(
0,
(loadedState.hasReachedEnd
? loadedState.messages.length
: loadedState.messages.length + 1) *
2 -
1),
itemBuilder: (context, index) {
final itemIndex = index ~/ 2;
if (index.isEven) {
if (itemIndex >= loadedState.messages.length) {
_cubit.fetchPaginatedList();
return widget.bottomLoader;
}
return widget.itemBuilder(
itemIndex,
context,
loadedState.messages[itemIndex], // current message
loadedState.messages[itemIndex == loadedState.messages.length - 1
? loadedState.messages.length - 1
: (itemIndex + 1)], // previous message
loadedState.messages[
itemIndex == 0 ? 0 : (itemIndex - 1)], // next message
loadedState.messages.length,
);
}
return widget.separator!(
itemIndex,
context,
loadedState.messages[itemIndex],
);
},
),
);
}
The main message widget
class MessageItem extends StatefulWidget {
final Message message;
final Message previousMessage;
final Message previousUserMessage;
final Message nextMessage;
final Chat chat;
final bool showReactionPickerIndicator;
final bool showReaction;
final Function? onMoveScroll;
const MessageItem({
Key? key,
required this.message,
required this.previousMessage,
required this.previousUserMessage,
required this.nextMessage,
required this.chat,
this.showReaction = true,
this.showReactionPickerIndicator = false,
this.onMoveScroll,
}) : super(key: key);
MessageItem copyWith(
{Key? key,
Message? message,
bool? showReactionPickerIndicator,
bool? showReaction}) {
return MessageItem(
key: key ?? this.key,
message: message ?? this.message,
previousMessage: previousMessage,
previousUserMessage: previousUserMessage,
nextMessage: nextMessage,
showReaction: showReaction ?? this.showReaction,
showReactionPickerIndicator:
showReactionPickerIndicator ?? this.showReactionPickerIndicator,
chat: chat);
}
#override
State<MessageItem> createState() => _MessageItemState();
}
class _MessageItemState extends State<MessageItem>
with AutomaticKeepAliveClientMixin {
final messageController = MessageController.to;
#override
bool get wantKeepAlive => true;
late final bool currentUserIsAuthor;
late final bool nextMessageIsOwned;
late final bool lastMessageIsOwned;
late final bool isLastMessage;
late final bool showReactionWidget;
late final bool showAuthorName;
late final bool showNip;
late final bool showAvatar;
late final bool alignWithAvatar;
#override
void initState() {
debugPrint('[MessageItem] - initState');
if (widget.onMoveScroll != null) {
widget.onMoveScroll!();
}
final currentUser = getCurrentUser()!;
// Message setup booleans
currentUserIsAuthor = widget.message.authorId == currentUser.uid;
nextMessageIsOwned = widget.message.authorId == widget.nextMessage.authorId;
lastMessageIsOwned =
widget.message.authorId == widget.previousMessage.authorId;
isLastMessage = widget.nextMessage.id == widget.message.id;
// Message ui booleans
showReactionWidget =
widget.showReaction && widget.message.reactions.isNotEmpty;
showAuthorName = widget.chat.chatType == ChatType.GROUP &&
!currentUserIsAuthor &&
!lastMessageIsOwned;
showNip = widget.message == widget.nextMessage ||
widget.nextMessage.authorId != widget.message.authorId;
showAvatar = showNip && widget.chat.chatType == ChatType.GROUP;
alignWithAvatar = widget.chat.chatType == ChatType.GROUP && !showNip;
super.initState();
}
#override
Widget build(BuildContext context) {
super.build(context);
return SwipeTo(
iconOnRightSwipe: CupertinoIcons.reply_thick_solid,
onRightSwipe: () {
messageController.replyMessage.value = widget.message;
},
child: Material(
type: MaterialType.transparency,
child: Portal(
child: FocusedMenuWrapper(
items: messageMenuItems(
context,
widget.message,
widget.previousUserMessage,
isLastMessage,
currentUserIsAuthor,
widget.chat,
widget.copyWith(
key: const Key('MessageWidget'),
showReactionPickerIndicator: true,
showReaction: false),
),
child: Padding(
padding: _calculateMessagePadding(
lastMessageIsOwned, nextMessageIsOwned),
child: FractionallySizedBox(
alignment: currentUserIsAuthor
? Alignment.centerRight
: Alignment.centerLeft,
widthFactor: 0.8,
child: Column(
crossAxisAlignment: currentUserIsAuthor
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
children: [
if (showAvatar && !currentUserIsAuthor)
MessageUserAvatar(
userName: widget.message.authorName,
userProfile: widget.message.authorProfile),
Flexible(
child: Padding(
padding: EdgeInsets.only(
left: !currentUserIsAuthor && alignWithAvatar
? 26.w
: 0,
right: currentUserIsAuthor && alignWithAvatar
? 26.w
: 0),
child: ReactionPortalWrapper(
showReactionWidget: showReactionWidget,
showReaction: widget.showReaction,
message: widget.message,
chat: widget.chat,
isCurrentUserAuthor: currentUserIsAuthor,
messageWidget: widget,
showAuthorName: showAuthorName,
showNip: showNip,
showReactionPickerWidget:
widget.showReactionPickerIndicator,
),
)),
if (showAvatar && currentUserIsAuthor)
MessageUserAvatar(
userName: widget.message.authorName,
userProfile: getCurrentUser()!.profileImg),
],
)
],
)),
),
),
),
),
);
}
}
The Message Bubble (where I suspect something is going wrong)
class MessageBubble extends StatelessWidget {
final bool showNip;
final bool isCurrentUserAuthor;
final Message message;
final Chat chat;
const MessageBubble(
{Key? key,
required this.showNip,
required this.isCurrentUserAuthor,
required this.message,
required this.chat})
: super(key: key);
#override
Widget build(BuildContext context) {
return Bubble(
elevation: 0,
nip: showNip
? isCurrentUserAuthor
? BubbleNip.rightBottom
: BubbleNip.leftBottom
: BubbleNip.no,
radius: Radius.circular(24.r),
nipHeight: 12.h,
nipOffset: 5.h,
nipRadius: 2,
child: message.replyMessage != null
? Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildReplyMessageBody(context, isCurrentUserAuthor, message),
MessageBubbleBody(message: message, chat: chat)
],
)
: MessageBubbleBody(message: message, chat: chat));
}
Widget _buildReplyMessageBody(
BuildContext context, bool currentUserIsAuthor, Message? message) {
return Container(
margin: EdgeInsets.only(bottom: 8.h),
padding: EdgeInsets.all(6.w),
decoration: BoxDecoration(
color: Theme.of(context).brightness == Brightness.light
? Colors.white54
: Colors.black54,
borderRadius: BorderRadius.circular(8.r),
),
child: ReplyMessage(chat: chat, message: message!),
);
}
}
And the bubble body
class MessageBodyWithTimestamp extends StatelessWidget {
final Widget body;
final Widget timestamp;
const MessageBodyWithTimestamp(
{Key? key, required this.body, required this.timestamp})
: super(key: key);
#override
Widget build(BuildContext context) {
return IntrinsicWidth(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
body,
timestamp,
],
),
);
}
}
class MessageBubbleBody extends StatelessWidget {
final Message message;
final Chat chat;
const MessageBubbleBody({Key? key, required this.message, required this.chat})
: super(key: key);
#override
Widget build(BuildContext context) {
if (message.sendStatus == SendStatus.ERROR) {
return const SizedBox.shrink();
}
if (message.messageType == MessageType.MEDIA) {
if (message.duration != null) {
return MediaTimerMessage(message: message, chatId: chat.id);
} else {
return Stack(
fit: StackFit.loose,
children: [
MediaMessage(message: message, chatId: chat.id),
Positioned(
bottom: 15.h,
right: 15.w,
child: _buildTimestampReadContent(context))
],
);
}
} else if (message.messageType == MessageType.STICKER) {
return Stack(
fit: StackFit.loose,
children: [
StickerMessage(message: message, chatId: chat.id),
Positioned(
bottom: 15.h,
right: 15.w,
child: _buildTimestampReadContent(context)),
],
);
} else if (message.messageType == MessageType.AUDIO) {
if (message.mediaStatus == MediaStatus.UPLOADING) {
return MessageBodyWithTimestamp(
body: const AudioUploadingMessage(),
timestamp: _buildTimestampReadContent(context));
} else {
return MessageBodyWithTimestamp(
body: AudioMessage(message: message),
timestamp: _buildTimestampReadContent(context));
}
} else if (message.messageType == MessageType.FILE) {
return MessageBodyWithTimestamp(
body: FileMessage(message: message, chatId: chat.id),
timestamp: _buildTimestampReadContent(context));
} else {
return MessageBodyWithTimestamp(
body: TextMessage(message: message, chatId: chat.id),
timestamp: _buildTimestampReadContent(context));
}
}
}
And finally (sorry I know this is getting very long)... the text message with link preview
class TextMessage extends StatefulWidget {
final Message message;
final String chatId;
const TextMessage({Key? key, required this.message, required this.chatId})
: super(key: key);
#override
State<TextMessage> createState() => _TextMessageState();
}
class _TextMessageState extends State<TextMessage>
with AutomaticKeepAliveClientMixin {
late final List<LinkifyElement> elements;
late final List<LinkifyElement> links;
#override
bool get wantKeepAlive => true;
#override
void initState() {
print('Building text message');
elements = linkify(
widget.message.body.body,
options: const LinkifyOptions(humanize: false),
);
links = elements
.where((element) =>
element is LinkableElement &&
!element.text.contains('media.giphy.com'))
.toList();
super.initState();
}
#override
Widget build(BuildContext context) {
super.build(context);
bool isUserSender = widget.message.authorId == getCurrentUser()!.uid;
if (links.isNotEmpty) {
return TextMessageWithLink(
elements: elements, isUserSender: isUserSender);
} else {
return Flexible(
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 25.w),
child: Padding(
padding: const EdgeInsets.all(3),
child: Align(
alignment: Alignment.topLeft,
child: RichText(
textScaleFactor: MediaQuery.of(context).textScaleFactor,
text: buildTextSpan(
elements,
style: AppTextStyles.messageTextStyle(context, isUserSender),
onOpen: (link) async {
_launch(link.url);
},
linkStyle: AppTextStyles.linkTextStyle(context, isUserSender),
),
),
),
),
),
);
}
}
}
With the preview...
class TextMessageWithLink extends StatelessWidget {
final List<LinkifyElement> elements;
final bool isUserSender;
const TextMessageWithLink(
{Key? key, required this.elements, required this.isUserSender})
: super(key: key);
#override
Widget build(BuildContext context) {
return Flexible(
child: ConstrainedBox(
constraints: BoxConstraints(minWidth: 25.w),
child: Padding(
padding: const EdgeInsets.all(3),
child: Align(
alignment: Alignment.topLeft,
child: Column(
children: List.generate(elements.length, (index) {
if (elements[index] is LinkableElement &&
elements[index].text.contains('media.giphy.com') == false) {
return Column(
children: [
_buildUrlPreview(context, isUserSender, index),
GestureDetector(
onTap: () async {
_launch(elements[index].text);
},
child: Text(elements[index].text,
style: AppTextStyles.linkTextStyle(
context, isUserSender)),
)
],
);
} else if (elements[index].text.contains('media.giphy.com')) {
return GestureDetector(
onTap: () async {
_launch(elements[index].text);
},
child: Text(elements[index].text,
style:
AppTextStyles.linkTextStyle(context, isUserSender)),
);
} else {
return Text(elements[index].text,
style: AppTextStyles.messageTextStyle(
context, isUserSender));
}
}),
),
),
),
),
);
}
Widget _buildUrlPreview(BuildContext context, bool isUserSender, int index) {
return SimpleUrlPreview(
url: elements[index].text,
titleStyle: AppTextStyles.messageTextStyle(context, isUserSender)
.copyWith(fontWeight: FontWeight.w600),
descriptionStyle: AppTextStyles.messageTextStyle(context, isUserSender),
bgColor: CupertinoDynamicColor.resolve(
CupertinoColors.tertiarySystemGroupedBackground, context),
isClosable: false,
imageLoaderColor:
CupertinoDynamicColor.resolve(CupertinoColors.label, context),
previewHeight: 130,
);
}
}
Thanks in advance if you can figure it out ;)