flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
166.37k stars 27.55k forks source link

Height of TextField decreases when using OutlineInputBorder and label #158584

Open lisaerikssonw opened 5 days ago

lisaerikssonw commented 5 days ago

Steps to reproduce

  1. Run the provided code example using border type UnderlineInputBorder as enabledBorder. Notice that the height adapts to the height of the SizedBox.
  2. Change the border type from UnderlineInputBorder to OutlineInputBorder, and the height will decrease.
  3. Note: this only seems to be reproducable if the TextField has a label. When removing the label, the height doesn't change when switching border types.

Only tested on Linux desktop.

Expected results

When changing the enabledBorder of InputDecoration from UnderlineInputBorder to OutlineInputBorder, I expect the height of the TextField to stay the same (200).

Actual results

The height decreases when changing from UnderlineInputBorder to OutlineInputBorder.

Code sample

Code sample ```dart void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(), ); } } class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @override Widget build(BuildContext context) { return const Scaffold( body: Center( child: SizedBox( width: 300, height: 200, child: TextField( decoration: InputDecoration( fillColor: Color.fromARGB(255, 142, 163, 118), filled: true, label: Text('Label'), enabledBorder: OutlineInputBorder( borderSide: BorderSide( color: Color.fromARGB(255, 79, 92, 64), ), ), contentPadding: EdgeInsets.symmetric(vertical: 20, horizontal: 10), ), ), ), ), ); } } ```

Screenshots or Video

Screenshots / Video demonstration [Upload media here]

Logs

Logs ```console [Paste your logs here] ```

Flutter Doctor output

Doctor output ```console [✓] Flutter (Channel stable, 3.24.3, on Ubuntu 22.04.4 LTS 6.8.0-48-generic, locale en_US.UTF-8) • Flutter version 3.24.3 on channel stable at /home/lier/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 2663184aa7 (9 weeks ago), 2024-09-11 16:27:48 -0500 • Engine revision 36335019a8 • Dart version 3.5.3 • DevTools version 2.37.3 [✗] Android toolchain - develop for Android devices ✗ Unable to locate Android SDK. Install Android Studio from: https://developer.android.com/studio/index.html On first launch it will assist you in installing the Android SDK components. (or visit https://flutter.dev/to/linux-android-setup for detailed instructions). If the Android SDK has been installed to a custom location, please use `flutter config --android-sdk` to update to that location. [✓] Chrome - develop for the web • Chrome at google-chrome [✓] Linux toolchain - develop for Linux desktop • Ubuntu clang version 14.0.0-1ubuntu1.1 • cmake version 3.22.1 • ninja version 1.10.1 • pkg-config version 0.29.2 [!] Android Studio (not installed) • Android Studio not found; download from https://developer.android.com/studio/index.html (or visit https://flutter.dev/to/linux-android-setup for detailed instructions). [✓] VS Code (version 1.95.1) • VS Code at /snap/code/current/usr/share/code • Flutter extension version 3.100.0 [✓] Connected device (2 available) • Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.4 LTS 6.8.0-48-generic • Chrome (web) • chrome • web-javascript • Google Chrome 127.0.6533.119 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 2 categories. ```
huycozy commented 4 days ago

Hi @lisaerikssonw Can you provide the actual height you observed?

I checked this on Linux (Ubuntu distro), Android and macOS apps but the height stays 200 as expected (inspect height via Flutter Devtools)

lisaerikssonw commented 4 days ago

Hello, The height of the SizedBox doesn't change, but the _BorderContainer>CustomPaint>renderObject>size of the Textfield changes from Size(300.0, 72.0) to Size(300.0, 56.0) when I switch between the different border types.

OutlineInputBorder: Screenshot from 2024-11-14 13-09-58

UnderlineInputBorder: Screenshot from 2024-11-14 13-11-40

huycozy commented 4 days ago

Thanks for making it more evident. Observed the similar result as above on macOS and Android app targets and on Flutter master channel 3.27.0-1.0.pre.511.