Adds support for 'SelectableText'

[definitelyme]

Tested on Android, iOS & Web platforms.

[TjarcoKerssens]

@leisim Is it possible to merge this and publish this feature?

[definitelyme]

Hi @TjarcoKerssens, Here's a temporary workaround till it's resolved; add this to pubspec.yaml

auto_size_text:
    git:
      url: https://github.com/definitelyme/auto_size_text.git
      ref: ft/selectable-text

[esDotDev]

Can't you just use textBuilder for this?

[definitelyme]

What widget is that? There isn't a TextBuilder widget in Flutter

[schultek]

@definitelyme Thanks for this feature, I needed it in a project of mine. However I'm experiencing some weird behavior in the text wrapping.

See this example:

These are two AutoSizeText widgets in a Row, with exactly the same properties and width. The left one is the selectable version, the right side the normal version. As you see the selectable version is overflowing with the same calculated font size.

I found this issue that explains that there is a tiny extra margin with the EditableText which is used by SelectableText.

In order to fix this and correctly calculate a fitting font size, we need to account for this margin in the _checkTextFits method of _AutoSizeTextState. We need to change the textPainter.layout() call to:

if (widget._isSelectableText) {
  textPainter.layout(maxWidth: constraints.maxWidth - widget.cursorWidth - 1.0);
} else {
   textPainter.layout(maxWidth: constraints.maxWidth);
}

I tested this and it seems to work.

[definitelyme]

Nice! I didn't notice this, I'll update my PR.

[schultek]

@definitelyme Any update on this?

[PcolBP]

For me isnt working well enought. Before text will shrink SelectableText appears with Scrollbar example below: and after shrinking web container a little bit more, scroll dissapear and text is shrinked That behavior doesnt exist in just AutoSizeText. Tried with NeverScrollablePhysics and ScrollConfiguration with scrollbars: false still same effect.

Any ideas?

[schultek]

@PcolBP Is this after using the change I proposed in my comment before? If not its the same issue.

[PcolBP]

@schultek Yeah, thats it. For me was enought to set just:

maxWidth - 2;

But, I've noticed some weird behavior. A text is blurry after shrinking.

Upper text is Selectable, bottom is Text. Before:

After:

I've created own fork with customBuilders:

painterBuilder: (maxWidth) {
          return maxWidth - 2;
        },
widgetBuilder: (calculatedStyle, scaleFactor) {
          return SelectableText(
            text,
            style: calculatedStyle.copyWith(
              fontFeatures: const [FontFeature.proportionalFigures()], // Added to fix blurry text
            ),
            textAlign: TextAlign.justify,
            textScaleFactor: scaleFactor,
          );
        },

EDIT:

Issue with blurry text related to #81215

[definitelyme]

@definitelyme Any update on this?

I have updated my PR to include the fix you suggested.

[amejiarosario]

Thanks for this branch! I was going to use it, but then unfortunately overflowReplacement is not defined in AutoSizeText.selectable. Any reason for leaving it out?

[definitelyme]

@amejiarosario SelectableText does not define any overflowReplacement property.

[nilsreichardt]

Since Flutter 3.3 you can use the SelectionArea widget. See https://github.com/leisim/auto_size_text/issues/49#issuecomment-1272502090 for more details.