flyerhq/flutter_chat_ui

Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.

flutter_chat_ui's Issues

onEndReached function fired too many times

Hi, when I pull down the chat page to load more message, the onEndReached function is called more than once, shouldn't it only be called one time per pull? or maybe I didn't implement it correctly? It seems that the longer I pull, the function gets called more times.

Future<void> _loadMoreMessage() async {
  print('test');
}

Chat(
  onEndReachedThreshold: 1,
  onEndReached: _loadMoreMessage,
)

Anyway this library is really good, thanks for the work!

Changing time Formats

Please is it possible to change the time formate on the header from 24 to 12 hour clock?

How can I make send button always visible?

1. How can I make send button always visible?
2. How to give background color and border radius for input text field like below? (Text field decoration)
   

Data streams

Hello 👋

Thanks for the awesome library! 🚀
Your work is greatly appreciated.

Is there a way to listen to live data changes, eg: a firestore snapshot stream for when new message documents are added?
If so may you point me in the write direction?

Thank you

Admin features: swear word filter, review chat history, report user, block user, flood limit

űAny plans for admin ui and features:
swear word filter

• report user : send an email with chat history and user ids perhaps? Or save a report in firestore, with a chat history so an admin can review?
• review chat history: in relation to above
• block user: Probably this can be handled outside of this app
• flood limit: limit how many messages a user can send in a time?

Possible bug report: ScrollController not attached while dismissing chat screen.

What bug do you experience? 🐞

I have an issue when I dismiss the chat screen with some messages or when I send a new one (ex. returning back to the chat list screen), flutter throws an error saying that:

"E/flutter (25401): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 152 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views."

How can it be reproduced? 🤔

