Truncate text when it reaches next control - dart

Question

Consider the following code:
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Column(
children: <Widget>[
new FlatButton(
child: new Container(
child: new Center(child: new Text("ABOVE")),
height: 300.0,
color: const Color.fromARGB(255, 255, 0, 0),
),
),
new Expanded(
child: new Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",)
),
new FlatButton(
child: new Container(
child: new Center(child: new Text("BELOW")),
height: 300.0,
color: const Color.fromARGB(255, 255, 0, 0),
),
),
],
);
}
}
On my Pixel, this produces:
My expectation was that the text would continue up until it reaches the bottom button, then clip. If I set overflow: TextOverflow.ellipsis then it truncates after the first line:
If I set maxLines: 3 then it continues until the fourth line:
However, I can't find a way to just continue until it reaches the bottom button.
Can anyone enlighten me?

Answer 1

There is no direct styling option that does this, but however you can do it by first calculating maxLines that can occupy the available view in runtime and then just specify overflow and maxLines properties.
To get available height, use a LayoutBuilder the provides the constrains
lineHeight = fontSize * textScaleFactor * lineHeightScaleFactor
maxlines = (available height/line height)
Example:
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Material(
child: new Column(
children: <Widget>[
new FlatButton(
child: new Container(
child: new Center(child: new Text("ABOVE")),
height: 300.0,
color: const Color.fromARGB(255, 255, 0, 0),
),
),
new Expanded(child: new LayoutBuilder(builder: (context, constrains) {
double lineScaleFactor = 1.1; // this is multiplied with fontsize to get lineHeight
TextStyle style = new TextStyle(fontSize: 16.0,height: lineScaleFactor);
double scale = 1.0;
double lineHeight = style.fontSize*scale*lineScaleFactor;
return new Container(
child: new Text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
overflow: TextOverflow.ellipsis,
style: style,
textScaleFactor: scale,
maxLines: (constrains.maxHeight ~/ lineHeight),
),
);
})),
new FlatButton(
child: new Container(
child: new Center(child: new Text("BELOW")),
height: 300.0,
color: const Color.fromARGB(255, 255, 0, 0),
),
),
],
),
);
}
}
Hope that helped!