flutter
flutter copied to clipboard
Published
20 hours ago •
flutter
flutter
The behaviour of `DropdownButtonFormField` padding is weird depending of settings
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
I can reproduce this issue with Master (3.9.0-20.0.pre.54) with the code sample provided above.
flutter doctor -v (Master)
[!] Flutter (Channel master, 3.9.0-20.0.pre.54, on macOS 13.2.1 22D68 darwin-arm64, locale en-US)
• Flutter version 3.9.0-20.0.pre.54 on channel master at /Users/nabeelparkar/fvm/versions/master
! Warning: `dart` on your path resolves to /opt/homebrew/Cellar/dart/2.19.5/libexec/bin/dart, which is not inside your current Flutter SDK checkout at /Users/nabeelparkar/fvm/versions/master. Consider adding /Users/nabeelparkar/fvm/versions/master/bin to the front of your path.
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision bd4c792ba4 (19 minutes ago), 2023-03-31 02:37:09 -0400
• Engine revision a6421ed6bb
• Dart version 3.0.0 (build 3.0.0-387.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.
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
• Android SDK at /Users/nabeelparkar/Library/Android/sdk/
• Platform android-33, build-tools 33.0.0
• ANDROID_SDK_ROOT = /Users/nabeelparkar/Library/Android/sdk/
• Java binary at: /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9619390/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.15+0-b2043.56-8887301)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 14C18
• CocoaPods version 1.11.3
[✓] Chrome - develop for the web
• CHROME_EXECUTABLE = /Applications/Brave Browser.app/Contents/MacOS/Brave Browser
[✓] Android Studio (version 2022.1)
• Android Studio at /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9619390/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.15+0-b2043.56-8887301)
[✓] Android Studio (version 2022.1)
• Android Studio at /Users/nabeelparkar/Library/Application Support/JetBrains/Toolbox/apps/AndroidStudio/ch-0/221.6008.13.2211.9477386/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.15+0-b2043.56-8887301)
[✓] VS Code (version 1.76.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.60.0
[✓] Connected device (2 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 13.2.1 22D68 darwin-arm64
• Chrome (web) • chrome • web-javascript • Brave Browser 111.1.49.128
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
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 doctor -v (Master)
• 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 doctor -v 3.9.0-20.0.pre (the closest I could get to the previous repro)
! 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!