Step 1: I first make the related chat API calls then set the messages before the app run.
Step 2: After that when I navigate to the related chat screen, I get the messages from bloc and set them to the messages array in the class with some computations.
Step 3: Send a message. (I don't insert the new message into the array, I just set the listener result to the messages array with the same computations in step 2.)
Step 4: Dismiss the chat screen. Then in the console of vscode this error appears.
Step 5: After that without sending a new message, every time when I open and then dismiss the chat screen this message comes again.

What behavior is expected? 💡

This error message shouldn't exist.

Screenshots or videos 📸

Chat list screen: https://i.imgur.com/ZdY0VBU.jpeg
Chat screen: https://i.imgur.com/0KQkI47.jpeg

Code snippets 📝

The error message and the source code of the error:

E/flutter (25401): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 152 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views. E/flutter (25401): #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39) E/flutter (25401): #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5) E/flutter (25401): #2 ScrollController.animateTo (package:flutter/src/widgets/scroll_controller.dart:152:12) E/flutter (25401): #3 _ChatListState._scrollToBottomIfNeeded.<anonymous closure> (package:flutter_chat_ui/src/widgets/chat_list.dart:137:31) E/flutter (25401): #4 new Future.delayed.<anonymous closure> (dart:async/future.dart:315:39) E/flutter (25401): #5 _rootRun (dart:async/zone.dart:1346:47) E/flutter (25401): #6 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter (25401): #7 _CustomZone.runGuarded (dart:async/zone.dart:1162:7) E/flutter (25401): #8 _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1202:23) E/flutter (25401): #9 _rootRun (dart:async/zone.dart:1354:13) E/flutter (25401): #10 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter (25401): #11 _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:1186:23) E/flutter (25401): #12 Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:18:15) E/flutter (25401): #13 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:395:19) E/flutter (25401): #14 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:426:5) E/flutter (25401): #15 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12) E/flutter (25401): E/flutter (25401): [ERROR:flutter/lib/ui/ui_dart_state.cc(199)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 152 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views. E/flutter (25401): #0 _AssertionError._doThrowNew (dart:core-patch/errors_patch.dart:46:39) E/flutter (25401): #1 _AssertionError._throwNew (dart:core-patch/errors_patch.dart:36:5) E/flutter (25401): #2 ScrollController.animateTo (package:flutter/src/widgets/scroll_controller.dart:152:12) E/flutter (25401): #3 _ChatListState._scrollToBottomIfNeeded.<anonymous closure> (package:flutter_chat_ui/src/widgets/chat_list.dart:137:31) E/flutter (25401): #4 new Future.delayed.<anonymous closure> (dart:async/future.dart:315:39) E/flutter (25401): #5 _rootRun (dart:async/zone.dart:1346:47) E/flutter (25401): #6 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter (25401): #7 _CustomZone.runGuarded (dart:async/zone.dart:1162:7) E/flutter (25401): #8 _CustomZone.bindCallbackGuarded.<anonymous closure> (dart:async/zone.dart:1202:23) E/flutter (25401): #9 _rootRun (dart:async/zone.dart:1354:13) E/flutter (25401): #10 _CustomZone.run (dart:async/zone.dart:1258:19) E/flutter (25401): #11 _CustomZone.bindCallback.<anonymous closure> (dart:async/zone.dart:1186:23) E/flutter (25401): #12 Timer._createTimer.<anonymous closure> (dart:async-patch/timer_patch.dart:18:15) E/flutter (25401): #13 _Timer._runTimers (dart:isolate-patch/timer_impl.dart:395:19) E/flutter (25401): #14 _Timer._handleMessage (dart:isolate-patch/timer_impl.dart:426:5) E/flutter (25401): #15 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:184:12)

        // Run only for sent message
        if (message.author.id == InheritedUser.of(context).user.id) {
          // Delay to give some time for Flutter to calculate new
          // size after new message was added
          Future.delayed(const Duration(milliseconds: 100), () {
            _scrollController.animateTo(
              0,
              duration: const Duration(milliseconds: 200),
              curve: Curves.easeInQuad,
            );
          });
        }

My logic of the chat screen:

  List<types.Message> _messages = [];
  late types.User _user;

  @override
  Widget build(BuildContext context) {
    return BlocListener<ProfileBloc, ProfileState>(
      listenWhen: (p, c) => p.conversations != c.conversations,
      listener: (context, state) {
        _loadMessages(state.conversations
            .firstWhere((element) =>
                element.conversationId == widget.conversation.conversationId)
            .messages);
      },
      child: Scaffold(
        appBar: PreferredSize(
            preferredSize: AppBar().preferredSize,
            child: ChatAppBarWidget(match: widget.match)),
        body: Chat(
          theme: DefaultChatTheme(
            backgroundColor: Theme.of(context).colorScheme.primary,
            primaryColor: Theme.of(context).accentColor,
          ),
          showUserAvatars: true,
          messages: _messages,
          onAttachmentPressed: _handleAtachmentPressed,
          onMessageTap: _handleMessageTap,
          onPreviewDataFetched: _handlePreviewDataFetched,
          onSendPressed: _handleSendPressed,
          user: _user,
        ),
      ),
    );
  }
  
  Future<void> _loadMessages(List<MessageModel> messages) async {
    final List<types.Message> msgs = [];

    for (final msg in messages) {
      User user;
      if (msg.author == widget.match.partnerId) {
        user = User(
          id: widget.match.user!.userId,
          firstName: widget.match.user!.fullName,
          imageUrl: widget.match.user!.photos[0],
        );
      } else {
        user = User(
            id: _profileBloc.state.user.userId,
            firstName: _profileBloc.state.user.fullName,
            imageUrl: _profileBloc.state.user.photos[0]);
      }

      final message = types.TextMessage(
          author: user,
          id: msg.messageId,
          createdAt: DateTime.parse(msg.creationDate).millisecondsSinceEpoch,
          text: msg.text);

      msgs.add(message);
    }

    msgs.sort((a, b) => b.createdAt!.compareTo(a.createdAt!));

    setState(() {
      _messages = msgs;
    });
  }

Environment info

Flutter with null safety: 2.2.3
Sdk: ">=2.12.2 <3.0.0"
flutter_chat_ui: ^1.1.7

Platform

Real device Xiaomi Mi 9T Pro with Stock AOSP ROM (Android 11-R)

Additional context

When I research the issue on StackOverflow I found that:

"Delaying it is not the right solution. Better to use this"
if(pageController.hasClients){
....
}

always being the sender

why is it that despite i used a few different id's i still gets messages displayed as I send them all.

here is what it looks like:

and here is my code, as you can see a gave a different id in every possible place i could!

List<types.Message> messages = state.allMessages.map((msg) {
                    if (msg is ImageMessage) {
                      return types.ImageMessage(
                        size: 100,
                        imageName: 'imageName',
                        uri: msg.imageUrl,
                        authorId: '299',
                        id: '1000',
                        timestamp: msg.timeStamp,
                        // status: types.Status.error,
                      );
                    } else if (msg is TextMessage) {
                      return types.TextMessage(
                        text: msg.text,
                        id: '29',
                        authorId: '444',
                        timestamp: msg.timeStamp,
                      );
                    } else {
                      return types.TextMessage(
                        text: 'msg.text',
                        id: '22',
                        authorId: '44',
                      );
                    }
                  }).toList();

                  return chatUi.Chat(
                    messages: messages,
                    onSendPressed: (msg) => _handleSendPressed(msg, chatBloc),
                    user: types.User(
                      id: '55',
                      firstName: 'hewa',
                    ),
                    onAttachmentPressed: () {
                      chatBloc.add(
                        ChatEvent.sendImageMessage(
                          message: 'message',
                          fromUserId: '25',
                          imageUrl: 'imageUrl',
                          imageUploaderCubit: imageUploaderCubit,
                        ),
                      );
                    },
                    theme: chatUi.DarkChatTheme(),
                  );

P.S: i am aware there is a packages available to deal with firestore but i build my schema for messages differently so i just want this UI.

Msg Author details proplem

first of all, your work is fantastic.
but you make only author id as required and when we add the remain User data like Avatar Url, first name and last name nothing changed.
how we can preview msg sender details beside msg?
thank you very much

Feature Request: UI: Change "default" font family

Is your feature request related to a problem?

Yes, I want a simple way to change the default font family "Avenir". Currently this task involves the extension of a lot of text styles, even using DefaultChatTheme.

What solution would you suggest?

The ideal solution could be make dynamic DefaultChatTheme, allowing a new parameter called defaultFontFamily (original, isn't it?). Maybe we could configure some sort of a defaultTextStyle that is used later by the specific styles using defaultTextStyle.copyWith().

Is there any additional solution to that?

I've been trying to do my own implementation in a fork but I cannot see any "one-shot" solution. Maybe a full rewrite of chat_theme.dart will be required.

Extras

Screenshots or videos 📸
N/A

Code snippets 📝

Actual code needed for change all fonts:

DefaultFontFamily def = DefaultFontFamily();

String customFontFamily = 'Arial';

DefaultFontFamily(
...
dateDividerTextStyle: def.dateDividerTextStyle.copyWith(fontFamily:customFontFamily),
emptyChatPlaceholderTextStyle: def.emptyChatPlaceholderTextStyle.copyWith(fontFamily:customFontFamily),
inputTextStyle: def.inputTextStyle.copyWith(fontFamily:customFontFamily),
receivedMessageBodyTextStyle: def.receivedMessageBodyTextStyle.copyWith(fontFamily:customFontFamily),
receivedMessageCaptionTextStyle: def.receivedMessageCaptionTextStyle.copyWith(fontFamily:customFontFamily),
receivedMessageLinkDescriptionTextStyle: def.receivedMessageLinkDescriptionTextStyle.copyWith(fontFamily:customFontFamily),
receivedMessageLinkTitleTextStyle: def.receivedMessageLinkTitleTextStyle.copyWith(fontFamily:customFontFamily),
sentMessageBodyTextStyle: def.sentMessageBodyTextStyle.copyWith(fontFamily:customFontFamily),
sentMessageCaptionTextStyle: def.sentMessageCaptionTextStyle.copyWith(fontFamily:customFontFamily),
sentMessageLinkDescriptionTextStyle: def.sentMessageLinkDescriptionTextStyle.copyWith(fontFamily:customFontFamily),
sentMessageLinkTitleTextStyle: def.sentMessageLinkTitleTextStyle.copyWith(fontFamily:customFontFamily),
userAvatarTextStyle: def.userAvatarTextStyle.copyWith(fontFamily:customFontFamily),
userNameTextStyle: def.userNameTextStyle.copyWith(fontFamily:customFontFamily),
...
);

Related issues/PRs

N/A

🚧 Fix documentation website

Hello everyone,

We are experiencing problems with documentation website and our DevOps engineer is on leave now, expected website return is mid September, meanwhile you can use this cached version https://flyer-flutter-docs.pages.dev/chat-ui/

Sorry for the inconvenience.

More complex example for people wanna using this as a product base?

Hi, it looks this repo provides a enhancement components for Chat app. It looks beautifull then anyother pakcages I can found in flutter for Chat.

Does there any more complicated example showing how to use it? More specific it should include Session pages (page that includes all history sessions) and the detailed chat page.

Add channel/system messages support

Hello,
I was wondering if there is a way to add channel messages that notify users about changes/updates in the room using this package.
Thank you

feature: user avatar

Hey guys. Just discovered your package and appreciate how professional all your material looks.
Is it possible for us to show a user avatar next to the chat bubble, or how do you tell people apart in group chats? Also, do you have any interest in “reaction” so that people can “like” a comment?

Old issue still can happen: BoxConstraints has a negative minimum width

#54

You can still send spaces from the web by pressing 'Enter' on an empty box. I found the old ticket when I discovered this same error in my logs.

Also, unrelated, can't figure out steps or anyway to consistently do it, but pressing Enter on web sometimes will create a new line instead of send.

Feature Request - Allow customization of chat bubble per message

I think I read somewhere that more customization is planned, but just wanted to give my use case in case it requires something special. Basically I'm looking to change the background color of the chat bubbles based on specific flags... For example I want to make the admin bubbles to have a different color than the rest of the bubbles. I assume I would add this flag when creating the types.Message, probably on the Metadata Map? And then there should be some kind of decorator method where we would get the types.Message info so we can modify the decorator...

Hopefully I made sense and you see value in this idea

Feature Request - Message Actions on Long Press

Would be nice to get extra actions when long pressing a button. Most importantly to be able to reply to other messages, but other options are valid as well. The system could even be made extensible to allow devs to add their own actions

Example:

Upcoming release update [v1.1]

For over a month the new features development was blocked by the animated version of chat UI where we faced particular bottlenecks while working with list animations in Flutter. As a result - lack of updates from our side. That's why we are merging issues #7, #9 and #20 into one for a more convenient progress tracking.

v1.1 will have 👉

• Animated chat UI
• Updated date dividers
• Updated message statuses
• Ability to display user name & avatar
• Pagination

💬 From now on all new updates will be shared by @demchenkoalex here.

import 'package:flutter_chat_ui/flutter_chat_ui.dart'; error

/C:/flutter/.pub-cache/hosted/pub.dartlang.org/photo_view-0.11.1/lib/src/core/photo_view_gesture_detector.dart:106:29: Error: The argument type 'PointerEvent' can't be assigned to the parameter type 'PointerDownEvent'.

• 'PointerEvent' is from 'package:flutter/src/gestures/events.dart' ('/C:/flutter/packages/flutter/lib/src/gestures/events.dart').
• 'PointerDownEvent' is from 'package:flutter/src/gestures/events.dart' ('/C:/flutter/packages/flutter/lib/src/gestures/events.dart').
  super.addAllowedPointer(event);
  ^
  Failed to compile application.

Great chat library!

Alex, just wanted to say that this is really well done. I started playing around with it yesterday (sorry for the request spam). The calculations of the size and animations make it really smooth! Also, it was extremely easy to setup and play around with. Great contribution to the flutter platform!

Feature Request - 'Like' a comment (Reactions)

We talked about this previously, but didn't see a feature request for it. This is one of the most requested chat features I get. People have become reliant on using 'Like' on iMessage, Slack or twitter/Facebook/social media as a way to acknowledge someones point without having to actually write up a response.

Add GitHub link to pub.dev

Description

Is there a reason why the GitHub Link is not available on the pub.dev sidebar? If I search for a package, many times I want to view the package or clone it to try out the example.

Sidebar of flutter_chat_ui	Sidebar of another package

Feature Request - Send message on Enter key

When using the Chat on a desktop or web environment, it is expected for the message to be sent when hitting the Enter key. Currently it only works by tapping on the send button.

Asset folder is moved inside lib folder

Unable to load asset: packages/flutter_chat_ui/assets/3.0x/icon-read.png

pubspec.yaml is not updated

Crash on deserializing previewData

error: type 'int' is not a subtype of type 'double' in type cast
which would cause the deserialization to fail and not show the message

After debugging this for a while I located the cause.

on preview_data.dart
: height = json['height'] as double,
url = json['url'] as String,
width = json['width'] as double;

I believe this should be:
height = json['height'].toDouble(),
url = json['url'] as String,
width = json['width'].toDouble();

Which would fix the issue.

Here was the link that was sent
https://www.azcardinals.com/news/colt-mccoy-makes-cameo-at-kyler-murray-birthday-celebration

leads to previewData with a height: 720, width: 1280

Scroll jumps around when looking at old messages and new ones come in

General

What bug do you experience? 🐞

It's not exactly a bug but a UX glitch. When you are in an active chat and scroll up to see older messages, when new messages come in you get some very noticeable jumps in the scroll which can make you lose track of what you were looking at. This could be paired with a recommendation of adding a "scroll to bottom" button (specially when you've gone up quite a bit)

How can it be reproduced? 🤔

A few steps to define where does the bug occur.

1. Follow documentation to run example project.
2. Start sending messages into the app and scroll up (while messages are still coming in)

What behavior is expected? 💡

Smooth scroolling while going up, or holding still while reading an old message.

Extras

Environment info

Please specify the flutter, flutter-chat-ui versions.

flutter: 2.3.0-17.0.pre.130
flutter-chat-ui: 1.0.7

flutter doctor -v output 👇

[✓] Flutter (Channel master, 2.3.0-17.0.pre.130, on macOS 11.3 20E232 darwin-x64, locale en-US)
    • Flutter version 2.3.0-17.0.pre.130 at /Users/jan/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision b95c9915be (26 hours ago), 2021-06-01 16:29:03 -0400
    • Engine revision 84e4b4b5eb
    • Dart version 2.14.0 (build 2.14.0-166.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5, Build version 12E262
    • CocoaPods version 1.10.0

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

[✓] VS Code (version 1.56.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.23.0

[✓] Connected device (4 available)
    • iPhone de Jan Lubeck (mobile) • d167f1a8b5eed7cd0312f630a2da37135e6788f3 • ios            • iOS 14.5.1
    • iPad Pro (9.7-inch) (mobile)  • 25E7C8D3-09DE-4A13-84FB-51CEAEBA93C4     • ios            •
      com.apple.CoreSimulator.SimRuntime.iOS-14-5 (simulator)
    • macOS (desktop)               • macos                                    • darwin-x64     • macOS 11.3 20E232 darwin-x64
    • Chrome (web)                  • chrome                                   • web-javascript • Google Chrome 90.0.4430.212

Platform

Device (e.g. Android emulator, iOS simulator, Samsung Galaxy S21): iOS Simulator

OS version (e.g. iOS 14.5, Android 11): iOS 14.5

Get channel view.

I want to have the possibilites to remove the message input and replaced with a text like:
Sender does not accept replies.
Just like Google Messages.

Code snippets 📝
If applicable, add code samples to help explain your feature.

return Chat(
      messages: messages,
      isChannel: true // look here, this is what i want.
      onSendPressed: null, // this will be by default null if isChannel is true.
    );
  }

flutter_link_previewer error

I use StreamBuilder widegt

and have error bellow code

maybe at flutter_link_previewer plugin

[✓] Flutter (Channel unknown, 2.0.5, on macOS 11.3 20E232 darwin-x64, locale en-KR)
• Flutter version 2.0.5 at /Users/bigmsg/fvm/versions/2.0.5
• Framework revision adc687823a (13 days ago), 2021-04-16 09:40:20 -0700
• Engine revision b09f014e96
• Dart version 2.12.3

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc2)
• Android SDK at /Users/bigmsg/Library/Android/sdk
• Platform android-30, build-tools 31.0.0-rc2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.

flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following StateError was thrown by an image listener:
flutter: Bad state: Future already completed
flutter:
flutter: When the exception was thrown, this was the stack:
flutter: #1 _getImageSize. (package:flutter_link_previewer/src/utils.dart:110:43)
flutter: #2 ImageStreamCompleter.setImage (package:flutter/src/painting/image_stream.dart:618:25)
flutter: #3 MultiFrameImageStreamCompleter._emitFrame (package:flutter/src/painting/image_stream.dart:954:5)
flutter: #4 MultiFrameImageStreamCompleter._handleAppFrame (package:flutter/src/painting/image_stream.dart:878:7)
flutter: #5 SchedulerBinding._invokeFrameCallback (package:flutter/src/scheduler/binding.dart:1144:15)
flutter: #6 SchedulerBinding.handleBeginFrame. (package:flutter/src/scheduler/binding.dart:1058:11)
flutter: #7 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:397:8)
flutter: #8 SchedulerBinding.handleBeginFrame (package:flutter/src/scheduler/binding.dart:1056:17)
flutter: #9 SchedulerBinding._handleBeginFrame (package:flutter/src/scheduler/binding.dart:977:5)
flutter: #13 _invoke1 (dart:ui/hooks.dart:180:10)
flutter: #14 PlatformDispatcher._beginFrame (dart:ui/platform_dispatcher.dart:231:5)
flutter: #15 _beginFrame (dart:ui/hooks.dart:108:31)
flutter: (elided 4 frames from dart:async)

Allow more customization: e.g. for input field

A really simple change: if the user provides a 'WidgetBuilder inputBuilder' argument, that is used to render the input. Makes it easier to reuse and restyle for your project.

Thoughts?

How to hide attachment icon?

Memory leaks non-stop on web. Crashes site when runs out of memory.

This is a major issue.
Steps:
1.) Create new flutter project.
2.) Add the chat dependency and replace the main widget with this Chat widget below (just a Chat widget with some messages). Doesn't occur when there are no messages. Might climb faster with more messages, not sure.
3.) Run in chrome and open up the task manager, don't do or touch anything and just watch the memory climb nonstop. Eventually this will cause the website to go blank and the user has to refresh. If your site is already memory intensive, such as images or media, then the crashes can happen every 10 minutes of using the page.

This took me a long time to figure out, and I was slowly just removing different elements from my app to figure this out. As soon as I remove the Chat() object in my app, the rising memory issue went away. I then went to a fresh project, ran it in web. When not touching it the memory stayed the exact same. Then I added the Chat object, it still wouldn't climb. You add 1 message and you can just sit there and watch the memory tick up indefinitely.

import 'package:flutter/material.dart';
import 'package:flutter_chat_types/flutter_chat_types.dart' as types;
import 'package:flutter_chat_ui/flutter_chat_ui.dart';

void _handleSendPressed(types.PartialText message) {}

return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    // This is the theme of your application.
    //
    // Try running your application with "flutter run". You'll see the
    // application has a blue toolbar. Then, without quitting the app, try
    // changing the primarySwatch below to Colors.green and then invoke
    // "hot reload" (press "r" in the console where you ran "flutter run",
    // or simply save your changes to "hot reload" in a Flutter IDE).
    // Notice that the counter didn't reset back to zero; the application
    // is not restarted.
    primarySwatch: Colors.blue,
  ),
  home: Chat(
    user: types.User(id: ''),
    messages: [
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
      types.TextMessage(author: types.User(id: ''), id: '0', text: 'hi'),
    ],
    onSendPressed: _handleSendPressed,
  ),
);

