-
Notifications
You must be signed in to change notification settings - Fork 26.9k
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
Textfield vertical alignment center off with outline input border #124852
Comments
First mentioned: #124789 (comment) |
I can reproduce this issue with the code sample provided above with
|
Hi @ToniHeiss contentPadding 10
contentPadding 30
flutter doctor -v (stable and master)[✓] Flutter (Channel stable, 3.7.12, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
• Flutter version 3.7.12 on channel stable at /Users/huynq/Documents/GitHub/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4d9e56e694 (2 days ago), 2023-04-17 21:47:46 -0400
• Engine revision 1a65d409c7
• Dart version 2.19.6
• DevTools version 2.20.1
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-33, build-tools 32.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
• IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.77.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.62.0
[✓] Connected device (3 available)
• SM T225 (mobile) • R9JT3004VRJ • android-arm64 • Android 13 (API 33)
• macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.137
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found! [!] Flutter (Channel master, 3.10.0-12.0.pre.29, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
• Flutter version 3.10.0-12.0.pre.29 on channel master at /Users/huynq/Documents/GitHub/flutter_master
! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 60077ff979 (16 hours ago), 2023-04-23 07:09:16 -0400
• Engine revision fcf46af2d3
• Dart version 3.1.0 (build 3.1.0-35.0.dev)
• DevTools version 2.23.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-33, build-tools 32.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio Flamingo.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Android Studio Flamingo.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
• IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.77.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.62.0
[✓] Connected device (3 available)
• SM T225 (mobile) • R9JT3004VRJ • android-arm64 • Android 13 (API 33)
• macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.137
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category. Can you please point out/highlights the difference in this? |
If you use my code example and look at the boundaries of the RepaintBoundary, it should be visible. Otherwise, look at the Offset of the RepaintBoundary of the text. If it equals your padding you set for top and bottom, it is correct. For me when I set top padding to 8 and bottom to 8, then the RepaintBoundary of the textfield is offset by 7 top and not 8. |
Sorry for making yet another comment, but I must say I find it very interessting how 30 as top and bottom padding results in dramatically less padding with OutlineInputBorder, if compared to InputBorder.none . |
Code example
´ |
Thanks for providing more information. This can be easily noticed when inspecting the RepaintBoundary. Updating label corresponding to Flutter version. flutter doctor -v (stable and master)[✓] Flutter (Channel stable, 3.7.12, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
• Flutter version 3.7.12 on channel stable at /Users/huynq/Documents/GitHub/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4d9e56e694 (2 days ago), 2023-04-17 21:47:46 -0400
• Engine revision 1a65d409c7
• Dart version 2.19.6
• DevTools version 2.20.1
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-33, build-tools 32.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
• IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.77.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.62.0
[✓] Connected device (3 available)
• SM T225 (mobile) • R9JT3004VRJ • android-arm64 • Android 13 (API 33)
• macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.137
[✓] HTTP Host Availability
• All required HTTP hosts are available
• No issues found! [!] Flutter (Channel master, 3.10.0-12.0.pre.47, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
• Flutter version 3.10.0-12.0.pre.47 on channel master at /Users/huynq/Documents/GitHub/flutter_master
! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision d23dba223c (35 minutes ago), 2023-04-25 00:12:18 -0400
• Engine revision 8fe8e94c02
• Dart version 3.1.0 (build 3.1.0-38.0.dev)
• DevTools version 2.23.1
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[✓] Android toolchain - develop for Android devices (Android SDK version 32.0.0)
• Android SDK at /Users/huynq/Library/Android/sdk
• Platform android-33, build-tools 32.0.0
• ANDROID_HOME = /Users/huynq/Library/Android/sdk
• Java binary at: /Applications/Android Studio Flamingo.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14E222b
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 2022.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
[✓] Android Studio (version 2022.2)
• Android Studio at /Applications/Android Studio Flamingo.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
• IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
[✓] VS Code (version 1.77.3)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.62.0
[✓] Connected device (3 available)
• SM T225 (mobile) • R9JT3004VRJ • android-arm64 • Android 13 (API 33)
• macOS (desktop) • macos • darwin-x64 • macOS 13.0.1 22A400 darwin-x64
• Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.137
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category. |
My app is also experiencing this issue. Google internal bug b/320677865 |
The text now should be positioned 1 pixel lower now with outline border. |
This still isn't quite right. #142342 fixed cases in our app where we manually apply an |
The text line box is centered within the input decorator, but for some reason the glyphs are shifted up when |
I think the input border issue should be fixed now. The input box is now vertically centered. Opened #142969 for the text alignment issue. |
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
Is there an existing issue for this?
Steps to reproduce
If you have a textfield with an outlineInputBorder and use textAlignVertical.center the textfield baseline is actually off by a few pixels. Sometimes it is just one, but with higher paddings it it can sometimes be a few.
e.g.
isDense: True, Border: OutlineInputBorder, contentPadding: (0, 10, 0, 10); textAlignVertical: center
Expected results
A centered text
Actual results
A centered text that is one pixel higher than really centered.
Code sample
Actual
Code example
´
Expected
Code example
´
Screenshots or Video
Screenshots / Video demonstration
Expected
Actual
Logs
No response
Flutter Doctor output
Doctor output
As you can see, without an
OutlineInputBorder
, the text baseline is correctly centered. Having one suddenly shifts the text upwards by a small amount. Even withTextAlignVertical.center
.The text was updated successfully, but these errors were encountered: