DropdownButtonFormField's hintText is not vertically centered if items is null or empty

[pongloongyeat]

Steps to Reproduce

1. Execute flutter run on the code sample
2. Observe that the hintText is off-centered (pushed down vertically).

Expected results: hintText should be vertically centered

Actual results: hintText is not vertically centered

Code sample

```dart // Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file // for details. All rights reserved. Use of this source code is governed by a // BSD-style license that can be found in the LICENSE file. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text("Dropdown test"), ), body: Center( child: DropdownButtonFormField( decoration: InputDecoration( border: OutlineInputBorder(), hintText: 'This hint text should be vertically centred', ), items: [], onChanged: (val) {}, ), ), ), ); } } ```

Remarks

This seems to only be true for when items == null/empty

[huycozy]

Hi @pongloongyeat You can use the supported DropdownButtonFormField's hint property as below sample code and will have expected result:

Demo


Sample code

```dart // Copyright (c) 2019, the Dart project authors. Please see the AUTHORS file // for details. All rights reserved. Use of this source code is governed by a // BSD-style license that can be found in the LICENSE file. import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( appBar: AppBar( title: Text("Dropdown test"), ), body: Center( child: DropdownButtonFormField( decoration: InputDecoration( border: OutlineInputBorder(), // hintText: 'This hint text should be vertically centred', ), items: [], hint: Align( alignment: Alignment.centerLeft, child: Text('This hint text should be vertically centred'), ), onChanged: (val) {}, ), ), ), ); } } ```

[pongloongyeat]

That does work actually but even so, I don't think it should be right for the hintText property of the decorator to have a different alignment compared to the hint property of the widget

[huycozy]

Hi @pongloongyeat, thanks for confirming.

With hintText property of the decoration, I also don't find a workaround for this currently. So, I will label this issue for further investigation/insight from the team.

This issue is reproducible on the latest stable and master channels with provided sample code.

Demo

| Android | iOS | | --------------- | --------------- | | | Web | MacOS | | --------------- | --------------- | |

flutter doctor -v

```bash [✓] Flutter (Channel stable, 3.3.2, on macOS 12.6 21G115 darwin-x64, locale en-VN) • Flutter version 3.3.2 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision e3c29ec00c (6 days ago), 2022-09-14 08:46:55 -0500 • Engine revision a4ff2c53d8 • Dart version 2.18.1 • DevTools version 2.15.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 13.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 13E113 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • 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.12+0-b1504.28-7817840) [✓] 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.71.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.48.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 12.6 21G115 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ``` ```bash [✓] Flutter (Channel master, 3.4.0-19.0.pre.406, on macOS 12.6 21G115 darwin-x64, locale en-VN) • Flutter version 3.4.0-19.0.pre.406 on channel master at /Users/huynq/Documents/GitHub/flutter_master • Upstream repository https://github.com/flutter/flutter.git • Framework revision d98b0c9c7c (30 minutes ago), 2022-09-20 23:35:24 -0400 • Engine revision 38fef0572f • Dart version 2.19.0 (build 2.19.0-223.0.dev) • DevTools version 2.17.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 14.0) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14A309 • CocoaPods version 1.11.3 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2021.2) • 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.12+0-b1504.28-7817840) [✓] 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.71.2) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.48.0 [✓] Connected device (3 available) • Pixel 3a (mobile) • 964AY0WL20 • android-arm64 • Android 12 (API 32) • macOS (desktop) • macos • darwin-x64 • macOS 12.6 21G115 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 105.0.5195.125 [✓] HTTP Host Availability • All required HTTP hosts are available • No issues found! ```

[flutter-triage-bot[bot]]

This issue is assigned but has had no recent status updates. Please consider unassigning this issue if it is not going to be addressed in the near future. This allows people to have a clearer picture of what work is actually planned. Thanks!

[hasanmhallak]

happens in flutter v3.13.6 as well

[ecv-arloubeloria]

My workaround here is to display a DropdownMenuItem that shows the HintText if the items are empty.

items: items.isEmpty ? [ DropdownMenuItem( child: Text( widget.hintText!, ), ), ] : Your list of dropdowns

[darkomenx]

Same issue for me. It seems that hintText disappear if error and I don't find how to however keep hintText. @ecv-arloubeloria : for me, items it never empty even if nothing selected options or error. Hence it's not resolve issue for me.

For resolve this, we need to change the look of the widget when error throw (not just the validator property).

[JoyEnergiser]

still having this issue on latest flutter 3.22

[Jayasubin]

@huycozy, is it really necessary to wrap the Text inside Align? Mine works well even without that!

[Cuiboy]

I believe this PR disables the hintStyle parameter. For example, if I set a custom color for the hint text using hintStyles, the color wouldn't apply.

Any workarounds?

[bleroux]

@Cuiboy Can you file a new issue with a minimal example to reproduce the problem you observed? :pray:

[github-actions[bot]]

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 flutter doctor -v and a minimal reproduction of the issue.