fayeed / dash_chat

The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.

⚠️ V1 is not maintained anymore, check the V2 on: https://github.com/molteo-engineering-team/Dash-Chat-2 ⚠️

---

💬 Dash Chat

The most complete Chat UI for flutter

Inspired by react-native-gifted-chat. Highly customizable and helps developing chat UI faster.

Usage 💻

To use this package, add dash_chat as a dependency in your pubspec.yaml file.

Features 🔮

• Fully customizable components
• Copy messages to clipboard
• Multi-line TextInput
• Touchable links using flutter_parsed_text
• Avatar as user's initials
• Quick Reply messages
• Load earlier messages
• Scroll to bottom Widget
• Composer actions (to attach photos, etc.) - WIP

Message object 📦

example, Chat Message

ChatMessage(
        text: "Hello",
        user: ChatUser(
          name: "Fayeed",
          uid: "123456789",
          avatar: "https://www.wrappixel.com/ampleadmin/assets/images/users/4.jpg",
        ),
        createdAt: DateTime.now(),
        image: "http://www.sclance.com/images/picture/Picture_753248.jpg",
    );

example, Chat Message with Quick Replies

ChatMessage(
        text: "This is a quick reply example.",
        user: ChatUser(),
        createdAt: DateTime.now(),
        quickReplies: QuickReplies(
          values: <Reply>[
            Reply(
              title: "😋 Yes",
              value: "Yes",
            ),
            Reply(
              title: "😞 Nope. What?",
              value: "no",
            ),
          ],
        ),
      ),

Parameters ⚙️

• messageContainerFlex (int) - Flex value for the messeage container defaults to 1
• height (double) - Height for the Dash chat Widget.
• width (double) - Width for the Dash chat Widget.
• messages (List) - List of messages to display in the chat.
• text (String) - [optional parameter] If provided will stop using the default controller.
• onTextChange (Function(String)) - If the text parameter is passed then onTextChange must also be passed.
• inputDecoration (InputDecoration) - Used to provide input decoration to the text.
• messageIdGenerator (String Function) - Usually new message added by the user gets UUID v4 String generater by uuid.
• user (ChatUser) - The current user object.

  DashChat(
    user: ChatUser(
      name: "Jhon Doe",
      uid: "xxxxxxxxx",
      avatar: "https://www.wrappixel.com/ampleadmin/assets/images/users/4.jpg",
    )
  );

• onSend (Function(ChatMessage)) - Callback when sending a message.

• alwaysShowSend (bool) - Should the send button be always active defaults to false.

• avatarMaxSize (double) - Sets the default Avatar's max size, default is 30.0.

• dateFormat (DateFormat) - Format to use for rendering date default is yyyy-MM-dd.

• timeFormat (DateFormat) - Format to use for rendering time default is HH:mm:ss.

• showUserAvatar (bool) - Should the user avatar be shown.

• showAvatarForEveryMessage (bool) - Should the avatar be shown for every message defaults to false.

• onPressAvatar (Function(ChatUser)) - Callback funtion when avatar is tapped on.

• onLongPressAvatar (Function(ChatUser)) - Callback funtion when avatar is long pressed on.

• onLongPressMessage (Function(ChatUser)) - Callback funtion when message is long pressed on.

• inverted (bool) - Should the messages be shown in reversed order

• avatarBuilder (Widget Function(ChatUser)) - Will override the the default avatar.

• messageBuilder (Widget Function(ChatMessage)) - Will override the the default message widget.

• messageTextBuilder (Widget Function(String)) - Will override the the default message text widget.

• messageImageBuilder (Widget Function(String)) - Will override the the default message imaeg widget

• messageTimeBuilder (Widget Function(String)) - Will override the the default message time widget.

• dateBuilder (Widget Function(String)) - Will override the the default chat view date widget.

• sendButtonBuilder (Widget Function(Function)) - Will override the the default send button widget.

• chatFooterBuilder (Widget Function) - A Widget that will be shown below the MessageListView like you can a "tying..." Text Widget at the end.

• inputFooterBuilder (Widget Function) - A Widget that will be shown below the ChatInputToolbar.

• maxInputLength (int) - Main input length of the input text box defaulst to no limit.

