jonasn5 / chat_ui_kit Goto Github PK

Hi, in order to make users customable on list physics, I think its better add a params of physics.

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 .

Hi
Your library is so great ! thank you so much to share it.

Use case:

1. User want to reply to a message
2. User want to modify his own message

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

selectis 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(****);
  } 

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'.

How to listen event scroll up load previous more messages?

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

Only saw the incomding message have a backgrond color, where to change the ongoing (I send) message background color?

ChatList currently can not add padding just like Listview does, I want add padding at ChatScreen page.

Example is not the same as the screenshots, right? Is there a way to record audio/video or upload files?

Just a heads up, in pub.dev changelog the package looks inactive since year is 2020, when it should be 2021.

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!

So that new comers can try it more easily

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)? <-----,

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.

add physics params for ChatList?

Hello, how to reply to the message?

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 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

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?

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:

• Try upgrading your constraint on intl: flutter pub add dev:intl:^0.18.1
  exit code 1

Hi,

https://github.com/themadmrj/chat_ui_kit/blob/3d03ae5de83906d01a4cd78bff2758be2397a0c2/lib/src/utils/controllers.dart#L182

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.

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?

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.

There should be an attribute like scrollController. I need to scroll to specific Message but there's no way to do.

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)

How to listen event scroll up load previous more messages?

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.

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,

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?

My current job is keeping me pretty busy. I'm looking for an active maintainer.

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

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

Is this intended or miss aligned?

If it is intended, how do I make them all aligned?

In https://github.com/themadmrj/chat_ui_kit/blob/e99d4ed5ca490b5dbc978fecff6009ff04209700/lib/src/widgets/core/messages_list_tile.dart#L124

Pass also the style property:

IncomingMessage(
                // Bug Here
                style: style,
                item: item,
                index: index,
                messagePosition: messagePosition,
                builders: builders.incomingMessageBuilders));

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

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

this is normal ListView:

this is ChatsList

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

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 :)

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