Textfield vertical alignment center off with outline input border #124852
Description
Is there an existing issue for this?
- I have searched the existing issues
- I have read the guide to filing a bug
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
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
contentPadding: EdgeInsets.fromLTRB(0, 10, 0, 10),
isDense: true,
),
textAlignVertical: TextAlignVertical.center,
)),
),
);
}
}
´
Expected
Code example
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: TextField(
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.fromLTRB(0, 10, 0, 10),
isDense: true,
),
textAlignVertical: TextAlignVertical.center,
)),
),
);
}
}
´
Screenshots or Video
Screenshots / Video demonstration
Expected
Actual
Logs
No response
Flutter Doctor output
Doctor output
PS D:\Entwicklung\Flutter\flutter_jvx> flutter doctor -v
[√] Flutter (Channel stable, 3.7.10, on Microsoft Windows [Version 10.0.19044.2846], locale de-AT)
• Flutter version 3.7.10 on channel stable at C:\tools\Flutter\Flutter_aktuell
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 4b12645012 (10 days ago), 2023-04-03 17:46:48 -0700
• Engine revision ec975089ac
• Dart version 2.19.6
• DevTools version 2.20.1
[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)
[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at C:\Users\theiss\AppData\Local\Android\sdk
• Platform android-33, build-tools 31.0.0
• Java binary at: C:\tools\Android Studio\jre\bin\java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe
[X] Visual Studio - develop for Windows
X Visual Studio not installed; this is necessary for Windows development.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2020.3)
• Android Studio at C:\tools\Android Studio
• 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.10+0-b96-7249189)
[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19044.2846]
• Chrome (web) • chrome • web-javascript • Google Chrome 111.0.5563.148
• Edge (web) • edge • web-javascript • Microsoft Edge 111.0.1661.44
[√] HTTP Host Availability
• All required HTTP hosts are available
! Doctor found issues in 2 categories.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 with TextAlignVertical.center.