Fixed `Cursor` overriding `HintText`

IVLIVS-III commented 1 year ago

Since the introduction of a Cursor in version 3.2.0, if enabled said Cursor would override any HintText due to them being displayed in the same location on screen (both centered in the box). This PR addresses that issue and proposes a solution that can display both a Cursor and HintText at the same time.

premises

Cursor and HintText should coexist and be displayed at the same time
for visual integrity, entering a character and changing visual focus to the next pin field should lead to only minimal changes
HintText should not have a different position with/without Cursor
HintText should be displayed in the center of the box
Cursor should not be displayed in the center of the box if a HintText is also present
Cursor should be displayed in front of HintText or behind
Cursor typically is (on input fields with left-justified text) after already typed characters
HintText typically is displayed only when no characters have been entered yet
Cursor should be displayed in front of the HintText at least with TextDirection.ltr

proposed fix

for minimal disruption in the existing codebase, this fix proposes to add an optional positional parameter Offset offset with a default value of Offset.zero
the offset would be added to the location given by rect prior to drawing
on TextDirection.ltr the Cursor is drawn to the left of HintText, on TextDirection.rtl it is drawn to the right

side effects

a TextDirection parameter was added

TinoGuo commented 1 year ago

Hi @IVLIVS-III , thx for raising it, can u attach the proposal video?

IVLIVS-III commented 1 year ago

@TinoGuo do you mean a screen-recording of how it looks when both Cursor and HintText are provided?

TinoGuo commented 1 year ago

@IVLIVS-III yes, from what i check from the code, CWIIW it seems append the cursor after the hint text

IVLIVS-III commented 1 year ago

@TinoGuo I can provide a screen recording in a couple of hours, currently I'm not in my dev environment.

But with TextDirection set to TextDirection.ltr (default) the Cursor will be displayed in front of (i.e. to the left of) HintText since the positive Offset of half the HintText width is subtracted in lines 31 and 32 of lib/src/cursor/cursor_painter.dart.

Edit: if this way of applying the Offset seems to you to be "backwards" I can gladly change that as well to then adding a negative Offset

IVLIVS-III commented 1 year ago

@TinoGuo here is a screen recording. I hope it shows everything you would like to see: https://user-images.githubusercontent.com/48645716/189208615-708d2e21-cadb-4456-8952-af77b449cf01.mov

TinoGuo commented 1 year ago

yeah, it looks awesome, I will review it soon. thx again

IVLIVS-III commented 1 year ago

pipeline should be successful now, right?

TinoGuo commented 1 year ago

actually not work unless rebase it. but the root cause is not from PR, i approved it and merge it.

TinoGuo / pin_input_text_field