Flutter – two text in a row with left one overflowing gracefully
Solution 1
You can use the Flexible
widget:
Widget _listItemSubtitle(String subtitle) {
return new Flexible(
fit: FlexFit.loose,
child: Text(
"[$subtitle]",
softWrap: false,
overflow: TextOverflow.fade,
),
);
}
Alternative:
If you prefer that the time widget is always on the right, you could wrap the subtitle text in an Expanded
widget:
Widget _listItemSubtitle(String subtitle){
return Expanded(
child: Text(
"[$subtitle]",
softWrap: false,
overflow: TextOverflow.fade,
),
);
}
Solution 2
Widgets can be sized to fit within a row or column by using the Expanded
or Flexible
widget. To fix the previous example where the row of Text is too wide for its render box, wrap each Text with an Expanded
or Flexible
widget.
Perhaps you want a widget to occupy twice as much space as its siblings. For this, use the Expanded
widget flex
property, an integer that determines the flex factor for a widget. The default flex factor is 1. The following code sets the flex factor of the middle image to 2:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: Image.asset('images/pic1.jpg'),
),
Expanded(
flex: 2,
child: Image.asset('images/pic2.jpg'),
),
Expanded(
child: Image.asset('images/pic3.jpg'),
),
],
);
Luke Pighetti
Updated on July 09, 2022Comments
-
Luke Pighetti almost 2 years
How do I get two side-by-side Text widgets to only allow the left-most one to overflow gracefully?
One text widget in a column is easy to overflow gracefully. Two text widgets side-by-side in a row is problematic.
Stack overflow wants more details but honestly, I'm probably just wasting more of your time at this point.
Widget _listItem({String title, String subtitle}){ return Row( children: <Widget>[ _listItemIcon(), Expanded( child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ _listItemTitle(title), Row( children: <Widget>[ _listItemSubtitle(subtitle), // how do I allow this to overflow gracefully _listItemTime("2m") // but stop this from overflowing ], ) ], ), ), _listItemFavorite() ], ); } ////////////// Widget _listItemIcon(){ return Icon(Icons.message); } Widget _listItemTitle(String title){ return Text( title, softWrap: false, overflow: TextOverflow.fade, style: TextStyle( fontSize:24.0 ), ); } Widget _listItemSubtitle(String subtitle){ return Text( "[$subtitle]", softWrap: false, overflow: TextOverflow.fade, ); } Widget _listItemTime(String time){ return Text( "[$time]", softWrap: false, overflow: TextOverflow.fade, ); } Widget _listItemFavorite(){ return Icon(Icons.favorite); }