flyerhq / flutter_chat_ui

Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
https://flyer.chat
1.65k stars 712 forks source link

Message inside chat bubble is overflowing #458

Closed rutaba1 closed 1 week ago

rutaba1 commented 1 year ago

Hi, I have a custom TextMessage Builder and the text inside it is overflowing on the right hand side.

textMessageBuilder: (textMessage, {int messageWidth, bool showName}) {
                          final bool isSenderMessage =
                              textMessage.author?.id == provider.user?.id;
                          final displaySenderName = !isSenderMessage
                              ? provider.fullUserName(textMessage?.author)
                              : "";

                          return Container(
                            constraints: BoxConstraints(
                                maxWidth: messageWidth.toDouble()),
                            padding: EdgeInsets.symmetric(
                              vertical: UIConfig.defaultMinSpace,
                              horizontal: UIConfig.defaultMediumSpace,
                            ),
                            child: Column(
                              crossAxisAlignment: isSenderMessage
                                  ? CrossAxisAlignment.end
                                  : CrossAxisAlignment.start,
                              children: [
                                SelectableLinkify(
                                  text: textMessage.text,
                                  style: isSenderMessage
                                      ? FielderTextTheme.current.bodyLarge
                                          .copyWith(color: AppColors.white)
                                      : FielderTextTheme.current.bodyLarge,
                                  onOpen: (link) async {
                                    UrlLauncherService.launchURL(link.url);
                                  },
                                ),
                                if (displaySenderName.isNotEmpty)
                                  Text(
                                    displaySenderName,
                                    style: isSenderMessage
                                        ? FielderTextTheme.current.bodySmall
                                            .copyWith(color: AppColors.white)
                                        : FielderTextTheme.current.bodySmall,
                                  ),
                                Text(
                                  DateTimeHelpers.hourMin(
                                    DateTime.fromMillisecondsSinceEpoch(
                                        textMessage.createdAt),
                                  ),
                                  style: FielderTextTheme.current.labelSmall
                                      .copyWith(
                                    fontSize: 8,
                                    letterSpacing: 1.0,
                                    color: isSenderMessage
                                        ? AppColors.textColor20
                                        : AppColors.textColor70,
                                  ),
                                ),
                              ],
                            ),
                          );
                        },

Any idea how can I fix this? Using Expanded widget in Column does not hep as It cause further render issues. Any idea on how to fix this? Thanks.

Screenshot 2023-06-05 at 10 19 51 PM
demchenkoalex commented 1 year ago

I don't think this is a bug, rather question, cause I just export a builder.

Regarding the issue itself, current version is a bit outdated, and I don't even know sometimes how it works, so will not be able to help with this.