AvatarImage doesn't always cover userAvatarNameColor circle

This is probably much more noticeable on dark themes with bright userAvatarNameColors, but a lot of images, even ones that are perfect squares, aren't covering 100% of the avatar color circle behind it. This leads to an extremely thin line of color that isn't smooth and kinda makes it look bad. Attached a picture. I have the avatar color set to a green in this one.

Feature Request - Sticky/Pinned Messages

Specifically for group chats, is very common for admins to stick some messages for the rest of the participants at the top of the window, which when tapped goes to said message.

Example:

PreviewDataFetched on every old message when a new message comes in

Hey guys, finally got around to playing with flyer today. It's really simple and easy to use, nice! I pretty much was just following the example except sending/receiving messages from back end.

If let's say a link was sent, It shows the link briefly and then shows the preview data when it becomes available - which is nice, this is great.

But then when a new message comes in and "messages" updates. it adds the new message to the bottom and that previous message switches back to a link and then shows the preview data again. So, it's like starting over processing every message every time a new message comes in which is kind of jarring as it jumps back and forth between a link and the preview data every time a message comes in.

I'm not sure if theres something I can do in my implementation to make messages incremental instead of a full reload? Or if this is something that needs to happen inside the library to do a diff? Let me know if I'm doing something wrong.

Pagination when you are the user who has sent the most recent message - scrolls to bottom