• parsePatterns (List) - Used to parse text to make a linkified text uses flutter_parsed_text.

  DashChat(
    parsePatterns: <MatchText>[
      MatchText(
        type: "email",
        onTap: (String value) {}
      ),
      MatchText(
        pattern: r"\B#+([\w]+)\b",
        style: TextStyle(
          color: Colors.pink,
          fontSize: 24,
        ),
        onTap: (String value) {}
      ),
    ]
  );

• messageContainerDecoration (BoxDecoration) - Provides a custom style to the message container.

• leading (List<Widget>) - List of Widget to show before the TextField.

• trailing (List<Widget>) - List of Widget to show after the TextField will remove the send button.

• readOnly (bool) - Hides the input bar, defaults to false.

• showTraillingBeforeSend - Should the trailling widgets be shown before the send button defaults to true.

• inputTextStyle (TextStyle) - Style for the TextField.

• inputContainerStyle (BoxDecoration) - TextField container style.

• inputMaxLines (int) - Max length of the input lines default to 1.

• showInputCursor (bool) - Should the input cursor be shown defaults to true.

• inputCursorWidth (double) - Width of the text input defaults to 2.0.

• inputCursorColor (Color) - Color of the input cursor defaults to theme.

• scrollController (ScrollController) - ScrollController for the MessageListView.

• messageContainerPadding (EdgeInsetsGeometry) - Padding for the MessageListView.

• messagePadding (EdgeInsets) - Padding for the MessageContainer.

• onQuickReply (Funtion(Reply)) - Callback method when the quickReply was tapped on.

• quickReplyStyle (BoxDecoration) - Container style for the QuickReply Container.

• quickReplyTextStyle (TextStyle) - QuickReply text style.

• quickReplyBuilder (Widget Function(Reply)) - Will override the the default QuickReply Widget.

• scrollToBottom (bool) - Should the scroll to bottom widget be shown defaults to true.

• scrollToBottomStyle (ScrollToBottomStyle) - sets the style & position for the scrollToBottom widget.

• scrollToBottomWidget (Widget Function()) - Overrides the default scrollToBottomWidget with a custom widget.

• onScrollToBottomPress (Function) - override the default behaviour of the onScrollToBottom Widget.

• shouldShowLoadEarlier (bool) - Should the LoadEarlier Floating widget be shown or use load as you scroll scheme whcih will call the onLoadEarlier defaults to false which is this scheme.

• showLoadEarlierWidget (Widget Function()) - Override the default behaviour of the onScrollToBottom Widget.

• onLoadEarlier (Function) - Override the default behaviour of the onLoadEarleir Widget or used as a callback when the listView reaches the top.

• inputToolbarPadding (EdgeInsets) - Can be used to add padding to the input toolbar.

• inputToolbarMargin (EdgeInsets) - Can be used to add margin to the input toolbar.

• shouldStartMessagesFromTop (bool) - Can be used to align messages so that it starts from top to bottom instead of the default bottom to top.

• textBeforeImage (bool) - Can be used to set the order of the text and the image inside a message defaults to true.

• quickReplyScroll (bool) - Should the quick reply options be horizontally scrollable

• quickReplyPadding (EdgeInsetsGeometry) - Padding for QuickReply

• inputDisabled (bool) - Should the input TextField be disabled, defaults to false

• messageDecorationBuilder (BoxDecoration Function(ChatMessage, isUser) - Override the message container decoration. [Note: This will override the messageContainerDecoration ]

  DashChat(
    ...
    messageDecorationBuilder: (ChatMessage msg, bool isUser){
      return BoxDecoration(
        ...
        color: isUser ? Colors.red : Colors.blue, // example
        ...
      );
    },
    ...
  );

Credits 👨🏻‍💻

• Transparent Image - Brian Egan
• uuid - Yulian Kuncheff

Found this project useful? ❤️

If you found this project useful, then please consider giving it a ⭐️ on Github and sharing it with your friends via social media.

License ⚖️

• MIT

API details 📝

See the dash_chat.dart for more API details

Issues and feedback 💭

If you have any suggestion for including a feature or if something doesn't work, feel free to open a Github issue for us to have a discussion on it.

dash_chat's Issues

Emoji's have a blue tint

Emoji's have a blue tint. It is as if they are rendered behind a blue filter. It would be ideal for them to be rendered without this blue colour.

Steps to reproduce:
Create a chat.
Send a message containing an emoji.

Screenshot:

Tested on LG G5
Android 7.0
dash_chat: ^1.0.15

Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 27321ebbad (3 months ago) • 2019-12-10 18:15:01 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0

From the .metadata file:

version:
revision: 27321ebbad34b0a3fafe99fac037102196d655ff
channel: stable

project_type: app

Input footer hidden on keyboard popup

the widget inside the input footer are hidden when virtual keyboard is active

inputFooterBuilder: () {
return Column(
children: [
Text('asd'),
Text('asd'),
Text('asd'),
Text('asd'),
Text('asd'),
Text('asd'),
],
);
}

When message too long

When message too long, it will show as follow

Dash chat example app showing progress indicator infinitely

Dash chat showing loader infinitely
I have cloned the example app, when tried to run it is howing infinite loader.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://github.com/fayeed/dash_chat/tree/master/example'
2. clone or copy 'example code'
3. Run flutter using 'flutter run'
4. See
   

Expected behavior
To see the dash chat screen

Screenshots
Expected:

Desktop (please complete the following information):

• OS: Ubuntu
• Device: Redmi note 7 pro
• Flutter Version: 1.12.13+hotfix.5
• Dart Version: 2.7.0

Scroll problem.

Hello, I have a problem with the widget, after I close the keyboard, widget scrolls with the page, see image below

How i can beat this behavior?
my code is

  @override
  Widget build(BuildContext context) {
    var appbar = CupertinoNavigationBar(
      leading: CupertinoNavigationBarBackButton(
        onPressed: () => Navigator.of(context).pop(),
        previousPageTitle: 'Chats',
      ),
      middle: Text(
        widget.otherUser.name,
        style: TextStyle(
          color: MyApp.mainColor,
        ),
      ),
      trailing: Icon(
        Icons.more_vert,
        color: Colors.grey,
      ),
    );
    return Scaffold(
      appBar: appbar,
      body: SafeArea(
        child: Container(
          child: DashChat(
            messageContainerFlex: 1,
            height: MediaQuery.of(context).size.height -
                (appbar.preferredSize.height +
                    MediaQuery.of(context).viewPadding.top),
            width: MediaQuery.of(context).size.width,
            user: widget.user,
            inverted: false,
            onSend: (i) {
              setState(() {
                messages.add(i);
                messages.add(
                  ChatMessage(
                    text: "Echo: " + i.text,
                    user: ChatUser(
                      name: widget.otherUser.name,
                      uid: widget.otherUser.uid,
                      avatar: widget.otherUser.avatar,
                    ),
                    createdAt: DateTime.now(),
                  ),
                );
              });
            },
            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: 3,
            messageContainerPadding: 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,
            ),
            onLoadEarlier: () => {},
          ),
        ),
      ),
    );
  }

message item builders should give the full message object

Is your feature request related to a problem? Please describe.
My use case was just to add message status "sent, received, seen" to the message bubble, my idea was to use the messageTimeBuilder to add time and message status. Problem is that I don't have the message data on that builder so I can't retrieve my message status. So I had to redo the all message widget with messageBuilder instead. Work but much more stuff to take care.

Describe the solution you'd like
all message builders should give the full message object instead of just the information that the default widget is showing.

Load Earlier gap customization

Is your feature request related to a problem? Please describe.
Currently there is a 100px tall container that causes a wide gap between the start of the messages. Ideally this should be customizable as I want the latest messages to be a little closer to the app bar.

Describe the solution you'd like
Ideally a new property called "loadEarlierSpacerHeight" that can be customized with a value.

Describe alternatives you've considered
Either forking the project and making the change or trying to use some overly clever Stacks/Transforms.

If this doesn't make sense I can send along a code snippet!

E.g.

Avatar on press / long press

Describe the bug
I have a crash when I press or long press avatars, because I didn't set onPressAvatar onLongPressAvatar. But I don't want to set them as I have no interactions to do there.

To Reproduce
click on avatar
Expected behavior
nothing should append, no crash

backend integrations?

Hi!

This is an awesome initiative.

Is anybody working on some backend integration already, for example if this package could connect to https://zulipchat.com/api/ it would be gold!

Alex

Date widget not showing between message of two dates

