The most complete Chat UI for flutter. Easy to use, highly customizable and fully featured
Home Page: https://pub.dev/packages/dash_chat_2
License: MIT License
![allcontributors[bot] avatar](https://avatars.githubusercontent.com/in/23186?v=4 "allcontributors[bot]")
Describe the bug
When a message contains an uri, i get a ERR_UNKNOWN_URL_SCHEME
To Reproduce
Send a message containing a link and open it up!
Expected behavior
Open a dynamic link and redirect to another screen
Screenshots
Environment
Is your feature request related to a problem? Please describe.
I am trying to add a custom audio media widget using media builder. Just for adding one component, I have to create new image and video components.
Describe the solution you'd like
Expose default media widgets.
A feature
I will make a PR if needed
Can we have other status like
none
read
pending
sent
received
failed
Having well defined Message status can reduce logics when implementing status in your code.
thanks
any screenshots? image or gif
Hello, I am having issues copying the text from messages to the clipboard. What is the best practice for this?
I have tried wrapping my DashChat inside a SelectableArea() and also using Clipboard.setData() with no luck. Any advice would be appreciated!
Voice audio is used quite often in chat, since it's faster and easier to input than typing letters.
In pub.dev it shows it supports only Android and Ios. So what about the web support?
After integrating dash chat 2 and firebase I am facing this error message on my terminal
when do flutter run. Which was not available previously.
I noticed that cached_network_image-3.2.0 is only from dash_chat_2
../../sdk/flutter/.pub-cache/hosted/pub.dartlang.org/cached_network_image-3.2.0/
lib/src/image_provider/multi_image_stream_completer.dart:152:22: Warning:
Operand of null-aware operation '?.' has type 'SchedulerBinding' which excludes
null.
can you provide any assistance to resolve this
Environment
As written in the title. In DashChat v1, this was not the case. Is there any way to disable this? When people read older messages, this is disruptive.
Continue #27
Seems to me, that after adding a key, and you have more than 2 videos in a row, it always rebuilds videos when scrolling;
Can it be somehow fixed? I was trying to solve this by adding AutomaticKeepAliveClientMixin but got zero results;
And if I remove the unique key, I get previous bug with the old video thumbnail.
Attaching recording where I added 1 more video to the example data.
Hi, thank you for great package. But I have a problem
I have this code. But in ui sent and received messages are in same alignmet. They have different id, different image. But it's not looking like as I sent message
Why my messages are not going to right?
On the image above, "N O T" is me
Is your feature request related to a problem? Please describe.
When showCurrentUserAvatar is false in MessageOptions you have no way to control the padding that gets added (10). Our way around was to return a SizedBox.shrink() in the avatarBuilder. However, it looks like if showCurrentUserAvatar is set to true it will add a phantom avatar with the same user.id (not the other person id in the convo). This means that in our avatarBuilder we are not able to hide this avatar which exists in the stack but it set to a opacity of 0.
Describe the solution you'd like
A way to control the padding or not add a phantom avatar. Example 3 gets us close to being able to do what we want. But there is a nagging overflow issue because the phantom avatar exists in the stack.
Example 1 - in avatar builder returning SizedBox.shrink() for current user + showCurrentUserAvatar: false
https://user-images.githubusercontent.com/825344/236341244-c0d4eb57-1f4a-45c4-a1ed-0c7ce86cb02b.png
Example 2 - in avatar builder returning avatar for both + showCurrentUserAvatar: true
https://user-images.githubusercontent.com/825344/236341213-cc8870a1-ad4a-4638-a769-aaf3aad89e12.png
Example 3 - in avatar builder returning SizedBox.shrink() for current user + showCurrentUserAvatar: true
https://user-images.githubusercontent.com/825344/236341684-4b86eea8-d234-499f-843e-2f3c52d777b5.png
The DashChat widget doesn't reflect changes to observable values in a GetXController. In my instance, I'm using a settings controller to set MessageOptions.currentUserContainerColor and MessageOptions.currentUserTextColor. When I toggle between light and dark mode, other elements wrapped by an Obx(() => on the same page respond to this value change, but the DashChat doesn't.
body: Obx(
() => DashChat(
messageOptions: MessageOptions(
showCurrentUserAvatar: true,
currentUserContainerColor:
_settingsController.currentListTheme.value.offsetColor,
currentUserTextColor:
_settingsController.currentListTheme.value.textColor),
currentUser: user,
onSend: (ChatMessage m) {
setState(() {
messages.insert(0, m);
});
},
messages: messages,
),
),
Steps to reproduce the behavior:
Expected behavior
It is expected that DashChat will respond to observable value changes.
Environment
Additional context
Great product, just need this.
Because dash_chat_2 0.0.15 depends on intl ^0.17.0 and no versions of dash_chat_2 match >0.0.15 <0.1.0, dash_chat_2 ^0.0.15 requires intl ^0.17.0.
So, because papplic depends on both intl ^0.18.0 and dash_chat_2 ^0.0.15, version solving failed.
If i double mention a user for example:
Hello @Niki @Niki, you should check #channel
It will cause Bad state no element on default_message_text line 70
Can we reconsider the name Dash-chat-2?
Like chat-ui dash-chat-ui dash-ui im-ui or something better?
Dash-Chat-2 这个名称能否再斟酌一下呢？
比如： chat-ui dash-chat-ui dash-ui im-ui 或者其他的更好的名称？
Hello, I wanted to reach out to see if I could maybe get some help on an issue regarding changing the style of the text in the messages dash chat2 generates. In our project we are using dash chat2 to help connect senior citizens with other users of the app; to make it more accessible we wanted to be able to increase the font size for all text fields on the chat widget. I'm having trouble figuring out how to implement those properties. Would you maybe be willing to provide a quick example or some pointers on how to do so?
Can you allow us to pass in our own custom textStyle to ParseText in DefaultMessageText?
Describe the bug
There is a rogue padding at the bottom of the ListViewBuilder. It looks to be added from the SilverPadding.
See: https://api.flutter.dev/flutter/widgets/ListView-class.html
"By default, ListView will automatically pad the list's scrollable extremities to avoid partial obstructions indicated by MediaQuery's padding. To avoid this behavior, override with a zero padding property."
This also leads to un wanted jumping when coming in and out of the input as there is no padding added when focused in the input.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
No extra padding to be on the bottom of the list.
Screenshots
Broken:
Environment
Additional context
I opened a PR to fix this: #38
Error: The getter 'View' isn't defined for the class 'InputToolbarState'.
When there are few chat messages in the screen, the list is not scrollable
I want to have the ability to make the chat list always scrollable.
I saw that there was a closed PR from DashChat v1.
https://github.com/fayeed/dash_chat/pull/138/files
Can we apply a similar PR to v2 please?
markdown
Currently there is only date separators in the message_list_options, though there are other separators like banner for {count} Unread Messages. For implementing this, there's nothing exposed in the options class.
There's support for custom message onclick callback functions. It would be great to add a onTapDown to the gesture detector as well, so that the offset for the user touch can be captured and used. This can be considered another feature request.
Finally, the message + timestamp in the message_container can be implemented with a stack instead of a column.
These changes are present in the following PRs
3.10 - #59
3.7 - #58
Do you continue to develop the package? To assist, I can open a pull request (for message status).
I think it'll be nice to have the ability to pass in a custom loading widget that'll be displayed when more messages are loading.
I mean the stable version.
Hi, i searched all through the documentation.
Can someone help me with inverting the chats? eg
having the last message down and not up ( earlier messages up ) - like whatsapp
thanks
Describe the bug
When not using an AppBar in the Scaffold the message list view clips at the bottom. Please see video.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
List should reach the top of the input body.
Screenshots
I wrapped the components in a containers and colored them to show the excess space the input box is taking up.
Environment
Additional context
Let me know if you need any more information this is a pretty easy one to replicate.
Describe the bug
Thanks for the great lib! I'm trying to use the sendOnEnter functionality, but it seems to have no effect. No matter what I do, the enter key always starts a new line. Looking through the code, I don't see this used at all except in the onSubmitted callback, and I can't seem to figure out where/if it's ever called.
To Reproduce
Steps to reproduce the behavior:
sendOnEnter option to InputOptions.Expected behavior
I expect the text to be sent when hitting the "return" key (and ideally this would be set to "enter" or "send" instead in this mode).
Screenshots
If applicable, add screenshots to help explain your problem.
Environment
Additional context
Add any other context about the problem here.
Dear developers,
Thank you very much for your development. I have a question, is it possible in this new version to add an action keyboard below the input field, as it was possible in the previous version with the option inputFooterBuilder? Now I try with chatFooterBuilder, but the options are over the input field is required that this options appears below the input field.
Thank you for your answer.
@LegendAF @fufesou @chuusungmin @SebastienBtr @kaedeee
I don't want to reverse my listview by default, so i need a flag into "DashChat" class like this:
`DashChat(
isReversed: false, ///my requested flag
currentUser: loggedUser,
onSend: (ChatMessage m) {
setState(() {
_messages.insert(0, m);
});
}`
Describe the bug
One or more plugins requires compileSdkVersion 31
Warning: The plugin path_provider_android requires Android SDK version 31.
For more information about build configuration, see https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration.
One or more plugins require a higher Android SDK version.
Fix this issue by adding the following to /Users/ivan.semkin/Downloads/Dash-Chat-2-main/example/android/app/build.gradle:
android {
compileSdkVersion 31
...
}
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Android example builds and launches
Environment
../lib/src/widgets/input_toolbar/input_toolbar.dart(49,32): error GD65BB2B6: The getter 'View' isn't defined for the class 'InputToolbarState'.
Please, make custom properties nullable in ChatUser.fromJson factory
(customProperties = json['customProperties'] as Map<String, dynamic>?)
Hello,
This may not be the right place to post, but I don't know where else to ask.
I recently completed a migration from Dash Chat 1 -> Dash Chat 2, and this is what's happening with the chat.
The keyboard is hiding the chat input, but with dash chat 1 the chat widget would resize.
This code was previously generated by a tool "FlutterFlow", and I've been tasked with upgrading it to Dart 3 / full null safety. I think DashChat not resizing has something to do with this crazy widget tree?
The getter 'View' isn't defined for the class 'InputToolbarState'.
As you can see in the attached video, when i'm sending 2 videos one after another it behave's strangely, it doesn't happen with photos and regular text
When I set the extendBodyBehindAppBar parameter to true all the messages in the message list are moved up. They should not shift up and should stay in place the same way they are when extendBodyBehindAppBar is false.
The entire bug with screen shots and code samples are posted on stackoverflow.
I was checking out the example app provider by the team and when I try mentions feature there is unexpected behaviour from the overlay, it doesn't get closed properly ans stays through every screen.
It works fine when :
Fails when:
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Overlay should get dismissed when keyboard is dismissed and when no user is selected from the list typing is going on.
Screenshots
simulator screens
This happened a lot while testing (sometimes it happens and sometimes not)
Environment
Additional context
Suggestion - on mention callback should be called when trigger character is typed, so that we can show all user list.
After Flutter update to 3.10.0 (with Dart 3.0) I can't use dash_chat_2 with flutter_localizations or easy_localisations packages..
Because dash_chat_2 >=0.0.16 depends on intl ^0.18.1 and dash_chat_2 <0.0.16 depends on intl ^0.17.0, every version of dash_chat_2 requires intl ^0.17.0 or ^0.18.1.
And because every version of flutter_localizations from sdk depends on intl 0.18.0, flutter_localizations from sdk is incompatible with dash_chat_2.
So, because eschool_mobile depends on both flutter_localizations from sdk and dash_chat_2 ^0.0.15, version solving failed.
The strange thing is that in pubspec.yaml of dash_chat_2 the "intl: ^0.18.0" is written... Seems like one of the internal dash_chat_2 packages sets additional dependency to intl ^0.18.1
i have a
List<Map<String, dynamic>> userList = [{"fullname": "demo", "id": "1"},{"fullname":"demo", "id": "2"}]
when i mention the first demo user it will take the demo user with id = 1 and mention the demo user it will take the demo user with id= 2
i have tried so many ways to format the String when use onMentionClick function but still fail
When creating long input text, it scrolls horizontally, instead of expanding vertically till the number of lines is reached. As I can see in the code the TextField of the input doesn't have any expanded property or min/maxLines property assigned and that might be the problem (it is probably handled in some other way...).
Part of the code:
DashChat(
currentUser: _currentUser,
inputOptions: InputOptions(
inputMaxLines: 5,
sendOnEnter: true,
onSend: (ChatMessage m) {
getChatReponse(m);
},
messages: _messages,
),Hello,
I am currently using the Dash Chat 2 package for Flutter in my project and I am facing some difficulties implementing pagination with a scroll listener for chat.
Here's what I am trying to achieve:
Could you please provide some guidance on how I can successfully implement this feature? Any help would be greatly appreciated.
Thank you in advance for your time and assistance.
Best regards,
Mujahedul Islam.
I am guessing this package is related to https://pub.dev/packages/dash_chat, but i do not know what is the difference between the two. Is this an enhancement of the original package or a completely new package with a lot of the same features?
If this package is suppose to be Dashchat´s v2 update, can you please update the documentation on the dash_chat package to reflect this, with a link to the new package? Also a small text with the reason of the new package name would be nice.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.