Attached a video to try to make things more clear.

• At the beginning of the video the current user has sent the most recent message: "52"
• When scrolling up and paginating. The new messages load and then it shoots back to the bottom.
• The user "Monkey" then sends a message "test"
• Current user is no longer the user that has sent the most recent message
• When scrolling up and paginating everything works perfectly. Doesn't shoot back down to the bottom.
• Current user sends another message "Test2" and is now the user that has sent the most recent message again.
• When scrolling up and paginating it shows new messages load and shoots back down to the bottom again.

RPReplay_Final1628117002.mov

onTap or onLongPress methods for removing messages

Right now nothing happens if you click/long press on a regular message.
Would it be possible to expose the builder for the messages or just the onTap/onLongPress method that we can allow for user options like removing messages or replying to messages (maybe this one would be a swipe feature though?)

Thanks for this great package! Set up was super simple and it's a really beautiful UI.

Feature Request - Time inside chat bubble

Hi,

first of all congratulations on developing this great package....

I have couple of questions...

1. How mark messages deliver and read.....
2. How to customize shape and color of Chat bubble to match my theme....
3. Customize Bottom chat Send Bar and ....
4. Is there a way to group messages by date similar to WhatsApp with Date banner...?

I followed example code from here and didn't find much helpful information related to customization....
https://pub.dev/packages/flutter_chat_ui/example

