prahack / chat_bubbles Goto Github PK
View Code? Open in Web Editor NEWFlutter chat bubble/speech bubble widgets.
Home Page: https://pub.dev/packages/chat_bubbles
License: MIT License
Flutter chat bubble/speech bubble widgets.
Home Page: https://pub.dev/packages/chat_bubbles
License: MIT License
Thanks for this wonderful plugin. I would like to add emoji add button to MessageBar like above. But I could not figure out how to implement this. Is it possible to add as an InkWell object? How should I proceed? Thanks.
actions: [
InkWell(
child: Icon(
Icons.emoji,
color: Colors.black,
size: 24,
),
onTap: () => openEmojis(),
),
]
i am making app where there is a group chat so i need to show that who had send the message above the message the user name will be written in different TextStyle which i am unable to do here
when I add this dependencies I received erorr code 65
Not able to change fill color of the message bar
i am facing issue on dark mode with the text input color
Hi!
This is a great package, thanks for developing it! :) I know my request might sound a bit too specific, but I need to add an additional icon next to the text that can be tapped. So the normal text + an IconButton next to the text (either on the right or left side) would be useful for me. Being able to provide a custom widget as content would also be OK. :)
Thanks!
Bence
In the flutter build show, the flutter team showed how to build chat bubbles that behave like whatsapp in term of placing the date and read icon depending of the text length. https://www.youtube.com/watch?v=cq34RWXegM8
I think implementing their solution would increase the quality of this package dramatically.
'package:flutter/src/material/slider.dart':
Failed assertion: line 194 pos 15: 'value >= min && value <= max'
Please add the reply message feature in chat bubbles. It will be a great help. Thanks
Hello, possible support for popup emoji panel from bottom?
A must for multi language apps.
Unable to add richtext inside message box
there is no api to change text color
it should have parameter child which can have any Widget which will be displayed inside message bubble
As the title says
return BubbleNormal(
leading: CircleAvatar(
backgroundColor: Colors.red,
child: Text(
'R',
style: kSmall1.copyWith(color: kNeutralW),
),
),
trailing: CircleAvatar(
backgroundColor: Colors.red,
child: Text(
'A',
style: kSmall1.copyWith(color: kNeutralW),
),
),
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
text: messages[index],
color: index % 2 == 0 ? kPrimary6 : kNeutralW,
tail: true,
isSender: true,
textStyle: kSmall2,
);
This is the code I'm using to show users profile picture on the chat but the trailing widget is never shown
Would it be relevant to add markdown support ? Generative AI uses markdown so for example instead of showing text wrapped in "**", markdown will show bold text.
flutter_markdown package could be used.
I can submit the PR if you want, my code is ready.
Otherwise, why not take a Widget child
as parameter instead of a String text
? This way, you won't have to add a dependency to your package. That would be a breaking change though. Or a new widget MarkdownBubble
?
Datechip take the complete width of screen
Pressing enter in MessageBar inserts new line. Is it possible to send on enter? Can the widget be configured this way? And then use shift+enter for new line.
I searched all issues and cannot find this discussed elsewhere.
Hi,
i can't find any way to make your widget support RTL text, is there an option or its not supported?
Cool widget by the way
Please add params as: int maxLines ,double minHeight
Hello sir, can you add one more function to put date inside the chat bubble?
Hi
When sent is set to true, delivered / seen is ignored.
can we have delivered show the double bar even when sent is set to true?
Cheers
Is it possible to change the Text to SelectableText so that the consumer can copy?
Hi, I would like to ask if we can customize the duration / position text without changing the source code by entering bubbles/bubble_normal_audio.dart file.
The following txt file bubble_normal_audio.txt
(as github does not support .dart) would be my suggestion by adding 3 lines with comment // newly added
.
Thank you so much for creating this library.
Thanks for your work, is there a bubble type for video and image messages
Hi, i found the following issues while using plugin. The value / state of keyboard entry is lost when any of the following event is fired. (keyboard close, keyboard mode toggle).
This is as a result of using a "Stateless" widget on the "MessageBar" class. I had to convert the class to "Stateful" widget to override this behaviour.
[ message_bar.dart ]
import 'package:flutter/material.dart';
///Normal Message bar with more actions
///
/// following attributes can be modified
///
///
/// # BOOLEANS
/// [replying] is additional reply widget top of the message bar
///
/// # STRINGS
/// [replyingTo] is a string to tag the replying message
///
/// # WIDGETS
/// [actions] are the additional leading action buttons like camera
/// and file select
///
/// # COLORS
/// [replyWidgetColor] is reply widget color
/// [replyIconColor] is the reply icon color on the left side of reply widget
/// [replyCloseColor] is the close icon color on the right side of the reply
/// widget
/// [messageBarColor] is the color of the message bar
/// [sendButtonColor] is the color of the send button
///
/// # METHODS
/// [onTextChanged] is function which triggers after text every text change
/// [onSend] is send button action
/// [onTapCloseReply] is close button action of the close button on the
/// reply widget usually change [replying] attribute to false
class MessageBar extends StatefulWidget {
final bool replying;
final String replyingTo;
final List actions;
final Color replyWidgetColor;
final Color replyIconColor;
final Color replyCloseColor;
final Color messageBarColor;
final Color sendButtonColor;
final void Function(String)? onTextChanged;
final void Function(String)? onSend;
final void Function()? onTapCloseReply;
/// [MessageBar] constructor
///
///
MessageBar({
this.replying = false,
this.replyingTo = "",
this.actions = const [],
this.replyWidgetColor = const Color(0xffF4F4F5),
this.replyIconColor = Colors.blue,
this.replyCloseColor = Colors.black12,
this.messageBarColor = const Color(0xffF4F4F5),
this.sendButtonColor = Colors.blue,
this.onTextChanged,
this.onSend,
this.onTapCloseReply,
});
@OverRide
State createState() => _MessageBarState();
}
class _MessageBarState extends State {
final TextEditingController _textController = TextEditingController();
/// [MessageBar] builder method
///
@OverRide
Widget build(BuildContext context) {
return Align(
alignment: Alignment.bottomCenter,
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
widget.replying
? Container(
color: widget.replyWidgetColor,
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
child: Row(
children: [
Icon(
Icons.reply,
color: widget.replyIconColor,
size: 24,
),
Expanded(
child: Container(
child: Text(
'Re : ' + widget.replyingTo,
overflow: TextOverflow.ellipsis,
),
),
),
InkWell(
onTap: widget.onTapCloseReply,
child: Icon(
Icons.close,
color: widget.replyCloseColor,
size: 24,
),
),
],
))
: Container(),
widget.replying
? Container(
height: 1,
color: Colors.grey.shade300,
)
: Container(),
Container(
color: widget.messageBarColor,
padding: const EdgeInsets.symmetric(
vertical: 8,
horizontal: 16,
),
child: Row(
children: [
...widget.actions,
Expanded(
child: Container(
child: TextField(
controller: _textController,
keyboardType: TextInputType.multiline,
textCapitalization: TextCapitalization.sentences,
minLines: 1,
maxLines: 3,
onChanged: widget.onTextChanged,
decoration: InputDecoration(
hintText: "Type your message here",
hintMaxLines: 1,
contentPadding: const EdgeInsets.symmetric(
horizontal: 8.0, vertical: 10),
hintStyle: TextStyle(
fontSize: 16,
),
fillColor: Colors.white,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.white,
width: 0.2,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(30.0),
borderSide: const BorderSide(
color: Colors.black26,
width: 0.2,
),
),
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 16),
child: InkWell(
child: Icon(
Icons.send,
color: widget.sendButtonColor,
size: 24,
),
onTap: () {
if (_textController.text.trim() != '') {
if (widget.onSend != null) {
widget.onSend!(_textController.text.trim());
}
_textController.text = '';
}
},
),
),
],
),
),
],
),
),
);
}
}
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.