Sitelet https://github.com/flutter/flutter/issues/123783
Skip to content

The behaviour of DropdownButtonFormField padding is weird depending of settings #123783

Description

@bambinoua

Copied from Google internal bug b/277235718:


I need to use DropdownButtonFormField widget with other TextFormFields and they must have the same settings like content padding, label, prefix icon, validators etc. I noticed that the behavior of DropdownButtonFormField is weird. Having the same contentPadding and using prefixIcon and alignedDropdown of ButtonTheme I got padding shift.

If I just want to align the dropdown part with a left field edge (alignedDropdown = true) why the padding is changed? If I just add the prefixIcon why the padding is changed?

изображение

Code sample
import 'package:flutter/material.dart';

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

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

  static const _data = [
    DropdownMenuItem(value: 1, child: Text('light')),
    DropdownMenuItem(value: 2, child: Text('dark')),
  ];

  static const _padding = EdgeInsets.symmetric(horizontal: 24);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SizedBox(
            width: 250,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('alignedDropdown: false, prefixIcon: yes'),
                const SizedBox(height: 5),
                ButtonTheme(
                  alignedDropdown: false,
                  child: DropdownButtonFormField<int>(
                    value: 1,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      label: Text('Theme'),
                      contentPadding: _padding,
                      prefixIcon: Icon(Icons.star_rate),
                    ),
                    items: _data,
                    onChanged: (value) {},
                  ),
                ),
                const SizedBox(height: 10),
                const Text('alignedDropdown: false, prefixIcon: no'),
                const SizedBox(height: 5),
                ButtonTheme(
                  alignedDropdown: false,
                  child: DropdownButtonFormField<int>(
                    value: 1,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      label: Text('Theme'),
                      contentPadding: _padding,
                    ),
                    items: _data,
                    onChanged: (value) {},
                  ),
                ),
                const SizedBox(height: 10),
                const Text('alignedDropdown: true, prefixIcon: yes'),
                const SizedBox(height: 5),
                ButtonTheme(
                  alignedDropdown: true,
                  child: DropdownButtonFormField<int>(
                    value: 1,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      label: Text('Theme'),
                      contentPadding: _padding,
                      prefixIcon: Icon(Icons.star_rate),
                    ),
                    items: _data,
                    onChanged: (value) {},
                  ),
                ),
                const SizedBox(height: 10),
                const Text('alignedDropdown: true, prefixIcon: no'),
                const SizedBox(height: 5),
                ButtonTheme(
                  alignedDropdown: true,
                  child: DropdownButtonFormField<int>(
                    value: 1,
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                      label: Text('Theme'),
                      contentPadding: _padding,
                    ),
                    items: _data,
                    onChanged: (value) {},
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}
Logs
[√] Flutter (Channel stable, 3.7.8, on Microsoft Windows [Version 10.0.19045.2728], locale ru-RU)
    • Flutter version 3.7.8 on channel stable at D:\Programs\flutter       
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 90c64ed42b (9 days ago), 2023-03-21 11:27:08 -0500
    • Engine revision 9aa7816315
    • Dart version 2.19.5
    • 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 33.0.1)
    • Android SDK at D:\Programs\Android\sdk
    • Platform android-33, build-tools 33.0.1
    • Java binary at: D:\Programs\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files (x86)\Google\Chrome\Application\chrome.exe

[!] Visual Studio - develop for Windows (Visual Studio Professional 2019 16.11.17)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Professional
    • Visual Studio Professional 2019 version 16.11.32630.194
    X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components:
        MSVC v142 - VS 2019 C++ x64/x86 build tools
         - If there are multiple build tool versions available, install the latest
        C++ CMake tools for Windows
        Windows 10 SDK

[√] Android Studio (version 2021.2)
    • Android Studio at D:\Programs\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
    • Java version OpenJDK Runtime Environment (build 11.0.12+7-b1504.28-7817840)

[√] Connected device (4 available)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 12 (API 31) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.19045.2728]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 111.0.5563.147
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 111.0.1661.54

[√] HTTP Host Availability
    • All required HTTP hosts are available

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

P2Important issues not at the top of the work lista: text inputEntering text in a text field or keyboard related problemscustomer: money (g3)found in release: 3.7Found to occur in 3.7found in release: 3.9Found to occur in 3.9frameworkflutter/packages/flutter repository. See also f: labels.has partial patchThere is a PR awaiting someone to take it across the finish linehas reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

Type

No type

Projects

  • Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions