英文:
How to make this chat bubble flexible in flutter to avoid overflow
问题
以下是代码的中文翻译部分:
class MessageThread extends StatelessWidget {
const MessageThread({
super.key,
required this.message,
required this.time,
required this.isMe,
this.readed = false,
});
final String message;
final String time;
final bool isMe;
final bool readed;
@override
Widget build(BuildContext context) {
return Padding(
padding: isMe
? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
: const EdgeInsets only(left: 30, top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Column(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
decoration: BoxDecoration(
color: isMe ? null : AppColor.userChatBox,
gradient: isMe ? AppColor.bgColor : null,
borderRadius: isMe
? const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
)
: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
message,
style: TextStyle(color: isMe ? Colors.white : null),
),
),
);
},
),
Constants.height10,
Padding(
padding: isMe
? const EdgeInsets.only(right: 10)
: const EdgeInsets.only(left: 10),
child: Row(
children: [
Text(
time,
style: const TextStyle(
color: Colors.grey,
),
),
const SizedBox(width: 5),
if (isMe)
if (readed)
const Icon(
Icons.done_all,
color: AppColor.blue,
size: 20,
)
],
),
)
],
),
],
),
);
}
}
当处理长文本时出现溢出问题,您可以使用以下方法来使它具有动态宽度,以解决此问题:
- 使用
Wrap
小部件替换Row
以允许文本自动换行。 - 使用
Flexible
小部件包装文本以根据内容自动调整宽度。 - 如果需要,可以添加最大宽度以限制文本框的宽度。
这样,无论文本内容是长还是短,它都会根据其内容动态调整宽度,而不会导致溢出。
英文:
here is the chat bubble that i created on my own in flutter, i tried using packages like chat_bubbles
but i can't use gradient colours on that, so i created this widget. here is the code
class MessageThread extends StatelessWidget {
const MessageThread({
super.key,
required this.message,
required this.time,
required this.isMe,
this.readed = false,
});
final String message;
final String time;
final bool isMe;
final bool readed;
@override
Widget build(BuildContext context) {
return Padding(
padding: isMe
? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
: const EdgeInsets.only(left: 30, top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Column(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
decoration: BoxDecoration(
color: isMe ? null : AppColor.userChatBox,
gradient: isMe ? AppColor.bgColor : null,
borderRadius: isMe
? const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
)
: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
message,
style: TextStyle(color: isMe ? Colors.white : null),
),
),
);
},
),
Constants.height10,
Padding(
padding: isMe
? const EdgeInsets.only(right: 10)
: const EdgeInsets.only(left: 10),
child: Row(
children: [
Text(
time,
style: const TextStyle(
color: Colors.grey,
),
),
const SizedBox(width: 5),
if (isMe)
if (readed)
const Icon(
Icons.done_all,
color: AppColor.blue,
size: 20,
)
],
),
)
],
),
],
),
);
}
}
but when it comes to long text it's causing an overflow, here is the example
i can set fixed width to solve this, but if user text small text like 'Hi', it'll look weird in long width, so how do i make it dynamic.
how do i fix this?
答案1
得分: 1
请参考以下代码:
import 'package:flutter/cupertino.dart';
class MessageThread extends StatelessWidget {
const MessageThread({
super.key,
required this.message,
required this.time,
required this.isMe,
this.readed = false,
});
final String message;
final String time;
final bool isMe;
final bool readed;
@override
Widget build(BuildContext context) {
return Padding(
padding: isMe
? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
: const EdgeInsets.only(left: 30, top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Expanded(
child: Column(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
decoration: BoxDecoration(
color: isMe ? null : AppColor.userChatBox,
gradient: isMe ? AppColor.bgColor : null,
borderRadius: isMe
? const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
)
: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
message,
style: TextStyle(color: isMe ? Colors.white : null),
),
),
);
},
),
Constants.height10,
Padding(
padding: isMe
? const EdgeInsets only(right: 10)
: const EdgeInsets.only(left: 10),
child: Row(
children: [
Text(
time,
style: const TextStyle(
color: Colors.grey,
),
),
const SizedBox(width: 5),
if (isMe)
if (readed)
const Icon(
Icons.done_all,
color: AppColor.blue,
size: 20,
)
],
),
)
],
),
),
],
),
);
}
}
请注意,代码中的一些变量和样式可能需要根据您的应用程序的实际需求进行调整。
英文:
Try this :
import 'package:flutter/cupertino.dart';
class MessageThread extends StatelessWidget {
const MessageThread({
super.key,
required this.message,
required this.time,
required this.isMe,
this.readed = false,
});
final String message;
final String time;
final bool isMe;
final bool readed;
@override
Widget build(BuildContext context) {
return Padding(
padding: isMe
? const EdgeInsets.only(right: 30, top: 10, bottom: 10)
: const EdgeInsets.only(left: 30, top: 10, bottom: 10),
child: Row(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.start,
children: [
Expanded(
child: Column(
mainAxisAlignment:
isMe ? MainAxisAlignment.end : MainAxisAlignment.center,
crossAxisAlignment:
isMe ? CrossAxisAlignment.end : CrossAxisAlignment.start,
children: [
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
return Container(
constraints: BoxConstraints(
maxWidth: constraints.maxWidth,
),
decoration: BoxDecoration(
color: isMe ? null : AppColor.userChatBox,
gradient: isMe ? AppColor.bgColor : null,
borderRadius: isMe
? const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomLeft: Radius.circular(15),
)
: const BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
bottomRight: Radius.circular(15),
),
),
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Text(
message,
style: TextStyle(color: isMe ? Colors.white : null),
),
),
);
},
),
Constants.height10,
Padding(
padding: isMe
? const EdgeInsets.only(right: 10)
: const EdgeInsets.only(left: 10),
child: Row(
children: [
Text(
time,
style: const TextStyle(
color: Colors.grey,
),
),
const SizedBox(width: 5),
if (isMe)
if (readed)
const Icon(
Icons.done_all,
color: AppColor.blue,
size: 20,
)
],
),
)
],
),
),
],
),
);
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论