Describe the bug
The date widget only show on top but not showing in between the message with different date.
For example, message 1st April 2020 and 2nd April 2020.

To Reproduce
I using the following data with created_at.

{
                "id": 14,
                "customer_id": 6,
                "is_admin": 0,
                "status": 1,
                "message": "1",
                "created_at": "2020-04-01 23:06:47",
                "date": "Wed, Apr 1, 2020 11:06 PM"
            },
            {
                "id": 15,
                "customer_id": 6,
                "is_admin": 1,
                "status": 1,
                "message": "Hello I am Steven, How can I help you?",
                "created_at": "2020-04-02 21:00:17",
                "date": "Thu, Apr 2, 2020 9:00 PM"
            }

Dart code example

final msg = ChatMessage(
        text: "Test",
        user: user,
        createdAt: formattedDate("2020-04-01 12:00:00"),
        messageIdGenerator: () {
          return uuid.v4();
        },
      );
  
      final msg2 = ChatMessage(
        text: "Test",
        user: user,
        createdAt: formattedDate("2020-04-02 00:00:00"),
        messageIdGenerator: () {
          return uuid.v4();
        },
      );

Screenshots
Top

Bottom

Desktop (please complete the following information):

• OS: [Mac]
• Device: [iPhone11Pro 13.3] | Simulator
• Version [1.0.18]

ChatMessage() with onTap

ChatMessage() does not have the onTap() event, it is important for a message like localization that needs to open the map.

textDirection

thanks for the hard work❤
how to change 'textDirection' for the input box?

IOS widgets margin in bottom

i am using this for ios cuppertino widgets
all working fine but there is little margin at the bottom

Code :

class UserMessagePageState extends State<UserMessagePage> {
  final ChatUser user = ChatUser(
    name: "Poovarasan",
    uid: "123456789",
    avatar: "https://avatars1.githubusercontent.com/u/8036283?s=460&v=4",
  );
  final ChatUser otherUser = ChatUser(
    name: "Poovarasanv",
    uid: "123456780",
    avatar: "https://avatars1.githubusercontent.com/u/8036283?s=460&v=4",
  );

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text("Message"),
      ),

      body: Container(
        decoration: BoxDecoration(
          color: Colors.green,
        ),
        child: SafeArea(
          child: Material(
            child: Padding(
              padding: const EdgeInsets.only(bottom: 0.0),
              child: DashChat(
                onSend: (ChatMessage message) {},
                messages: [
                  ChatMessage(text: "Hello", user: user, id: "hello"),
                  
                ],
                user: user,
                dateFormat: DateFormat('yyyy-MMM-dd'),
                timeFormat: DateFormat('HH:mm'),
                alwaysShowSend: false,
                messageContainerPadding: EdgeInsets.zero,
                inputContainerStyle: BoxDecoration(
                  border: Border.all(
                      width: 1.0, color: CupertinoColors.lightBackgroundGray),
                  color: Colors.white,
                ),
                shouldShowLoadEarlier: true,
                showTraillingBeforeSend: true,
                trailing: <Widget>[
                  IconButton(
                    icon: Icon(Feather.camera),
                    onPressed: () {
                      print("object");
                    },
                  )
                ],
                sendButtonBuilder: (Function click) {
                  return IconButton(
                    icon: Icon(Feather.send),
                    onPressed: click,
                  );
                },
                leading: <Widget>[
                  IconButton(
                    icon: Icon(Feather.paperclip),
                    onPressed: () {
                      print("object");
                    },
                  )
                ],
                inputDecoration: InputDecoration.collapsed(
                  hintText: "Add message here...",
                ),


//              inputFooterBuilder: () {
//                return Text("Hello");
//              }
              ),
            ),
          ),
        ),
      ),
      //resizeToAvoidBottomPadding: true,
    );
  }
}

ScrollToBottom work incorrectly if widget is not at full scale

Describe the bug
scrollToBottom setting works incorrectly if a widget takes part of the screen.

To Reproduce
Steps to reproduce the behavior:

1. Create the following Widget structure

ListView
Image
Expanded
DashChat
end
end
2. Open your app
3. The bottom of the chat will be hidden.

Expected behavior
Write message input to be visible at the bottom.

Screenshots

Desktop (please complete the following information):

