'Flutter ignoring overflow and wrap settings
I am trying to work out why Flutter is ignoring my overflow and wrap settings on my Text widget
Card(
borderOnForeground: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
color: Colors.grey[200],
width: 1.0,
),
),
child: Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
CircleAvatar(
backgroundImage:
widget.user.profileImageUrl.isEmpty
? const AssetImage(
'assets/images/avatar-5.png')
: CachedNetworkImageProvider(
widget.user.profileImageUrl,
)),
const SizedBox(width: 10),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'${widget.user.firstName} ${widget.user.lastName[0]}'),
Text(task.desc,
overflow: TextOverflow.fade,
maxLines: 2,
softWrap: false,
style: Theme.of(context)
.textTheme
.bodyText1),
]),
],
),
Row(children: [
const Icon(Icons.calendar_today_outlined, size: 12),
const SizedBox(width: 6),
Text(DateFormat('E, d MMM').format(task.due),
style: Theme.of(context).textTheme.caption)
]),
]),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
_buildBudget(formatCurrency.format(widget.task.budget))
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(children: [
const Icon(Icons.location_on_outlined, size: 12),
const SizedBox(width: 6),
Text(task.location,
style: Theme.of(context).textTheme.caption)
]),
],
),
Solution 1:[1]
Wrap your Column in a Expanded.. should be work
Expanded(child:Column(...))
and try to add Expanded (wrap Row) here too (last line in code):
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(child:Row( ////HERE
The Row does not have a specified width. So one of the childs should have an Expanded
ok i have tested... here the full code:
Card(
borderOnForeground: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
color: Colors.grey,
width: 1.0,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Row(
children: [
CircleAvatar(backgroundImage: const AssetImage('assets/images/avatar-5.png')),
const SizedBox(width: 10),
Expanded(
child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
Text('${'widget.user.firstName'} '),
Text('task.desc',
overflow: TextOverflow.fade,
maxLines: 2,
softWrap: false,
style: Theme.of(context).textTheme.bodyText1),
]),
),
],
),
),
Row(children: [
const Icon(Icons.calendar_today_outlined, size: 12),
const SizedBox(width: 6),
Text('DateFormat( ).format(task.due)', style: Theme.of(context).textTheme.caption)
]),
]),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [Text('dff')],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(children: [
const Icon(Icons.location_on_outlined, size: 12),
const SizedBox(width: 6),
Text('task.location', style: Theme.of(context).textTheme.caption)
])
],
)
])));
Solution 2:[2]
Wrap child of Column with Flexible :
Column(
mainAxisSize : MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Flexible (child :Text(
'${widget.user.firstName} ${widget.user.lastName[0]}')),
Flexible (
child :Text(task.desc,
overflow: TextOverflow.fade,
maxLines: 2,
softWrap: false,
style: Theme.of(context)
.textTheme
.bodyText1)),
]),
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | |
| Solution 2 | Matthias Müller |