How to knows where TextWidget will wrap? - flutter

Question

When using Text widget with big strings, it happens that the displayed text is splitted on 2 or more lines.
My question is simple : How to know the exact character where a string is divided ?
I've digged inside Text code. Up to dart:ui's Paragraph. But I haven't found anything usable.

Answer 1

Actually the text in flutter is painted on canvas using a TextPainter which computes the layout size during runtime with the box constrains of its parent class. If you already know the available space, you can compute the layout width of the text and compare it with the available width to know where the text would break.
You can computer the width of the text with TextPainter like:
final TextPainter paint = new TextPainter(
text: new TextSpan(
text: "Hello World",
),
textDirection: TextDirection.ltr
);
paint.layout();
debugPrint(paint.width.toString());
You can also do it with CustomPainter like this:
import 'package:flutter/material.dart';
void main() {
String text = "Hello World";
void textShownOnUI(int size){
debugPrint(text.substring(0,size));
}
runApp(new MaterialApp(
title: "Example",
home: new Container(
width: 100.0,
padding: const EdgeInsets.all(175.0),
child: new CustomPaint(
painter: new MyTextWidget(
text: text,
style: new TextStyle(),
notifySize: textShownOnUI
),
child: new Container(),
),
),
));
}
class MyTextWidget extends CustomPainter {
Function notifySize;
String text;
TextStyle style;
TextDirection direction;
MyTextWidget({this.text,this.notifySize,this.style,this.direction});
#override
void paint(Canvas canvas, Size size){
debugPrint(size.width.toString());
final TextPainter _painterWithConstrains = new TextPainter(
text: new TextSpan(
text: text,
style: style
),
textDirection: direction??TextDirection.ltr
);
String _willBeShownOnUI = text;
int _size = text.length;
TextPainter _temp = new TextPainter(
text: new TextSpan(
text: _willBeShownOnUI,
style: style
),
textDirection: direction??TextDirection.ltr
);
_painterWithConstrains.layout(maxWidth: size.width);
_temp.layout();
while(_temp.width > _painterWithConstrains.width && _size != 0){
debugPrint(_temp.width.toString()+" "+ _size.toString());
_willBeShownOnUI = _willBeShownOnUI.substring(0, --_size);
_temp = new TextPainter(
text: new TextSpan(
text: _willBeShownOnUI,
style: style
),
textDirection: direction??TextDirection.ltr
);
_temp.layout();
}
_size = _willBeShownOnUI.split(" ")[0].length; // Get complete words that will be shown
Function.apply(notifySize,<int>[_size]);
_painterWithConstrains.paint(canvas, Offset.zero);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
Hope that helped!