Flutter Text Rendering
- Getting Started
- A Journey Through the Framework
- Stepping in: The Text Widget
- Stepping Down: Text Rendering Objects
- Way Down: Flutter’s Text Engine
- Stepping Up Your Game: Building a Custom Text Widget
- Custom Render Object
- Calculating and Measuring Text Runs
- Laying Out Runs in Lines
- Setting the size
- Painting Text to the Canvas
- Where to Go From Here?
Have you ever ridden a camel over the silent Gobi or sipped tea in a nomad’s tent? Just click the link below to enjoy this once in a lifetime opportunity. This is a limited time offer so act now while tickets last!
Just kidding. :]
This isn’t a travel site, but I will be taking you on an exciting journey to an exotic corner of the Flutter framework: text rendering. It seems so simple at first glance. Just ABC, right? Yet untold complexities lie beneath.
By the end of this tutorial you’ll:
- See the relationship between widgets, elements, and render objects.
- Explore what lies behind the
- Make your own custom text widget.
Download the starter project by clicking the Download Materials button at the top or bottom of the page. This time I’m not kidding about clicking the link. Do you think you learn more by watching a travel show on TV or by actually getting on a plane and going there? Your best bet is to download the starter project and follow along.
A Journey Through the Framework
As a Flutter developer, you’re already quite familiar with stateless and stateful widgets, but they’re not the only ones. Today you’re going to learn a little about a third kind,
RenderObjectWidget, and the low level classes of the Flutter framework that support it.
The following diagram shows the
Widget subclasses, where the ones in blue are the ones I want to focus on most in this lesson.
RenderObjectWidget is a blueprint. It holds the configuration information for
RenderObject, which does all the hard work of hit testing and painting the UI.
The following diagram shows some of the subclasses of
RenderObject. The most common one is
RenderBox, which defines a rectangular area of the screen to paint on. One of its many subclasses,
RenderParagraph, is what Flutter uses to paint text.
Guess what? In just a bit, you’re going to make your very own render paragraph from scratch. I know, I can’t wait either!
As you know, layouts in Flutter are made by composing widgets into trees. Behind the scenes there is a corresponding render object tree. But widgets and render objects don’t know how to interact with each other. Widgets can’t make a render object tree, and render objects don’t know when the widget tree changes.
That’s where elements come in. There is a corresponding element tree that has an
Element for every
Widget in the widget tree. The elements hold a reference to both the widgets and the corresponding render objects. They are the managers or intermediaries between the widgets and the render objects. Elements know when to create render objects, where to put them in a tree, how to update them when there are changes, and when to inflate (create) new elements from child widgets.
The following diagram shows the main
Element subclasses. Every widget has a corresponding element, so you’ll notice the similarity in names to the
BuildContext? That’s really just a nickname for
Element. Or to put it more technically,
BuildContext is an abstract class that
The explanation above was my tour bus talk on the way to our destination. Let’s get out of the bus now and have a walk down to see a real-life example.
Stepping in: The Text Widget
You’re going to step into the Flutter source code now to see how widgets, elements, and render objects are actually used. You’ll follow a
Text widget all the way to the creation of its render object, that is,
Don’t worry, I’ll stay with you all along the way.
Open your starter project in Android Studio 3.4 or later (with the Flutter plugin installed) and run it. You’ll need to first run
flutter pub get to get your project dependencies. In Android Studio, you can do so using the Get dependencies popup you see after opening the project.
After running the app, you should see the welcome page of a travel app called Steppe Up with the text TRAVEL MONGOLIA at the bottom.
Stop the app now.
In lib/main.dart, scroll to the bottom and find the TODO: Start your journey here line:
child: Text( // TODO: Start your journey here
The widget tree here has an
Align widget with a
Text widget child. As you step through the source code, you can refer to the diagram below:
Perform the following steps:
- Command-click (or Control-click on a PC) Text to go to the widget’s source code definition. Note that
Textis a stateless widget.
- Scroll down to the
buildmethod. What does the method return? Surprise! It’s a
RichTextwidget. It turns out that
- Command-click RichText to go to its source code definition. Note that
MultiChildRenderObjectWidget. Why multi-child? In previous versions of Flutter before 1.7, it actually used to be a
LeafRenderObjectWidget, which has no children, but now
RichTextsupports inline widgets with widget spans.
- Scroll down to the
createRenderObjectmethod. There it is. This is where it creates
- Add a breakpoint to the return RenderParagraph line.
- Run the app again in debug mode.
In Android Studio if you have the Debug and Variables tabs selected, you should see something similar to the following:
You should also have the following stack trace with these lines at the top. I added the widget or element type in parentheses. The numbers on the far right refer to the comments below.
RichText.createRenderObject (RichText) // 8
RenderObjectElement.mount (RichText) // 7
Element.inflateWidget (Text) // 6
ComponentElement.performRebuild (Text) // 5
ComponentElement.mount (Text) // 4
Element.inflateWidget (Align) // 3
Element.updateChild (Align) // 2
SingleChildRenderObjectElement.mount (Align) // 1
Let’s follow how
RenderParagraph was created. You won’t click every line, but starting at the 12th line from the top:
- Click SingleChildRenderObjectElement.mount. You are in the element for the
Alignwidget. In your layout the child of
Textwidget. So the
widget.childthat is getting passed into
- Click Element.updateChild. At the end of a long method your
newWidget, is being passed into
- Click Element.inflateWidget. Inflating a widget means creating an element from it, as you can see happens with Element newChild = newWidget.createElement(). At this point you are still in the
Alignelement, but you are about to step into the
mountmethod of the
Textelement that was just inflated.
- Click ComponentElement.mount. You are now in the
Textelement. Component elements (like
StatelessElement) don’t create render objects directly, but they create other elements, which will eventually create render objects.
- The next exciting thing is a few methods up the stack trace. Click ComponentElement.performRebuild. Find the built = build() line. That right there, folks, is where the
buildmethod of the
Textwidget gets called.
StatelessElementuses a setter to add a reference to itself as the
builtvariable is your
- Click Element.inflateWidget. This time
RichText, and it’s used to create a
MultiChildRenderObjectElement. You’re still in the
Textelement, but you’re about to step into the
mountmethod of the
- Click RenderObjectElement.mount. Will you look at that? What a beautiful sight: widget.createRenderObject(this). Finally, this is where
RenderParagraphgets created. The argument
MultiChildRenderObjectElementthat you are in.
- Click RichText.createRenderObject. And here you are out the other side. Notice that the
MultiChildRenderObjectElementwas rebranded as
Is anyone tired? Since you are at a breakpoint, why don’t you take a break and drink some water. There are still a lot of great things to see and do.