[Flutter] Style a message chat style-ish bubble
flutter message Style chat
2023-09-14 09:00:48 时间
const kOtherBubblePointer = BorderRadius.only( topRight: Radius.circular(30), bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30), ); const kMeBubblePointer = BorderRadius.only( topLeft: Radius.circular(30), bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30), );
class MessageBubble extends StatelessWidget { MessageBubble({this.sender, this.text, this.isMe}); final String text; final String sender; final bool isMe; @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.all(10.0), child: Column( crossAxisAlignment: isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start, children: <Widget>[ Text( sender, style: TextStyle(fontSize: 12, color: Colors.black45), ), Material( borderRadius: isMe ? kMeBubblePointer : kOtherBubblePointer, elevation: 5, color: isMe ? Colors.lightBlueAccent : Colors.white, child: Padding( padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10), child: Text( '$text', style: TextStyle( fontSize: 15.0, color: isMe ? Colors.white : Colors.black54, ), ), ), ), ], ), ); } }
相关文章
- 如何编写高质量的flutter代码
- flutter weekly第11期
- flutter 系列之:flutter 中的幽灵offstage
- Flutter 下载篇 - 叁 | 网络库切换实践与思考
- 第126期:如何学习flutter组件
- flutter系列之:flutter中listview的高级用法
- Flutter 开发 (1)iOS 下超详细集成 Flutter
- 【Flutter】Flutter 手势交互 ( 跟随手指运动的小球 )
- 【错误记录】Flutter 报错 ( Could not read script ‘xxxflutter_toolsgradleapp_plugin_loader.gradle‘ )
- 【Flutter】Flutter 全面屏适配 ( 需要适配的情况 | Android 设置最大宽高比 | 使用 SafeArea 进行全面屏适配 | 使用 MediaQuery 进行全面屏适配 )