Comments (2)
I've come across this problem. This is how I solved:
- Go to source code of the widget you want to use (I use
BubbleSpecialTwo
). In VSCode, you can do it by F12 or ALT+LeftClick. - Copy the related widget and paste it to your codebase somewhere, wherever you hold your custom components.
- Rename the component to something else. I renamed to
CustomBubbleSpecialTwo
. - Change
text
withchild
, which should beWidget
instead ofString
.
I could send a PR for this but kinda busy right now. When I get freer and nobody still takes this issue, I can send a PR maybe.
I leave CustomBubbleSpecialTwo
as an example:
import 'package:chat_bubbles/bubbles/bubble_special_two.dart';
import 'package:flutter/material.dart';
class CustomBubbleSpecialTwo extends StatelessWidget {
final bool isSender;
final Widget child;
final bool tail;
final Color color;
final bool sent;
final bool delivered;
final bool seen;
final TextStyle textStyle;
final BoxConstraints? constraints;
const CustomBubbleSpecialTwo({
required this.child,
super.key,
this.isSender = true,
this.constraints,
this.color = Colors.white70,
this.tail = true,
this.sent = false,
this.delivered = false,
this.seen = false,
this.textStyle = const TextStyle(
color: Colors.black87,
fontSize: 16,
),
});
///chat bubble builder method
@override
Widget build(BuildContext context) {
bool stateTick = false;
Icon? stateIcon;
if (sent) {
stateTick = true;
stateIcon = const Icon(
Icons.done,
size: 18,
color: Color(0xFF97AD8E),
);
}
if (delivered) {
stateTick = true;
stateIcon = const Icon(
Icons.done_all,
size: 18,
color: Color(0xFF97AD8E),
);
}
if (seen) {
stateTick = true;
stateIcon = const Icon(
Icons.done_all,
size: 18,
color: Color(0xFF92DEDA),
);
}
return Align(
alignment: isSender ? Alignment.topRight : Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
child: CustomPaint(
painter: SpecialChatBubbleTwo(
color: color,
alignment: isSender ? Alignment.topRight : Alignment.topLeft,
tail: tail,
),
child: Container(
constraints: constraints ??
BoxConstraints(
maxWidth: MediaQuery.of(context).size.width * .8,
),
margin: isSender
? stateTick
? const EdgeInsets.fromLTRB(7, 7, 14, 7)
: const EdgeInsets.fromLTRB(7, 7, 17, 7)
: const EdgeInsets.fromLTRB(17, 7, 7, 7),
child: Stack(
children: <Widget>[
Padding(
padding: stateTick
? const EdgeInsets.only(right: 20)
// ignore: use_named_constants
: const EdgeInsets.symmetric(),
child: child,
),
if (stateIcon != null && stateTick)
Positioned(
bottom: 0,
right: 0,
child: stateIcon,
)
else
const SizedBox(
width: 1,
),
],
),
),
),
),
);
}
}
from chat_bubbles.
Nice idea :D
from chat_bubbles.
Related Issues (20)
- Pls remove margin for bubble HOT 1
- Possibility to change the placeholder of MessageBar
- Is it possible to change the Text to SelectableText so that the consumer can copy? HOT 1
- Issue displaying: Spanish accented characters HOT 1
- Use RenderObject for Chat Bubbles
- please add the parameter to the TextStyle for the TextField in the MessageBar widget
- Hello, possible support for popup emoji panel from bottom?
- I am using this chat in bottomsheet ....my send message textfield's height is gone large. Please let me khow some solution for that
- When I mix BubbleSpecialThree and BubbleNormalAudio, caused overflow
- Audio chat bubble duration / position display text recommendation
- Trailing Widget not being shown when isSender is true
- RTL Support?
- We cannot change text field fill color
- Adding RichText
- Adding Custom Widget Inside message bubble HOT 1
- For Group Chat unable to show the sender name HOT 1
- Message bar textfield fill color
- BubbleNormalAudio duration
- Add reply message option and design.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chat_bubbles.