DropdownButtonFormField arrow icon is misaligned vertically

Steps to reproduce

Run sample
Observe dropdown icon is aligned to where the content would be instead of the field as a whole

Expected results

The dropdown icon should be vertically centered within the form field.

Actual results

The dropdown icon is centered vertically relative to the selected content.

Code sample

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: SizedBox(
                width: 200,
                child: DropdownButtonFormField<String>(
                  onChanged: (_) {},
                  decoration: InputDecoration(
                    labelText: 'Label text',
                  ),
                  items: [
                    DropdownMenuItem(
                      value: 'selected',
                      child: Text('Selected item'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Screenshots or Video

Screenshots / Video demonstration

Flutter:

M3 Design:

Logs

N/A

Flutter Doctor output

Doctor output

[!] Flutter (Channel [user-branch], 3.27.0-1.0.pre.87, on Microsoft Windows [Version 10.0.22631.4317], locale en-US)
    ! Flutter version 3.27.0-1.0.pre.87 on channel [user-branch] at C:\Users\bscho\.puro\envs\master\flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
    ! Warning: `flutter` on your path resolves to C:\Users\bscho\.puro\envs\stable\flutter\bin\flutter, which is not inside your current Flutter SDK checkout at C:\Users\bscho\.puro\envs\master\flutter. Consider adding       
      C:\Users\bscho\.puro\envs\master\flutter\bin to the front of your path.
    ! Warning: `dart` on your path resolves to C:\Users\bscho\.puro\envs\stable\flutter\bin\dart, which is not inside your current Flutter SDK checkout at C:\Users\bscho\.puro\envs\master\flutter. Consider adding
      C:\Users\bscho\.puro\envs\master\flutter\bin to the front of your path.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
    • Framework revision 9bb056822e (62 minutes ago), 2024-10-16 22:52:18 -0400
    • Engine revision e2188ee9ab
    • Dart version 3.6.0 (build 3.6.0-334.2.beta)
    • DevTools version 2.40.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.

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
    • Android SDK at C:\Users\bscho\AppData\Local\Android\sdk
    • Platform android-35, build-tools 35.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • CHROME_EXECUTABLE = C:\Program Files\BraveSoftware\Brave-Browser\Application\brave.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.11.4)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.11.35312.102
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2023.2)
    • Android Studio at C:\Program Files\Android\Android Studio1
    • 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.9+0--11185874)

[√] Android Studio (version 2022.3)
    • Android Studio at C:\Program Files\Android\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
    • android-studio-dir = C:\Program Files\Android\Android Studio
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)

[√] VS Code (version 1.94.2)
    • VS Code at C:\Users\bscho\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.98.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.22631.4317]
    • Chrome (web)      • chrome  • web-javascript • unknown
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 129.0.2792.89

[√] Network resources
    • All expected network resources are available.

! Doctor found issues in 1 category.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: SizedBox(
                width: 200,
                child: DropdownButtonFormField<String>(
                  onChanged: (_) {},
                  decoration: InputDecoration(
                   hintText: 'Label text',
                  ),
                  items: [
                    DropdownMenuItem(
                      value: 'selected',
                      child: Text('Selected item'),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

try this its bcz of label text change to hint text

When I also provide hintText, it looks right:

But in this issue, hintText is not provided. And per M3 design shared above, I think we still need to fix this.

I think the issue is from the use of InputDecorator in line 1589 of dropdown.dart. InputDecorator reserves a small space at the top of the widget for the floating label and pushes it's children down including the dropdown icon.

When no items are chosen in the DropdownButtonFormField and the labelText is not floating, InputDecorator centers the labelText vertically while the dropdown icon is being pushed down. This is the cause of the misalignment, imo.

if (widget._inputDecoration != null) {
      result = InputDecorator(
        decoration: widget._inputDecoration!,
        isEmpty: widget._isEmpty,
        isFocused: widget._isFocused,
        child: result,
      );
    }

the following fix worked for me:

icon: Transform.translate(
  offset: const Offset(0, -7),
  child: const Icon(Icons.arrow_drop_down),
),

Fix DropdownButtonFormField icon not vertically centered (#163205)

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.

Navigation Menu

Repository navigation

DropdownButtonFormField arrow icon is misaligned vertically #157074

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

2 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

DropdownButtonFormField arrow icon is misaligned vertically #157074

Description

Steps to reproduce

Expected results

Actual results

Code sample

Screenshots or Video

Logs

Flutter Doctor output

Activity

talhahafeezA commented on Oct 17, 2024

talhahafeezA commented on Oct 17, 2024

huycozy commented on Oct 17, 2024

zawhtetnaing10 commented on Oct 18, 2024

MohiuddinM commented on Oct 22, 2024

2 remaining items

github-actions commented on May 27, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions