jonasn5 / chat_ui_kit Goto Github PK
View Code? Open in Web Editor NEWA complete Flutter chat UI kit
License: MIT License
A complete Flutter chat UI kit
License: MIT License
Resolving dependencies...
Because example depends on chat_ui_kit from path which depends on intl ^0.18.0, intl ^0.18.0 is required.
So, because example depends on intl ^0.17.0, version solving failed.
You can try the following suggestion to make the pubspec resolve:
on https://github.com/themadmrj/chat_ui_kit/blob/master/lib/src/widgets/core/messages_list.dart#L29,
there is an assertion
assert(useCustomTile != null && builders.customTileBuilder != null,
"You have to provide a customTileBuilder if you set useCustomTile"),
I think this is wrong. If you need to set both, you could make them required anyway.
I guess it should be "if useCustomTile is not null, then builders.customTileBuilder must also be not null".
which would be
assert(useCustomTile == null || builders.customTileBuilder != null,
"You have to provide a customTileBuilder if you set useCustomTile")
Hello
Thanks for the lib, it's awesome.
Adding a message, following your example doesn't need a refresh (your plugin does it):
void onMessageSend(String text) {
_controller.insertAll(0, [
ChatMessage(
author: _currentUser,
text: text,
creationTimestamp: DateTime.now().millisecondsSinceEpoch)
]);
}
Using Firestore, i just need to push the message on my collection (awesome cause dont need to await firestore, the app is smooth).
Do you have some guidance for incoming message (So Firestore is updated by other member) ? how to update only the controller ?
im using Riverpod, and only way i have is to subscribe to a stream and update whole component on Firestore update.
Im looking for a way, to simpy to do _controller.insertAll(0, [ ]);
for incoming messages..
About custom message like XXX is typing , do you have some pointer to use them (With db) ?
Thank you,
Great plugin !
Nelson
Hi,
Item here is took from _items, and reinsert few lines after. Modified value pass as parameter is not used.
Can fix it on my futur PR: #5 (comment) if you want.
Hi, this lib seems very promising. I tried integrate this lib to my project. Here is my last question:
How to customize my input bar at ChatPage? To be more specificly, I just need customize the send button (default it's Flatbutton seems not fit well with my customers). And I want add a send voice button along side with it.
Is there anyway to make it? thanks in advance!
Hi, take your example code as example:
return ChatsList(
chatsListStyle: ChatsListStyle(physics: BouncingScrollPhysics()),
controller: _model.controller,
appUserId: _model.localUser.id,
scrollHandler: handleScrollEvent,
groupAvatarStyle: GroupAvatarStyle(
withSeparator: false,
separatorColor: Colors.white,
mode: GroupAvatarMode.aligned),
builders: ChatsListTileBuilders(
groupAvatarBuilder: (context, imageIndex, itemIndex, size, item) {
final chat = item as ChatWithMembers;
return Image.asset(chat.membersWithoutSelf[imageIndex].avatar,
width: size.width, height: size.height, fit: BoxFit.cover);
},
lastMessageBuilder: _buildLastMessage,
wrapper: _buildTileWrapper,
dateBuilder: (context, date) => Padding(
padding: EdgeInsets.only(left: 16),
child: Text(DateFormatter.getVerboseDateTimeRepresentation(
context, date)))),
areItemsTheSame: (ChatBase oldItem, ChatBase newItem) =>
oldItem.id == newItem.id);
the chats is controlled inside controller: _model.controller,
right? Then my question is, how to make it work with bloc stream?
I mean, typically using a StreamBuilder
and a stream from my bloc to feed data into this controller, is there way to make this happen?
Hi, in order to make users customable on list physics, I think its better add a params of physics.
Hello, i'm using your plugin since early this year. but i found an error, it happened in chat list and i think that because of implicitly_animated_list plugin. and error appeared if i have 39+ items in chat list.
This is the error from my console log :
E/flutter ( 5273): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Invalid argument(s): Illegal argument in isolate message: (object extends NativeWrapper - Library:'dart:io' Class: _RandomAccessFileOpsImpl@13069316) E/flutter ( 5273): #0 Isolate._spawnFunction (dart:isolate-patch/isolate_patch.dart:395:25) E/flutter ( 5273): #1 Isolate.spawn (dart:isolate-patch/isolate_patch.dart:375:7) E/flutter ( 5273): #2 compute package:flutter/…/foundation/_isolates_io.dart:22 E/flutter ( 5273): #3 MyersDiff.diff package:implicitly_animated_reorderable_list/…/diff/myers_diff.dart:47 E/flutter ( 5273): #4 MyersDiff.withCallback package:implicitly_animated_reorderable_list/…/diff/myers_diff.dart:24
and this is my UI with 39+ items in list, when i refresh the ui / set state, the error will appear.
Thanks before :)
this is normal ListView:
Hi, I am not here report a bug or problem of this package. On the opposite using this lib I managed to build a useful chat App.
But I found a slightly bias behavior might not notice by you. As you can see, when the List scroll to the bottom, ChatsList can not handle with the bottomBar, while ListView can handle, on the other words, ListView the last item will not blind by the navigationBar, this can be notice easily if your bottomBar blurred.
Is there a way to replace ChatsList with ListView while also preserve all other features? I really don't know why they behavior such bias
I upgraded your example to flutter 2.12 with command dart migrate
.
Run project and getting error:
type '(ScrollNotification) => Null' is not a subtype of type '((ScrollNotification) => bool)?' in type cast #27
The relevant error-causing widget was
ChatsList<ChatBase>
lib/…/chats/chats_screen.dart:201
When the exception was thrown, this was the stack
#0 _ChatsListState.build
package:chat_ui_kit/…/core/chats_list.dart:98
#1 StatefulElement.build
package:flutter/…/widgets/framework.dart:4612
#2 ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4495
#3 StatefulElement.performRebuild
package:flutter/…/widgets/framework.dart:4667
#4 Element.rebuild
package:flutter/…/widgets/framework.dart:4189
onNotification: (ScrollNotification scroll) {
if (widget.scrollHandler != null) widget.scrollHandler!.call(scroll);
return;
} as bool Function(ScrollNotification)? <-----,
It's too low and some basic package will conflict:
and just_audio >=0.3.0 <0.7.0-nullsafety.0 then image >=2.1.18 <3.0.0-nullsafety.0.
And because chat_ui_kit >=1.1.5 depends on just_audio ^0.6.13 and image >=2.1.14 <3.0.0-nullsafety.0 depends on xml ^4.2.0, if karyo from git and chat_ui_kit >=1.1.5 then xml ^4.2.0.
Some mordern pakcage already using latest package. But just_audio inside this repo doesn't update yet.
It still needs some lower basic lib which conficts with other mordern lib
My current job is keeping me pretty busy. I'm looking for an active maintainer.
Hi, what to do if I want add a status bar (a container with a text in center of it indicates connection of chat). How to do it for now?
I tried stack ChatList inside Column, the widget tree will broken.
Just a heads up, in pub.dev changelog the package looks inactive since year is 2020, when it should be 2021.
Hi
Your library is so great ! thank you so much to share it.
Use case:
For use case 2, im using existing API on controller https://github.com/themadmrj/chat_ui_kit/blob/3d03ae5de83906d01a4cd78bff2758be2397a0c2/lib/src/utils/controllers.dart#L100
The process is : Mark a message > Update the UI > When a message is send > Detect if a message is marked > Update database according to
It enable me, to update the UI (show the old message on top of the submit form).
When user is done, i unselect
select
is a great way to select multiple messages once, and make something on them.
But we need also, a markAsModify
, markAsReply
to make the controller more complete.
void mark(T item, String family) {
_markItems[family] = item;
notifyListeners();
_controller.sink.add(****);
}
Hi, to clarify my question, I'll post code in case being missunderstand.
Now I am using this way to add list to _mode.controller:
widget.chatBloc.chatWithMembers.listen((event) {
gLogger.i("chatWithMembers: $event");
// _model.controller.notifyChanges();
_model.controller.addAll(event);
});
This works on first init load which addAll list. But when I update the list order in stream, (only update order, not insert or add any items). the stream will update right? But there addAll will add all again. But I just need update. So that the list will add twice.
My question is, currently ChatListController only have a addAll function, how to update the order anyway? If it have .clear() then I can just clear and addAll, but currently not same as List in dart. What should users do in this siutation?
How to listen event scroll up load previous more messages?
Hi,
Thanks for open sourcing this kit. I was wondering if it supports loading images from a network. I couldn't get that to work. Is there some widget that could be extended or something? Thanks.
Here is my code:
gLogger.i("init controller items: ${_controller.items.length}");
_controller.items.clear();
_controller.notifyChanges();
_chatBloc.fetchLocalMsgsForSession(_chat.id);
subscription = _chatBloc.crtChatMsgs.listen((event) {
_controller.addAll(event);
_controller.notifyChanges();
gLogger.i("now controller items: ${_controller.items.length}");
});
this is inside my initState
function, so I want clear items every time enter a new chatPage. But it doesn't do this.
Normally, first log should be 0, and every time crtChatMsgs
only fetechs 25 msgs from local. So everytime it enters chatPage, it should be 25 msgs.
However, first time:
this is normal, then I switch to another chatid (another chat page):
As u can see, second time the msg doesn't clear at all. It becomes 50, double of them. Normally, it should be fresh 25 msgs.
And the UI actually doesn't updated still contains data from previous chatid.
What could be the reason?
(I am new to flutter maybe I did something wrong but this lib is really useful, so I use it)
in a channel , i scroll to middle list (maybe i search a history msg), but the new item message insert at 0 position, the history message list viewport will be rebuild .
this scene, how can i solve it ? thank you .
Hello there,
I found out chat_ui_kit error during compilation for device with android 33. This package flutter_video_info is the main culprit and seems not maintain by the developer anymore. Any plan to replace/remove it?
Thanks
Pass also the style property:
IncomingMessage(
// Bug Here
style: style,
item: item,
index: index,
messagePosition: messagePosition,
builders: builders.incomingMessageBuilders));
Only saw the incomding message have a backgrond color, where to change the ongoing (I send) message background color?
https://github.com/bnxm/implicitly_animated_reorderable_list/issues/77#issuecomment-853332816
After a long discussion with this lib author, it seems can set the padding value to ImplicitlyAnimatedList.
My proposal is can you consider expose this params out so that users can choose to set it or not? thanks.
How to listen event scroll up load previous more messages?
Hello, in my apps i'm using my own group avatar, so i want to put single group avatar instead of show all members avatar in group chat list. Can you tell me how to customize it?
Hello, how to reply to the message?
Getting the below error with latest flutter sdk 2.19.0.
Building with Flutter multidex support enabled.
../../../.pub-cache/hosted/pub.dev/implicitly_animated_reorderable_list-0.4.2/lib/src/implicitly_animated_reorderable_list.dart:8:1: Error: 'AnimatedItemBuilder' is imported from both 'package:flutter/src/widgets/animated_scroll_view.dart' and 'package:implicitly_animated_reorderable_list/src/implicitly_animated_list_base.dart'.
import 'src.dart';
^^^^^^^^^^^^^^^^^^^...
../../../.pub-cache/hosted/pub.dev/implicitly_animated_reorderable_list-0.4.2/lib/src/implicitly_animated_list.dart:4:1: Error: 'AnimatedItemBuilder' is imported from both 'package:flutter/src/widgets/animated_scroll_view.dart' and 'package:implicitly_animated_reorderable_list/src/implicitly_animated_list_base.dart'.
import 'src.dart';
^^^^^^^^^^^^^^^^^^^...
Target kernel_snapshot failed: Exception
add physics params for ChatList?
So that new comers can try it more easily
ChatList currently can not add padding just like Listview does, I want add padding at ChatScreen page.
After upgrade your plugin to 1.2.2 getting next error:
The following _TypeError was thrown building:
type '(MessageBase, MessageBase, MessageBase, (MessageBase) => bool) => MessagePosition' is not a subtype of type '((MessageBase?, MessageBase?, MessageBase?, (MessageBase?) => bool) => MessagePosition)?'
When the exception was thrown, this was the stack
#0 _MessagesListState._messagePosition
package:chat_ui_kit/…/core/messages_list.dart:138
#1 _MessagesListState._buildItem
package:chat_ui_kit/…/core/messages_list.dart:168
#2 _SliverImplicitlyAnimatedListState.build.<anonymous closure>
package:implicitly_animated_reorderable_list/src/implicitly_animated_list.dart:241
#3 SliverAnimatedListState._itemBuilder
package:flutter/…/widgets/animated_list.dart:1046
#4 SliverChildBuilderDelegate.build
package:flutter/…/widgets/sliver.dart:455
There is no mention of stylizing the input provided with the library, even digging through the code it is apparent that this is not yet implemented link.
Thank you
Example is not the same as the screenshots, right? Is there a way to record audio/video or upload files?
Unfortunately I am not able to run the app. I followed the guidelines from pubdev but getting this conflict error when I run the app.
Failed to build iOS app
Error (Xcode):
../../../.pub-cache/hosted/pub.dev/implicitly_animated_reorderable_list-0.4.2/lib/src/implicitly_animated_reorderable_list.dart:8:1: Error:
'AnimatedItemBuilder' is imported from both 'package:flutter/src/widgets/animated_scroll_view.dart' and
'package:implicitly_animated_reorderable_list/src/implicitly_animated_list_base.dart'.
Hi,
Im migrating my ui to your plugin 👌
One missing feature is ghost mode, having a chat in ghost mode delete all his messages after being seen..
Thx
Hi,
From your example, each ChatWithMembers
must have a lastMessage
not null.
But, when creating a new instance of ChatWithMembers
, lastMessage
is necessarily null.
Error is thrown here : https://github.com/themadmrj/chat_ui_kit/blob/3d03ae5de83906d01a4cd78bff2758be2397a0c2/lib/src/widgets/core/chats_list_tile.dart#L162
How handle a chat without messages ?
Nelson,
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.