Comments (2)
Try this one!
return ListView.builder(
reverse: true,
padding: const EdgeInsets.only(left: 5, right: 5, top: 5, bottom: 10),
itemCount: history!.messages.length,
itemBuilder: (context, index) {
Message message = history!.messages[index];
bool sent = widget.me == message.user;
DateTime date = message.timestamp!.toLocal();
int msgLength = message.msg.length;
int limit = 35;
return Bubble(
style: sent ? styleMe : styleSomebody,
child: Container(
constraints: BoxConstraints(
maxWidth: mediaQueryData.size.width * 0.7,
),
child: Stack(
children: [
Padding(
padding: EdgeInsets.only(bottom: msgLength <= limit ? 0 : 18),
child: Text(
message.msg + (msgLength <= limit ? ' ' : ''),
style: DefaultTextStyle.of(context).style
),
),
Positioned(
bottom: 0,
right: 0,
child: Text(
dateFormatToday.format(date),
textAlign: TextAlign.end,
style: DefaultTextStyle.of(context).style.copyWith(fontSize: 12, color: Colors.grey.shade400)
),
)
],
),
),
);
}
);
from bubble.
hi @rafaelsetragni thanks for your example code it is working great, but i am also using images inside.
it seems if there is a image .. the stack widget shows text under the image :(
here is my code:
Bubble(
margin: BubbleEdges.only(top: 5, bottom: 5, left: 30),
alignment: Alignment.topRight,
nipWidth: 8,
nipHeight: 10,
nip: BubbleNip.rightTop,
color: Color.fromRGBO(225, 255, 199, 1.0),
child: Container(
constraints:
BoxConstraints(maxWidth: MediaQuery.of(context).size.width),
child: Stack(
children: [
if (message.image != null && message.image != '') ...[
showMessageImage(message.image, message.iId.oid)
],
if (message.message != null && message.message != '') ...[
Padding(
padding:
EdgeInsets.only(bottom: msgLength <= limit ? 0 : 18),
child: Linkify(
style: DefaultTextStyle.of(context).style,
onOpen: _onOpen,
text: message.message +
(msgLength <= limit ? ' ' : ''),
textAlign: TextAlign.right),
),
],
Positioned(
bottom: -0.5,
right: 0,
child: Container(
padding: EdgeInsets.only(right: 3),
child: Text(
DateFormat('HH:mm').format(
DateTime.fromMillisecondsSinceEpoch(
message.timestamp.date)),
textAlign: TextAlign.end,
style: DefaultTextStyle.of(context).style.copyWith(
fontSize: 12, color: Colors.grey.shade400)),
))
],
),
from bubble.
Related Issues (20)
- Add one more text field for date inside bubble HOT 2
- flutter web crash HOT 1
- Move Nip Horizontally HOT 1
- Add custom key HOT 2
- Change to AlignmentGeometry instead of Alignment HOT 1
- The Bubble widget gave me bad performance HOT 4
- Add null safety HOT 2
- [Question] Speech to text support HOT 1
- UnimplementedError on web when running example HOT 1
- Feature Request: BubbleNip.BelowLeft, BubbleNip.BelowRight, BubbleNip.AboveLeft, BubbleNip.AboveRight
- Clip behavior not work because of BubblePainter in v1.2.1
- bottom center bubble HOT 1
- Dynamic list of bubbles
- Alignment Nip HOT 1
- OverFlowed Bright problem HOT 1
- UnimplementedError on web with --web-renderer html HOT 1
- Dynamic width when text is more than 1 line. HOT 1
- Add reaction support
- Flutter Web - Mobile Browser Bubble viewing problem HOT 2
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 bubble.