Feature Request - Unread Messages banner

Usually whenever you leave a chat app and come back later, you get a banner that shows you what was the last message you read so you know where to start reading from.

Example:

BoxConstraints has a negative minimum width.

Anytime I send only one space as the message, I receive the following error below;

BoxConstraints has a negative minimum width.

flutter_chat_ui: ^1.1.5
Flutter 2.2.2 • channel stable

sender avatar/name for groups

is there a way to show an avatar or any widget next to the message displayed so in a chat group we know which message belongs to who, if this is not implemented yet is there a way around it like extending a widget or something like that because i need this feature urgent! thanks.

Attachment to be a FAB button to enable Speedial and other type or menues

Is your feature request related to a problem?

Many chat applications offer a speedial/FAB button menu when attaching files. Right now, the onAttachmentPressed just offers a way to pass a callback function (used almost for showing dialogs), but not somekind of components for example.

What solution would you suggest?

It would be better if we have an option to pass a widget, or make onAttachmentPressed available to receive widgets.

Some examples: https://fluttergems.dev/floating-action-button/

Is there any additional solution to that?

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

Extras

Screenshots or videos 📸
If applicable, add screenshots or videos to help explain your feature.

Code snippets 📝
If applicable, add code samples to help explain your feature.

// Your snippet here...

Related issues/PRs

Let us know if this is related to any issue/pull request.

Feature Request - Replied to snippet

It is a normal use case to reply directly to a specific message, when this happens, it usually displays a snippet of the old message to give context.

Examples:
Telegram:

Whatsapp:

Impossible to customize the text color of date dividers indepently from the text color of received messages

Given how it is implemented, it doesn't seem to be possible to choose a different color for the date dividers and the received messages (secondaryColor):

Text(
                                              getVerboseDateTimeRepresentation(
                                                DateTime
                                                    .fromMillisecondsSinceEpoch(
                                                  message.timestamp! * 1000,
                                                ),
                                                widget.dateLocale,
                                                widget.l10n.today,
                                                widget.l10n.yesterday,
                                              ),
                                              style: widget.theme.subtitle2
                                                  .copyWith(
                                                color: widget
                                                    .theme.secondaryTextColor,
                                              ),
                                            )

Even if I set a custom color in the TextStyle for subtitle2, it gets overridden by the code above.

Would it be possible to have a separate color setting for those date dividers?

How to customize messages?

How can I customize massages to show something like a sender name or avater of a sender in a message.?

Support long message history with lazy loading

Is there any support for lazy loading history only if user scrolls to the top?
Right now the API needs a full list of messages and there is no callback for fetching more messages afaik.

