How can I know the string length of each line in Text? - flutter

Question

I want to create a text widget which has a 'see more' function. I want to get the string length in third line so I can do the substring.
The following code is what I have so far:
class ExpandedTextState extends State<ExpandedTextWidget> {
String firstHalf;
String secondHalf;
bool flag = true;
#override
void initState() {
super.initState();
TextPainter textPainter = new TextPainter();
textPainter.maxLines = 3;
textPainter.text = TextSpan(text: widget.text);
textPainter.textDirection = TextDirection.ltr;
textPainter.layout(maxWidth: double.infinity , minWidth: 0.0);
if(textPainter.didExceedMaxLines){
firstHalf = widget.text.substring(0, 50); //substring here
secondHalf = widget.text.substring(50, widget.text.length);
}else{
firstHalf = widget.text;
secondHalf = "";
}
}
#override
Widget build(BuildContext context) {
return new Container(
padding: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 10.0),
child: secondHalf.isEmpty
? new Text(firstHalf)
: Container(
child: new RichText(
text: TextSpan(children: [
TextSpan(
text: flag ? (firstHalf + "...") : (firstHalf + secondHalf),
style: TextStyle(fontSize: 13, color: Colors.amber),),
TextSpan(
text: flag ? "see more" : "",
style: TextStyle(fontSize: 13, color: Colors.black),
recognizer: new TapGestureRecognizer()
..onTap = () {
setState(() {
flag = !flag;
});
}),
]),
),
)
);
}
}
How can I know the string length in each line, or how can I know the last offset of the third line?

Answer 1

If you want a component that expands the text and starts wih only three lines i would suggest to use a simple approach , if you want to know the offset you would need to know the font dimensions, the screen dimensions, the font weight, the device orientation.
Flutter itself can't give you that, it would be kinda hard to implement..
But, if you want a text of 3 lines that expands when you click "see more" and if it's expanded "see more" dissapears, you can use this approach
class ExpandableText extends StatefulWidget {
#override
_ExpandableTextState createState() => _ExpandableTextState();
}
class _ExpandableTextState extends State<ExpandableText> {
final String text =
'ppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppppp';
bool isExpanded = false;
#override
Widget build(BuildContext context) {
return isExpanded
? Text(text + text + text,
style: TextStyle(fontSize: 13, color: Colors.amber))
: Column(children: <Widget>[
Text(text + text + text,
maxLines: 3,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 13, color: Colors.amber)),
GestureDetector(
onTap: () => setState(() => isExpanded = true),
child: Text('See More...',
style: TextStyle(fontSize: 13, color: Colors.black)))
]);
}
}
in that component we use a maxlines property to tell if the text is expanded or not, if it is , it's null , if it's not, it's 3