• OS: Android
• Device: Emulator and Huawei P20Pro
• Flutter Version: 1.12.13
• Dart Version: 2.5.2
• Version 1.0.16

https://photos.app.goo.gl/H2mMGv5mZTrvBQBS9

Horizontal overflow occurs when message content is too large

• Message row overflows text reaches a certain length
  • Occurred with avatars visible

My code using dash_chat

IOS layout Issue

I am using with IOS it gives different behaviour, input is hidden at the botton

Then i tried to added safearea

My code look like this

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CupertinoNavigationBar(
        middle: Text(
          "Messages",
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Color(0xff0052cc),
        leading: CupertinoNavigationBarBackButton(
          color: Colors.white,
        ),
        trailing: CupertinoButton(
          padding: EdgeInsets.zero,
          child: Icon(
            Ionicons.ios_settings,
            color: Colors.white,
          ),
          onPressed: () {},
        ),
      ),
      body: SafeArea(
        child: Container(
          color : Colors.white,
          //padding: EdgeInsets.only(bottom: 40),
          child: DashChat(
              scrollToBottom: false,
              onSend: onSend,
              messages: [
                ChatMessage(text: "Hello", user: user, id: "hello"),
              ],
              user: user,
              dateFormat: DateFormat('yyyy-MMM-dd'),
              timeFormat: DateFormat('HH:mm'),
              alwaysShowSend: false,
              messageContainerPadding: EdgeInsets.zero,
              inputContainerStyle: BoxDecoration(
                  border: Border.all(
                      width: 1.0,
                      color: CupertinoColors.lightBackgroundGray),
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(25)
              ),
              shouldShowLoadEarlier: true,
              showTraillingBeforeSend: true,
              trailing: <Widget>[
                IconButton(
                  icon: Icon(Feather.camera),
                  onPressed: () {
                    print("object");
                  },
                )
              ],
              sendButtonBuilder: (Function click) {
                return IconButton(
                  icon: Icon(Feather.send),
                  onPressed: click,
                );
              },
              leading: <Widget>[
                IconButton(
                  icon: Icon(Feather.paperclip),
                  onPressed: () {
                    print("object");
                  },
                )
              ],
              inputDecoration: InputDecoration.collapsed(
                hintText: "Add message here...",
              ),
//                  inputFooterBuilder: () {
//                    return Padding(
//                      padding: EdgeInsets.only(bottom: 50),
//                    );
//                  }
          ),
        ),
      ),
    );
  }

ChatMessage not cleared after calling onSend

After submitting a new message (onSend), the widget does not reset the state of the send button and will continue to send the last text entered every time it is clicked

Don't show padding on left side

Is it possible to show all messages on the left without padding when I don't show an avatar?

type 'Timestamp' is not a subtype of type 'int'

Getting this error when trying to implement

Hidden input

Is your feature request related to a problem? Please describe.
I want to provide a guided conversation with my user (a help system), using only quick reply buttons.

Describe the solution you'd like
A way to completely remove the input box.

scrollToBottom

Describe the bug
Hello again Fayeed.
I really liked the UI, so I don't want to abandon it. But I have a problem.

