ListTile: Wrap text in trailing widget - flutter

Question

I was trying to use a ListTile to display a small title on the left, and then a longer text in the trailing widget. My idea es to let the trailing text to split out into multiple lines if there is not enough horizontal space.
I also tried to create my own tile using the following code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
Text(
"20h course - New students -",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
],
),
),
Using this code in a Pixel 2 XL emulator, as there is enough space, everything is in the same line as expected:
But when I'm trying it in a Nexus One emulator, because of its size, here is the output:
In order to allow the text to split in multiples lines, I wrapped the text on the right into a flexible widget:
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
Flexible(
child: Text(
"20h course - New students -",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
But then the problem is that even though the text is split in two lines, it is using more space than needing, so there is empty space left:
I have also tried to use an align widget to move the text to the end, but no luck either. Any ideas?

Answer 1

Wrap your Text with container and give it alignment left or right. Then the important part is, add textWidthBasis: TextWidthBasis.longestLine, to your Text. Code:
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
Flexible(
child: Container(
alignment: Alignment.centerLeft,
child: Text(
"20h course - New students - sd f sdfsddssdfsdfs dfs df sf sdf sdf ",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
textWidthBasis: TextWidthBasis.longestLine,
),
),
),
],
),
),

Answer 2

Flexible expands to fill all the available space. So if you want both widgets have the same space you can wrap the with flexible. Also you can use softWrap for you text.
Container(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: Padding(
padding: const EdgeInsets.only(right: 12),
child: Text(
"Campus",
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w700,
),
),
),
),
Flexible(
child: Text(
"20h course - New students -20h course - New students -20h course - New students -20h course - New students -20h course - New students -",
softWrap: true,
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
),
),
),
],
),
),
You can also use Expanded instead of `Flexible