What does TextDirection really do in Flutter

Question

What difference does using TextDirection make. It's required all over the place in Flutter but the purpose isn't clear.

For example, given the following code:

const text = 'Hello';
final textSpan = const TextSpan(
  text: text,
  style: TextStyle(fontSize: 50, color: Colors.black),
);

final TextPainter textPainter = TextPainter()
  ..textDirection = TextDirection.ltr
  ..text = textSpan
  ..layout();
textPainter.paint(canvas, Offset(0, 0));

The text direction is set to TextDirection.ltr. This prints Hello.

However, setting the text direction to TextDirection.rtl doesn't give olleH. It's still Hello. So what is the purpose of TextDirection?

Answer 1

TextDirection doesn't change the order of characters within left-to-right (LTR) text like English or Russian. Neither does it change the order of characters within right-to-left (RTL) text like Arabic or Hebrew.

What TextDirection does is changes the order blocks of LTR and RTL text when they occur in the same string, that is, as bidirectional text.

You can see this in the following example:

const text = 'Hello שלום';

That string contains both LTR text (Hello) and also RTL text (שלום). The LTR text comes at the beginning of the string. So when you are in an LTR environment Hello should be painted on the left (first) and שלום on the right (last).

Indeed, you can observe this to be true:

const text = 'Hello שלום';
final textSpan = const TextSpan(
  text: text,
  style: TextStyle(fontSize: 30, color: Colors.black),
);
final TextPainter textPainter = TextPainter()
  ..textDirection = TextDirection.ltr  //       <-- LTR
  ..text = textSpan
  ..layout();
textPainter.paint(canvas, Offset(0, 0));

This results in:

But change the direction to TextDirection.rtl and you'll get the following result:

The Hello is still first but since the environment is RTL now, this means first is on the right. The שלום is still last but now last is on the left. Interestingly, the space is maintained between them.