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: