How text editing works internally in Flutter

For people who like to dive into the details

Since Flutter only supports horizontal text layouts, I’ve had to do a lot of digging into the source code of its text rendering system as I create vertical text widgets for traditional Mongolian. In this article I’ll share what I’ve discovered about how text editing widgets work in Flutter.

Before diving into that, though, let’s first review how the Text widget works.

Text rendering

Usually all we see of the Text widget is something like this:

Text(
  'Hello world',
  style: TextStyle(fontSize: 30),
),

However, there are many layers below that.

Widgets layer

When you use a Text widget, what it actually creates is a RichText widget.

Unlike Text, which takes a String as the data parameter, RichText takes a TextSpan (or more precisely an InlineSpan, but more on that in a minute). A TextSpan needs both a String and a TextStyle, so before Text can create RichText it takes whatever TextStyle you give it and combines that with the app default TextStyle, which Text gets from its BuildContext. Here’s a more detailed version of the image above:

Since Text only takes a single string and style as a parameter, the entire string that it gives in the TextSpan to RichText will have only a single style. The TextSpan class is interesting, though, because like a multi-child widget, it can take more text spans as children. That means you can use it to build a whole tree of text spans, where each node potentially has a string and a style.

That’s hard to reason about, though, so you usually just have a single parent TextSpan with a bunch of children.

This you can pass in to the Text.rich constructor or directly to the RichText widget. If you pass it directly to the RichText widget, though, the…