A visual guide to text affinity in Flutter

If you don’t crawl around the Flutter source code much you’ve probably never heard of text affinity, represented by the TextAffinity enum. It’s an interesting concept, though, and in this article I’ll try to make it easy to understand through the use of images.

The word affinity means attraction. This is referring to which part of the text the cursor (or caret as it’s sometimes called) is attracted to. To explain that, it’s first necessary to talk about text position, represented by the TextPosition class.

Text position

TextPosition has an offset property which is used for cursor location or text selection.

Left-to-right text

Take the word Hello, for example. In the image below you can see where the cursor would be for each offset of the text position:

English text is written from left to right, but languages like Arabic and Hebrew are written from right to left.

Right-to-left text

If you take the Hebrew word שלום, the offsets go in the opposite direction from English. That is, they start at the…