import 'package:flutter_chat_ui/flutter_chat_ui.dart'; error

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_chat_ui/flutter_chat_ui.dart';

class ChatWidget extends StatefulWidget {
  const ChatWidget({Key? key}) : super(key: key);
  @override
  _ChatState createState() => _ChatState();
}

class _ChatState extends State<ChatWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
    );
  }
}

/C:/flutter/.pub-cache/hosted/pub.dartlang.org/photo_view-0.11.1/lib/src/core/photo_view_gesture_detector.dart:106:29: Error: The argument type 'PointerEvent' can't be assigned to the parameter type 'PointerDownEvent'.
 - 'PointerEvent' is from 'package:flutter/src/gestures/events.dart' ('/C:/flutter/packages/flutter/lib/src/gestures/events.dart').
 - 'PointerDownEvent' is from 'package:flutter/src/gestures/events.dart' ('/C:/flutter/packages/flutter/lib/src/gestures/events.dart').
    super.addAllowedPointer(event);
                            ^
Failed to compile application.

flutter: ...
flutter-chat-ui: ^1.1.3

flutter doctor -v output 👇

doctor --verbose
[√] Flutter (Channel master, 2.3.0-17.0.pre.345, on Microsoft Windows [Version 10.0.19042.1052], locale en-US)
    • Flutter version 2.3.0-17.0.pre.345 at C:\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision f1542ace4f (3 days ago), 2021-06-13 20:59:02 -0400
    • Engine revision ab2c00c771
    • Dart version 2.14.0 (build 2.14.0-208.0.dev)

[!] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    X cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[X] Visual Studio - develop for Windows
    X Visual Studio not installed; this is necessary for Windows development.
      Download at https://visualstudio.microsoft.com/downloads/.
      Please install the "Desktop development with C++" workload, including all of its default components

[√] Android Studio (version 4.2.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)

[√] VS Code (version 1.57.0)
    • VS Code at C:\Users\k_bas\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension can be installed from:
       https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19042.1052]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 91.0.4472.106
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 91.0.864.48

Platform

Web

Realtime API

Hi, thanks for the package, it's wonderful.
I would like to know if there is a way to make the chat realtime with the data returning from the API created in Laravel.
I have already managed to list the messages and add them to the database, but I would like to have the possibility of showing new messages from other users on the screen without having to leave and enter the screen again.
Is it possible to do this with the API in Laravel?

Link previews not showing

I'm using just the sample code provided in your documentation and when I try the link you provide to test (https://bit.ly/2P0cn2g), I don't see a preview, just an extra space:

don't show the url text when preview data is available

It's odd to have the link displayed above the preview data when it is a link to a website, but it's way weirder when it's an image or a gif. Users just want to see the site preview data, the gif, or the image. In the case of the gif it makes the user think they should click on the link, when the intention was just to show the gif.

Delivered and read icon on wrong user

Hi, I'm wondering why the deliveredIcon and readIcon is on the other user's message. They already know the message has been delivered and read. Shouldn't those icons be on the author's message so they can see if their message was delivered and/or read?

Or maybe I'm doing something wrong but everything else is working perfectly.

Chat container layout constraints seem fixed

So, two different scenarios here where it doesn't seem I have any control over this outside of the package.
There are cases when I put the chat in a container for portion of the screen. The first scenario on the phone, I get this space at the top of the container which I'm assuming is some sort of fixed top padding. Attached a screen shot.

The second would be on a tablet or web where it only takes up a certain width of the screen. This one is actually the bigger issue because it cuts off words and you can't read them. I played with this a bit, and if you put the Chat object in a SizedBox under a certain width, lets say you set it to 300, the bubbles don't become less wide, they just start cutting off like the 2nd screen shot. You can see the whole word "the" is missing in the 2nd screen shot.