When message too long

[winsdom123456]

When message too long, it will show as follow

[fayeed]

@winsdom123456 Thanks for reporting this issue, I investigated it and it only turns up in small phones I have fixed this and release a patched version 1.0.6 try this and let me know if you face any problem.

[thevzurd]

@winsdom123456 Thanks for reporting this issue, I investigated it and it only turns up in small phones I have fixed this and release a patched version 1.0.6 try this and let me know if you face any problem.

I tried the 1.0.6 version. Still seems to be an issue.

[winsdom123456]

@fayeed YES, I have tried the smallest phone, and it is OK now, thanks!

[winsdom123456]

@thevzurd You should make sure you are using the version 1.0.6, I think it will be OK, wait for your result

[thevzurd]

@fayeed @winsdom123456 , no the fix is still not working for me. :(

[winsdom123456]

@fayeed Oh, I found this bug again in debug version. I found it is OK in profile version, but not in debug version in small iPhone, you can have a try.

[fayeed]

@winsdom123456 @thevzurd thanks I will take a look at it once more, anyway what devices did you guys saw this issue in?

[thevzurd]

@fayeed I use Moto X, Android version 5.1

[thevzurd]

@fayeed also in my screenshot, why do you this there is space below the text ?

[fayeed]

@thevzurd @winsdom123456 The problem was the avatar container was not responsive that is it had a fixed height & width of 40.0 which would create problems is small devices. Anway I have fixed the issue and released a new version 1.0.7.

[fayeed]

@thevzurd As for the extra space that is visible in the image below the text I am not able to reproduce it.

[thevzurd]

@fayeed still the same issue. I notice that the avatar has shrunken in size.

[thevzurd]

@thevzurd @winsdom123456 The problem was the avatar container was not responsive that is it had a fixed height & width of 40.0 which would create problems is small devices. Anway I have fixed the issue and released a new version 1.0.7.

I think ListTile widget should help you solve this issue, because it is responsive by design. The avatar will come in leading and the chat message + the time stamp will come in the tilte/subtitle.

[fayeed]

@thevzurd I just tested on a device with 240x432 resolution and also a 480x800 and it works perfectly.

240x432

Can you show me your code?

[thevzurd]

class _ChatFeedBody extends StatefulWidget {
  const _ChatFeedBody({this.user, this.conversationsId});
  final ChatUser user;
  final String conversationsId;
  @override
  _ChatFeedBodyState createState() => _ChatFeedBodyState();
}

class _ChatFeedBodyState extends State<_ChatFeedBody> {
  final GlobalKey<DashChatState> _chatViewKey = GlobalKey<DashChatState>();

  @override
  Widget build(BuildContext context) {
    return StreamBuilder<List<Chat>>(
      stream: Provider.of<ChatBloc>(context).getChats(),
      builder: (BuildContext context, AsyncSnapshot<List<Chat>> snapshot) {
        if (!snapshot.hasData) {
          return Center(
            child: CircularProgressIndicator(
              valueColor: AlwaysStoppedAnimation<Color>(
                Theme.of(context).primaryColor,
              ),
            ),
          );
        } else {
          List<ChatMessage> messages = snapshot.data
              .map((Chat chat) => ChatMessage(
                    id: chat.id.id,
                    text: chat.text,
                    user: ChatUser(
                      uid: chat.user.id.id,
                      name: chat.user.displayName,
                      avatar: chat.user.avatarURL,
                    ),
                    image: chat.attachmentType == AttachmentType.image
                        ? chat.attachmentUrl
                        : '',
                    vedio: chat.attachmentType == AttachmentType.video
                        ? chat.attachmentUrl
                        : '',
                    createdAt: chat.createdAt,
/*                     quickReplies: QuickReplies(
                      values: <Reply>[
                        Reply(
                          title: "😋 Yes",
                          value: "Yes",
                        ),
                        Reply(
                          title: "😞 Nope. What?",
                          value: "no",
                        ),
                      ],
                    ), */
                  ))
              .toList();

          return DashChat(
            key: _chatViewKey,
            inverted: false,
            onSend: (ChatMessage message) {},
            user: widget.user,
            inputDecoration:
                InputDecoration.collapsed(hintText: 'Add message here...'),
            dateFormat: DateFormat('yyyy-MMM-dd'),
            timeFormat: DateFormat('HH:mm'),
            messages: messages,
            showUserAvatar: true,
            showAvatarForEveryMessage: false,
            scrollToBottom: false,
            onPressAvatar: (ChatUser user) {
              print('OnPressAvatar: ${user.name}');
            },
            onLongPressAvatar: (ChatUser user) {
              print('OnLongPressAvatar: ${user.name}');
            },
            inputMaxLines: 5,
            messageContainerPadding:
                const EdgeInsets.only(left: 5.0, right: 5.0),
            alwaysShowSend: true,
            inputTextStyle: TextStyle(fontSize: 16.0),
            inputContainerStyle: BoxDecoration(
              border: Border.all(width: 0.0),
              color: Colors.white,
            ),
            onQuickReply: (Reply reply) {
              setState(
                () {
                  messages.add(
                    ChatMessage(
                        text: reply.value,
                        createdAt: DateTime.now(),
                        user: widget.user),
                  );
// ignore: sdk_version_ui_as_code
                  messages = <ChatMessage>[...messages];
                },
              );
            },
          );
        }
      },
    );
  }
}

[fayeed]

@thevzurd so there are two things first is that empty space below the text message it is because you are setting the image and vedio property of ChatMessage to empty string it needs to be null.

The second problem is that you are setting the showUserAvatar to true which was breaking the UI anway I have fixed that too, checked the new version 1.0.8.

[thevzurd]

Working now... thanks