Flutter ignoring overflow and wrap settings - flutter

Question

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)
]),
],
),

Answer 1

Here is a similar question, that might help you:
Flutter - Wrap text on overflow, like insert ellipsis or fade
To achieve the desired effect, you have to tell your text widgets how much space they should take. For example by wrapping your column (the parent of the overflowing text widgets) with a Flexible or Expanded.
I tried to minify your example a little bit to make it more obvious:
class CardWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(
children: [
// Your other widegts
// Row(children: [ ... ]),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Your circle avatar with a constant size
Container(width: 50, height: 50, color: Colors.red),
const SizedBox(width: 10),
// The important part
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('Firstname Lastname'),
const Text(
'Really long description that does not fit on to the screen',
overflow: TextOverflow.fade,
maxLines: 2),
],
),
),
],
),
// Your other widegts
// Row(children: [ ... ]),
],
),
),
);
}
}
Note that you should remove the softWrap: false. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space.
If the text exceeds 2 lines, the faded overflow effect will be visible. If you do not want that, just remove the maxLines attribute.
Full Example
Here is a full example with a structure, that will work within a ListView assuming location, date and budget widgets should be on the same line:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: ListView(shrinkWrap: true, children: [
CardWidget(),
CardWidget(),
CardWidget(),
]),
);
}
}
class CardWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Card(
borderOnForeground: true,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(12.0),
side: BorderSide(
width: 1.0,
),
),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10),
child: Column(
children: [
Row(
children: [
Container(height: 50, width: 50, color: Colors.red),
const SizedBox(width: 10),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Firstname Lastname'),
Text(
"Long text that exceeds multiple lines. Long text that exceeds multiple lines. Long text that exceeds multiple lines",
overflow: TextOverflow.fade,
maxLines: 3,
style: Theme.of(context).textTheme.bodyText1),
],
),
),
],
),
const SizedBox(height: 25),
Row(
children: [
// Location and Date
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Icons.location_on_outlined, size: 12),
const SizedBox(width: 6),
Text("Location"),
],
),
const SizedBox(width: 25),
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(Icons.calendar_today_outlined, size: 12),
const SizedBox(width: 6),
Text("Date"),
],
),
// The budget widget
Expanded(child: Container()),
Text("200"),
],
),
],
),
),
);
}
}

Answer 2

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)
])
],
)
])));

Answer 3

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)),
]),