fayeed / dash_chat Goto Github PK
View Code? Open in Web Editor NEWThe most complete Chat UI for flutter highly customizable and helps developing chat UI faster.
Home Page: https://pub.dev/packages/dash_chat
License: MIT License
The most complete Chat UI for flutter highly customizable and helps developing chat UI faster.
Home Page: https://pub.dev/packages/dash_chat
License: MIT License
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?
Really love what you've done here. Would be very nice if one could make the scroll to bottom button optional. Thank you!
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.
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),
// );
// }
),
),
),
);
}
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 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.
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:
Additional context
am i making a mistake or the new version really have an issue ? first time using this package
i could not find the problem =.(
Thanks a lot for your help!
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.
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.
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
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(),
);
`
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 ?
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,
);
}
}
Getting this error when trying to implement
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();
},
);
Desktop (please complete the following information):
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
Describe the bug
message quick replies not showing up.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
to show messages along with available quick replies
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.
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
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
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: () => {},
),
),
),
);
}
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)
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
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:
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.
Currently, ChatMessage
only supports one image URL. Please add support for adding more than one image URL.
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:
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):
thanks for the hard work❤
how to change 'textDirection' for the input box?
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
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.
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.
The dateFormat attribute of the DashCat widget doesn't appear to affect the date headers
Describe the bug
scrollToBottom setting works incorrectly if a widget takes part of the screen.
To Reproduce
Steps to reproduce the behavior:
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.
Desktop (please complete the following information):
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
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.
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.
Describe the bug
when have new message chatbox content not scroll to latest is freezing
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
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!
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
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?
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
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?
ChatMessage() does not have the onTap() event, it is important for a message like localization that needs to open the map.
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:
Expected behavior
To see the dash chat screen
Desktop (please complete the following information):
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.
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 is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
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.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.