Flutter Line Metrics

The ability to do low level text rendering is improving.

A few months ago I wrote My first disappointment with Flutter, where I lamented that most of the low level text painting tools in Flutter were hidden from the developer in the native layer. The Flutter team responded to that article and since then Gary Qian has been hard at work. His first step has been to expose more of the line metrics in Dart. In this article I’ll explore what those look like.

Update: In the original version on this article, you needed to use the master branch of Flutter, but LineMetrics is available in the stable branch now.

What are the Line Metrics

There is a new LineMetrics class that provides information about individual lines from a Flutter Paragraph that has been laid out. Here it is with the constructor and comments removed:

class LineMetrics {
  final bool hardBreak;
  final double ascent;
  final double descent;
  final double unscaledAscent;
  final double height;
  final double width;
  final double left;
  final double baseline;
  final int lineNumber;
}

• hard break: Whether the line ends with a new line char like \n.
• ascent: The distance from the baseline to the top of the line.
• descent: The distance from the baseline to the…