flyerhq / flutter_chat_ui Goto Github PK
View Code? Open in Web Editor NEWActively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
Home Page: https://flyer.chat
License: Apache License 2.0
Actively maintained, community-driven chat UI implementation with an optional Firebase BaaS.
Home Page: https://flyer.chat
License: Apache License 2.0
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!
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."
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.
This error message shouldn't exist.
Chat list screen: https://i.imgur.com/ZdY0VBU.jpeg
Chat screen: https://i.imgur.com/0KQkI47.jpeg
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;
});
}
Flutter with null safety: 2.2.3
Sdk: ">=2.12.2 <3.0.0"
flutter_chat_ui: ^1.1.7
Real device Xiaomi Mi 9T Pro with Stock AOSP ROM (Android 11-R)
When I research the issue on StackOverflow I found that:
"Delaying it is not the right solution. Better to use this"
if(pageController.hasClients){
....
}
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.
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.
Unable to load asset: packages/flutter_chat_ui/assets/3.0x/icon-read.png
pubspec.yaml is not updated
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.
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
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)
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
Web
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.
How can I customize massages to show something like a sender name or avater of a sender in a message.?
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.
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
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.
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/
A clear and concise description of any alternative solutions or features you've considered.
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...
Let us know if this is related to any issue/pull request.
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.
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.
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,
),
);
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.
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 π
π¬ From now on all new updates will be shared by @demchenkoalex here.
Ε±Any plans for admin ui and features:
swear word filter
/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'.
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.
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.
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?
Attached a video to try to make things more clear.
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)
A few steps to define where does the bug occur.
Smooth scroolling while going up, or holding still while reading an old message.
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
Device (e.g. Android emulator, iOS simulator, Samsung Galaxy S21): iOS Simulator
OS version (e.g. iOS 14.5, Android 11): iOS 14.5
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.
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!
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
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
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.
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?
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:
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.
);
}
Hi,
first of all congratulations on developing this great package....
I have couple of questions...
I followed example code from here and didn't find much helpful information related to customization....
https://pub.dev/packages/flutter_chat_ui/example
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?
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.
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
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.
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()
.
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.
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),
...
);
N/A
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?
Please is it possible to change the time formate on the header from 24 to 12 hour clock?
why is it that despite i used a few different id's i still gets messages displayed as I send them all.
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.
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
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.