[SuperTextField] Fix horizontal aligment (Resolves #668)

[angelosilvestre]

[SuperTextField] Fix horizontal aligment. Resolves #668

Horizontal alignment was not working, as shown in #509

There are two different situations:

Multiline text fields: The RenderParagraph has a maxWidth constraint. In Flutter TextPainter, when maxWidth differs from minWidth, it layouts the paragraph again using maxIntrinsicWidth as maxWidth, so the RenderParagraph doesn't use all the available width and the alignment doesn't work as expected. As a result, the scrollbar is displayed next to the text instead of being displayed at the right edge of the text field.

The relevant lines are here:

https://github.com/flutter/flutter/blob/ca6cecf034d9c18fcb6ea70309cc855e353aa0f8/packages/flutter/lib/src/painting/text_painter.dart#L630-L652

I wrapped SuperText with a SizedBox with infinity maxWidth, so it forces the RenderParagraph to use all available width.

Singleline text fields: The text field has a horizontal scrollview, which gives an infinity maxWidth to RenderParagraph. In this case, wrapping with the SizedBox won't help.

I wrapped the SingleChildScrollView with an Align widget, with an alignment based on the text alignment.

[matthew-carroll]

@angelosilvestre I didn't quite follow the explanation in the PR. Specifically, I'm wondering why alignment used to work, but it doesn't any more. My guess is that the super_text_layout work broke it. But that still begs the question: what was the change that broke it, and if that change was in super_text_layout, should we change super_text_layout instead of adding more widgets to SuperTextField?

[angelosilvestre]

@matthew-carroll The main problem is that, to be able to respect the text alignment, SuperText needs to take all available width. Instead, it takes only its maxIntrinsicWidth (this is done in TextPainter).

Because of this, the text is aligned only within SuperText's bounds, and not within SuperTextField's bounds.

The alignment stopped working in b2e0dc7, although center alignment of a single line text field wasn't working before that.

The text was being displayed inside a _FillWidthIfConstrained. The alignment was working because, with this widget, the text was taking all the available width.

In b2e0dc7, the text was wrapped with a IntrinsicWidth, which caused the text to stop taking all the available width.

I can try to avoid using the Align widget, but I think we still need to use a SizedBox or reimplement _FillWidthIfConstrained.

[matthew-carroll]

Let's bring back _FillWidthIfConstrained along with a doc comment that explains why we need it. I probably deleted it because I couldn't remember why we were using it, and we didn't have any tests that failed.

[angelosilvestre]

@matthew-carroll I implemented FillWidthIfConstrained a bit differently because it was causing problems when using computeDryLayout (even implementing computeDryLayout on RenderSuperTextLayout).

I checked it again, and the text alignment was working with _FillWidthIfConstrained only when SuperTextField was multiline.

I think we still need to use Align (or something similar). When SuperTextField is single line, it has a horizontal SingleChildScrollView. Because of this, it has an infinity maxWidth, so we can't force the text to take the available width.

We also can't position the text inside the scrollview.

[matthew-carroll]

@angelosilvestre it looks like this PR has conflicts

[angelosilvestre]

@matthew-carroll I resolved the conflits.

[matthew-carroll]

Is there a reason that this property is given an initial value of 0? It looks like the constructor always assigns an initial value.

[angelosilvestre]

This initialization isn't needed. I removed it.

[matthew-carroll]

Please add a dart doc that explains what viewport this is, and why we care.

[angelosilvestre]

I also changed the property name to make it more clear.

[matthew-carroll]

Do we care whether the viewport scrolls vertically vs horizontally?

[angelosilvestre]

We only care about horizontal scrollables.

[matthew-carroll]

LGTM