Text overflowing and cannot be controlled - flutter

Question

I've got an issue where text inside a Column inside a Row overflows the other things in the Row. This is what it looks like when the description is short.
But if the description gets longer it overflows and hides the settings button:
I've tried using the overflow: TextOverflow.ellipsis, and TextOverflow.clip properties in the Text widget, this does nothing.tried to change the Column and Row to Wrap widgets
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(
userData.profilePic ?? kBackupProfilePic),
radius: 40.0,
),
SizedBox(width: 20.0),
Column(
children: <Widget>[
SizedBox(height: 20.0),
Text(
userData.name ?? "Cannot find name",
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 20.0,
),
),
SizedBox(height: 5.0),
Text(
userData.description ??
"Cannot find description",
overflow: TextOverflow.ellipsis,
maxLines: 5,
style: TextStyle(),
),
],
),
SizedBox(width: 40.0),
IconButton(
icon: Image.asset('assets/cogwheel.png'),
iconSize: 50,
onPressed: () {
openSettings();
},
),
],
),
I've tried placing the the Row in a Container with a Flexible, but that causes red screen Flutter error.
When I replace the Row and Columns with Wrap widgets I get:
child: Wrap(
direction: Axis.horizontal,
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(
userData.profilePic ?? kBackupProfilePic),
radius: 40.0,
),
SizedBox(width: 20.0),
Wrap(
direction: Axis.vertical,
children: <Widget>[
SizedBox(height: 20.0),
Text(
userData.name ?? "Cannot find name",
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 20.0,
),
),
SizedBox(height: 5.0),
Text(
//"brobbi",
userData.description ??
"Cannot find description",
overflow: TextOverflow.clip,
maxLines: 5,
style: TextStyle(),
),
],
),
SizedBox(width: 40.0),
IconButton(
icon: Image.asset('assets/cogwheel.png'),
iconSize: 50,
onPressed: () {
PopupLayout(top: topMarginPopupLayout).showPopup(
context, SettingsScreen(), 'Cibus Settings');
},
),
],
),
This cannot be too hard. I just want my text to linebreak or cut if it's so long that it'll cause overflows.

Answer 1

For TextOverflow to the framework should know where is the current widget's bounds are. Inside Column widget framework cant determine cross axis (horizontal) bounds.
To make ellipsis work you have to wrap that text widget inside an Expanded widget with a parent Row. or wrapping your Column inside Expanded would do fine.
Row(children:[
//Circle Avatar here
Expanded( // Wrap Expanded here
child:Column(
children: <Widget>[
SizedBox(height: 20.0),
Text(
"Cannot find name",
overflow: TextOverflow.ellipsis,
maxLines:1,
style: TextStyle(
fontSize: 20.0,
),
),
SizedBox(height: 5.0),
Text(
"Cannot find description",
overflow: TextOverflow.ellipsis,
maxLines: 5,
style: TextStyle(),
),
],
),
),
])