How can I disable scrollToBottom ?

 return DashChat(
                  key: _chatViewKey,
                  user: user,
                  scrollToBottom: false,

When set scrollToBottom to false, nothing happens, the button keeps appearing;

Why am i wanting this?
Because when sending messages, sometimes a bug happens and it can't go to the bottom of the automated scroll.
And The distance it disappears from the footer is too short and I couldn't adjust this part.

When the keyboard is open and I send a message, the scroll does not reach the end.

If there is any way to get the down button only halfway up the screen, it would be ideal for me.

Thank you for your attention.

Is there any away to show label for days ?

Hi fayeed,
I need show a label for date messages like whatsapp from firebase.
june1
message1,
message2,
message3
june2
message1,
message2,
message3,

List<DocumentSnapshot> items = snapshot.data.documents;
         var messages =
             items.map((i) => ChatMessage.fromJson(i.data)).toList();

How would i do that ?

scrollToBottom widget remains visible after leaving chat page

I am using package version 1.0.15 and it seems the problem is back. The scrollToBottom widget stays on top of everything even when I leave the chat screen.

This is the same problem that was brought up in issue: #4

I am using:

dash_chat: ^1.0.15

Flutter 1.12.13+hotfix.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 27321ebbad (3 months ago) • 2019-12-10 18:15:01 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0

From the .metadata file:

version:
revision: 27321ebbad34b0a3fafe99fac037102196d655ff
channel: stable

project_type: app

Private user to user chat with Firebase as backend?

Is your feature request related to a problem? Please describe.
Any plans to make this work with Firebase?

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Additional context
Add any other context or screenshots about the feature request here.

Adding a way to see message context in the message builder

Is your feature request related to a problem? Please describe.
I would like to display messages with a custom avatar and message, where the actual message bubble is different if it's followed by another by the same user (ie. in iMessage where there is a tail on the bubble unless the user sends a message right after). This would also allow me to display my custom avatar only once for each block of messages.

Describe the solution you'd like
A simple flag saying whether this message is followed by (and maybe one if it is preceded by) a message from the same user.

Describe alternatives you've considered
This could be on the message object, or as another parameter to the message builder.

messageContainerPadding does not work

Setting messageContainerPadding to any value doesn't seem to work. I think this is because in message_list_view.dart I see this (line 39) this.messageContainerPadding = const EdgeInsets.only(top: 10.0, right: 10.0, left: 10.0),

I think the padding is always set to this const value vs being set to a value passed in

Doesn't work at all

when I click on the TextField, an error occurred and can't type within the TextField.

this is the error message :

I/flutter ( 568): ══╡ EXCEPTION CAUGHT BY FOUNDATION LIBRARY ╞════════════════════════════════════════════════════════
I/flutter ( 568): The following assertion was thrown while dispatching notifications for FocusNode:
I/flutter ( 568): 'package:flutter/src/services/text_input.dart': Failed assertion: line 401 pos 15:
I/flutter ( 568): 'textCapitalization != null': is not true.
I/flutter ( 568): Either the assertion indicates an error in the framework itself, or we should provide substantially
I/flutter ( 568): more information in this error message to help you determine and fix the underlying cause.
I/flutter ( 568): In either case, please report this assertion by filing a bug on GitHub:
I/flutter ( 568): https://github.com/flutter/flutter/issues/new?template=BUG.md
I/flutter ( 568): When the exception was thrown, this was the stack:
I/flutter ( 568): #2 new TextInputConfiguration (package:flutter/src/services/text_input.dart:401:15)
I/flutter ( 568): #3 EditableTextState._openInputConnection (package:flutter/src/widgets/editable_text.dart:1400:9)
I/flutter ( 568): #4 EditableTextState._openOrCloseInputConnectionIfNeeded (package:flutter/src/widgets/editable_text.dart:1441:7)
I/flutter ( 568): #5 EditableTextState._handleFocusChanged (package:flutter/src/widgets/editable_text.dart:1707:5)
I/flutter ( 568): #6 ChangeNotifier.notifyListeners (package:flutter/src/foundation/change_notifier.dart:206:21)
I/flutter ( 568): #7 FocusNode._notify (package:flutter/src/widgets/focus_manager.dart:808:5)
I/flutter ( 568): #8 FocusManager._applyFocusChange (package:flutter/src/widgets/focus_manager.dart:1401:12)
I/flutter ( 568): (elided 12 frames from class _AssertionError and package dart:async)
I/flutter ( 568): The FocusNode sending notification was:
I/flutter ( 568): FocusNode#9bed9
I/flutter ( 568): ════════════════════════════════════════════════════════════════════════════════════════════════════

am using this version (dash_chat: 1.0.12)

why it's happened?

quick replies not showing

Describe the bug
message quick replies not showing up.

To Reproduce
Steps to reproduce the behavior:

1. create a static ChatUser
2. add a user's message to messages list, with quick reply parameters
3. display messages
4. See error

Expected behavior
to show messages along with available quick replies

Overflow exception

Describe the bug
There is an overflow exception when the chat doesn't take the full width of the screen

To Reproduce
Use chat dash in master detail view and send a very long message

Expected behavior
Not having overflow

Screenshots

new message chat content not scroll to latest

Describe the bug
when have new message chatbox content not scroll to latest is freezing

This is not a bug, I just do not understand how to replace the default sendButtonBuilder

I was using the example and everything is working flawlessly, but then I try to change the default icon send but it ask for a specific time and I am not sure on how to create a type Widget Function(Function)
Could someone illustrate me. I do not need to modify the functionality, just the icon colors.

ScrollController not attached to any scroll views

When we set ScrollController property we have an exception telling us:

[ERROR:flutter/lib/ui/ui_dart_state.cc(148)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 110 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.
E/flutter (28833): #0      _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:40:39)
E/flutter (28833): #1      _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5)
E/flutter (28833): #2      ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:110:12)
E/flutter (28833): #3      DashChatState.initState.<anonymous closure> (package:dash_chat/src/chat_view.dart:331:48)
E/flutter (28833): #4      _rootRun (dart:async/zone.dart:1120:38)
E/flutter (28833): #5      _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter (28833): #6      _CustomZone.runGuarded (dart:async/zone.dart:923:7)
E/flutter (28833): #7      _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:963:23)
E/flutter (28833): #8      _rootRun (dart:async/zone.dart:1124:13)
E/flutter (28833): #9      _CustomZone.run (dart:async/zone.dart:1021:19)
E/flutter (28833): #10     _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:947:23)
E/flutter (28833): #11     Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:21:15)
E/flutter (28833): #12     _Timer._runTimers (dart:isolate-patch/timer_impl.dart:382:19)
E/flutter (28833): #13     _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:416:5)
E/flutter (28833): #14     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:12)

We think that the problem is you use the default scrollController in chat_view.dart (initState) instead of our scrollController.

Flutter doctor:
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.9.1+hotfix.6, on Linux, locale es_AR.UTF-8)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Android Studio (version 3.5)
[!] Android Studio
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
✗ Unable to find bundled Java version.
[✓] Connected device (2 available)

Message not sent by hitting action keyboard

Describe the bug
We don't have any way to send the message by hitting the keyboard action, neither to configure it to "send" action. Would be very nice to be able to do it

To Reproduce
click keyboard action, keyboard just close but message is not sent

Expected behavior
Message is sent

Static Input Bar

Is your feature request related to a problem? Please describe.
Right now when using Dash Chat the input bar scrolls away when scrolling through the chat. Most chat systems today have a static chat bar so you can start typing while looking at other chats. I also get frustrated when using the current input bar because it has padding/margin issues when working on iPhone or if I want a bottom navigation bar under the input.

Describe the solution you'd like
A static input bar that will lock to the bottom of the screen (also with adjustable padding and margin) or an option to completely hide the built in input bar and hide our own.

Describe alternatives you've considered
I have not been able to find a solution directly to the problem regarding having a bottom navigation bar with the chat system. I do understand this is normally not ideal anyway but is necessary for an application I am building.

Additional context
I plan on implementing this myself and will submit a pull request. I will try and make this optional so it can be compatible with old projects.

Ability to @mention

Is your feature request related to a problem? Please describe.
I would like to be able to @mention people in chat. This may be overkill for a drop in solution but would be very nice to have.

Describe the solution you'd like
When '@' is typed to prompt a list (can be provided to dash chat constructor) of Chat Users and as more letters are typed filter by the display name. Also make these names clickable in chat and bolded.

Cannot hide avatars

Hey,

I have been working with dash_chat now for a while, however, I am not able to show deactivate the avatars for all users. Right now the avatar is always shown for one user. Although I set showAvatarForEveryMessage and showuseravatar ar both set to false. It seems that this behavior is not supported at the moment? Can someone confirm this?

Ask a question about the display location of the message content

Ask a question about the display location of the message content, the message is either displayed on the left or on the right, but I don't see the parameters related to the control of this location, do the following test, just swap the uid of the following two messages, the location of the message is also interchanged, the trouble tells you how to control the display location, Or what the rules that control the location are, thank you very much.

`

ChatMessage message1 = ChatMessage(
text: "Hello",
user: ChatUser(
name: "Fayeed",
uid: "2262561",
),
createdAt: DateTime.now(),
);

ChatMessage message2 = ChatMessage(
    text: "Hello2",
    user: ChatUser(
      name: "Fayeed2",
      uid: "123456789",
    ),
    createdAt: DateTime.now(),
);

`

Consider removing SingleChildScrollView

Describe the bug
when SingleChildScrollView and the messages less then the viewport, getting the keyboard on and scrolling places the input under the keyboard,
also when it is present and the keyboard is open the user cannot see the last message on top and the view earlier messages widget doesn't shoe

To Reproduce
Steps to reproduce the behavior:

1. Go to 'chat_view'
2. Click on 'textfield'
3. Scroll up to the last message
4. See error

Expected behavior
the last message should appear
Screenshots
If applicable, add screenshots to help explain your problem.
what happens:

what should happen:

Desktop (please complete the following information):

• OS: Windows
• Device: Emulator
• Flutter Version: 1.12.13+hotfix.8
• Dart Version: 2.7.0
• Version 1.0.16

Show the username in the message

Is your feature request related to a problem? Please describe.
It's confusing when there is more than one user without a photo

Describe the solution you'd like
Show the username in the message

Additional context
Something like discord does:

Username 27/08/2019
Message

dateFormat not working

The dateFormat attribute of the DashCat widget doesn't appear to affect the date headers

[feature] add actions to messages

Current I am implementing a chat that requires a button in some chat bubbles for example (open settings) all some other features.

I was thinking of having at the bottom of a message a button bar that renders action if they are present, I can create a PR soon, any suggestion on what should be implemented with it?

The method '[]' was called on null -> Tried calling: []("uid")

Describe the bug
Installed the latest version 1.1.0 released today, pasted the example but did not work.

To Reproduce
Steps to reproduce the behavior:

1. Copy the example code
2. Run
3. Error:
   The method '[]' was called on null.
   Receiver: null
   Tried calling:

Screenshots

Additional context
am i making a mistake or the new version really have an issue ? first time using this package

• Installed all dependencies
  -Tryed with register users on my firebase db.

i could not find the problem =.(

Thanks a lot for your help!

ChatUser toJson throws invalid Argument error for Color properties

Describe the bug
When saving a chat message into the Firebase database an invalid argument error is thrown: "Invalid argument: Instance of 'Color'". This is because the 'containerColor' and 'color' properties of the chat user class are stored directly into the map without conversion to String.

To Reproduce
Steps to reproduce the behavior:

1. Go to the example code of dash chat
2. Extend the ChatUser user with properties for color and containerColor
3. Try to submit a new chatMessage to firebase by invoking the chatMessage.toJson() method
4. See error "Invalid argument: Instance of 'Color'"

Expected behavior
Please refer to this StackOverflow link in order to see how Colors should normally be treated in a JSON format: https://stackoverflow.com/questions/58812802/how-to-store-and-retrieve-color-from-firestore-in-flutter.

Make the "Scroll to Bottom" button optional

Really love what you've done here. Would be very nice if one could make the scroll to bottom button optional. Thank you!

Support multiple images

Currently, ChatMessage only supports one image URL. Please add support for adding more than one image URL.

Add onShow(message) callback for each message shown on chat or a way to determine a Message was shown

Is your feature request related to a problem? Please describe.
I am currently struggling with how to display a Badge on the chat to indicate how many
unread messages are there. I am wondering if it is viable to add a hasShown property
in ChatMessage class? Does it make sense?
Or add a callback onShow(message) to DashChat so that we can track it ourselves?

Describe the solution you'd like
A way to track whether a ChatMessage has been shown.

Describe alternatives you've considered
With a callback onShow(message) to DashChat, we can track it outside of DashChat.

Additional context
Great plugin, really appreciate it.

On inverse and sending a message the list scrolls to the top

as described and shown in the discussion #35 im assuming the issue is from this line https://github.com/fayeed/dash_chat/blob/master/lib/src/chat_view.dart#L386 , will try to implement a fix soon

dash_chat producing an error when i tried to run the program

Thanks for the lovely plugin.

I downloaded the project and while trying to run the project on my computer, I received an error message and the project did not complete.

This is the error message

Displaying the current user messages on the right hand side

How can I display the message of the current user on the right-hand side of the screen? I see it on your demo but can't find a way to implement it.

Scroll to last index

The current implementation displays the first message then jumps to the last message. This breaks the user's focus and seems buggy but it's not. How can I prevent this and always show the latest messages. I've done this in a custom chat app but this plugin saves a lot of time.

check out the unwanted behavior here: https://1drv.ms/v/s!AqyIwuPueLgbq36o4gxQSomsZy3o?e=9HmIFr