Open bambinoua opened 1 year ago
I can reproduce this issue with Master (3.9.0-20.0.pre.54)
with the code sample provided above.
flutter doctor -v
(Master)cc @Renzo-Olivares from triage.
I was unable to reproduce this on Windows/Chrome/Edge/Android (either pixel 3 emulator or Samsung S10e physical device).
I tried this on tip of master 3.9.0-22.0.pre.61
and then the closest I could get to the previous repro 3.9.0-20.0.pre
Possibly this is a Mac/ios only issue as it looks like the repro reported by @exaby73 was on a mac? I unfortunately don't have a mac to attempt a repro.
The following is a screen clip of what I'm seeing on windows, but alignment looks the same to me on all devices I was able to test.
```[!] Flutter (Channel master, 3.9.0-22.0.pre.61, on Microsoft Windows [Version 10.0.22621.1555], locale en-US) • Flutter version 3.9.0-22.0.pre.61 on channel master at C:\Projects\flutter ! Upstream repository https://github.com/dwgray/flutter.git is not a standard remote. Set environment variable "FLUTTER_GIT_URL" to https://github.com/dwgray/flutter.git to dismiss this error. • Framework revision 93308e821a (9 days ago), 2023-04-06 11:46:51 -0400 • Engine revision d492b8b3a5 • Dart version 3.0.0 (build 3.0.0-411.0.dev) • DevTools version 2.23.0 • 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 33.0.0) • Android SDK at C:\Users\david\AppData\Local\Android\Sdk • Platform android-33, build-tools 33.0.0 • ANDROID_SDK_ROOT = C:\Users\david\AppData\Local\Android\Sdk • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619) • All Android licenses accepted. [✓] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [✓] Visual Studio - develop for Windows (Visual Studio Enterprise 2022 17.5.3) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Enterprise • Visual Studio Enterprise 2022 version 17.5.33516.290 • Windows 10 SDK version 10.0.22000.0 [✓] Android Studio (version 2022.1) • 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 • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619) [✓] VS Code (version 1.77.3) • VS Code at C:\Users\david\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.62.0 [✓] Connected device (5 available) • SM G970U (mobile) • R58M22DZTQV • android-arm64 • Android 12 (API 31) • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.1555] • Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.121 • Edge (web) • edge • web-javascript • Microsoft Edge 112.0.1722.39 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```
```[!] Flutter (Channel unknown, 3.9.0-20.0.pre, on Microsoft Windows [Version 10.0.22621.1555], locale en-US) ! Flutter version 3.9.0-20.0.pre on channel unknown at C:\Projects\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/docs/get-started/install. ! Unknown upstream repository. Reinstall Flutter by following instructions at https://flutter.dev/docs/get-started/install. • Framework revision 6fe54f8811 (13 days ago), 2023-04-02 17:19:22 -0700 • Engine revision 05c14f07f0 • Dart version 3.0.0 (build 3.0.0-399.0.dev) • DevTools version 2.22.2 • 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 33.0.0) • Android SDK at C:\Users\david\AppData\Local\Android\Sdk • Platform android-33, build-tools 33.0.0 • ANDROID_SDK_ROOT = C:\Users\david\AppData\Local\Android\Sdk • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619) • All Android licenses accepted. [✓] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [✓] Visual Studio - develop for Windows (Visual Studio Enterprise 2022 17.5.3) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Enterprise • Visual Studio Enterprise 2022 version 17.5.33516.290 • Windows 10 SDK version 10.0.22000.0 [✓] Android Studio (version 2022.1) • 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 • Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-9505619) [✓] VS Code (version 1.77.3) • VS Code at C:\Users\david\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.62.0 [✓] Connected device (5 available) • SM G970U (mobile) • R58M22DZTQV • android-arm64 • Android 12 (API 31) • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64 • Android 13 (API 33) (emulator) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.22621.1555] • Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.121 • Edge (web) • edge • web-javascript • Microsoft Edge 112.0.1722.39 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```
I can reproduce this issue on macOS/iOS/Android when running on master
.
Here is a screenshot of it on the Android emulator.
The issue with extra padding can be seen clearly when looking at the first and third dropdown field. The first has alignedDropdown
set to false
, and the padding between the prefix icon and the label seems normal. Then looking at the third field, there is extra padding between the label and the prefix that wasn't present on the first field. The only difference is the alignedDropdown
is set to true
on the third field. alignedDropdown
is only meant to align the pop up menu with the width of the button and not cause any other changes.
Thanks for the clarification @Renzo-Olivares . I was focusing on the drop-downs on the right in the image from the orginal report and missed that there is a similar affect for the padding on the left. For what it's worth, I can confirm that is what I see on windows, android and browsers hosted on windows.
I'm also experiencing extra padding in left when alignedDropdown: true
in ButtonThemeData. Running in Chrome (Windows 11).
Here are the screenshots. First two fields are dropdowns and third one is textfield.
alignedDropdown: false
alignedDropdown: true
. It looks weird.
cc: @QuncCccccc
Closed https://github.com/flutter/flutter/issues/132732 for this issue. Seems like there is a PR to fix this
While we are fixing this issue, could you also try if DropdownMenu
can satisfy all your requirements? It is a new widget in Material3 with a Material3 style and the button is aligned with the menu by default:)
PR https://github.com/flutter/flutter/pull/131183 was written to solve this issue but unfortunately it was not completed so the PR has been closed. If anyone would like to start from that PR and apply the review comments and drive this PR to completion, you are definitely welcome to do so!
Copied from Google internal bug b/277235718:
I need to use
DropdownButtonFormField
widget with otherTextFormField
s and they must have the same settings like content padding, label, prefix icon, validators etc. I noticed that the behavior ofDropdownButtonFormField
is weird. Having the samecontentPadding
and usingprefixIcon
andalignedDropdown
ofButtonTheme
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 theprefixIcon
why the padding is changed?Code sample
```dart 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: DropdownButtonFormFieldLogs
``` ``` ``` ``` ``` [√] 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 ```