Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🐛 Incorrect vertical text alignment in NumberBox when no suffix is present #1150

Closed
diluculo opened this issue Dec 3, 2024 · 0 comments · Fixed by #1156
Closed

🐛 Incorrect vertical text alignment in NumberBox when no suffix is present #1150

diluculo opened this issue Dec 3, 2024 · 0 comments · Fixed by #1156
Labels
bug Something isn't working

Comments

@diluculo
Copy link
Contributor

diluculo commented Dec 3, 2024

Describe the bug
The text input shows incorrect vertical alignment when NumberBox has no suffix widgets (e.g., when ClearButton = false and mode = SpinButtonPlacementMode.none). The text appears slightly shifted upward compared to the focused state, creating an inconsistent appearance.

To Reproduce
Steps to reproduce the behavior:

  1. Create a NumberBox with the following configuration:
    NumberBox(
      clearButton: false,
      mode: SpinButtonPlacementMode.none,
      // ... other properties
    )
  2. Observe the text alignment in both focused and unfocused states
  3. Notice the text is not vertically centered when unfocused

Expected behavior
Text should remain vertically centered in both focused and unfocused states

Screenshots
image

Additional context
This issue appears to be related to #1027, where TextBox's vertical alignment depends on the presence of decorations:

TextAlignVertical get _textAlignVertical {
  if (widget.textAlignVertical != null) {
    return widget.textAlignVertical!;
  }
  return _hasDecoration ? TextAlignVertical.center : TextAlignVertical.top;
}

When NumberBox has no suffix widgets, no decorations are present, causing the alignment to default to TextAlignVertical.top. If this behavior is not intentional, it would be better to modify this logic to maintain consistent vertical centering, especially for NumberBox use cases.

Simple solution by directly setting textAlignVertical in NumberBox:

final child = TextBox(
  key: _textBoxKey,
  // ...
  textAlign: widget.textAlign ?? TextAlign.start,
  textAlignVertical: TextAlignVertical.center,  // This ensures consistent centering
  // ...
);
@bdlukaa bdlukaa added the bug Something isn't working label Dec 3, 2024
@bdlukaa bdlukaa mentioned this issue Dec 13, 2024
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants