-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Steps to reproduce
- Use the provided code snippet from the Flutter examples below. The only difference from the actual example is the property requestFocusOnTap set to true
- Click into the
DropdownMenuto enter a search term. - Observe the behavior when the keyboard appears.
Expected results
The DropdownEntries should move upwards and be displayed right under the DropdownMenu when the keyboard appears.
Actual results
The DropdownEntries remain further down on the screen and do not follow the DropdownMenu as it moves upwards, causing a misalignment.
Code sample
Code sample
import 'package:flutter/material.dart';
/// Flutter code sample for the [DropdownMenuEntry] `labelWidget` property.
enum ColorItem {
blue('Blue', Colors.blue),
pink('Pink', Colors.pink),
green('Green', Colors.green),
yellow('Yellow', Colors.yellow),
grey('Grey', Colors.grey);
const ColorItem(this.label, this.color);
final String label;
final Color color;
}
class DropdownMenuEntryLabelWidgetExample extends StatefulWidget {
const DropdownMenuEntryLabelWidgetExample({super.key});
@override
State<DropdownMenuEntryLabelWidgetExample> createState() =>
_DropdownMenuEntryLabelWidgetExampleState();
}
class _DropdownMenuEntryLabelWidgetExampleState
extends State<DropdownMenuEntryLabelWidgetExample> {
late final TextEditingController controller;
@override
void initState() {
super.initState();
controller = TextEditingController();
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
const String longText =
'is a color that sings of hope, A hue that shines like gold. It is the color of dreams, A shade that never grows old.';
return Scaffold(
body: Center(
child: DropdownMenu<ColorItem>(
width: 300,
controller: controller,
initialSelection: ColorItem.green,
requestFocusOnTap: true,
label: const Text('Color'),
onSelected: (ColorItem? color) {
print('Selected $color');
},
dropdownMenuEntries: ColorItem.values
.map<DropdownMenuEntry<ColorItem>>((ColorItem item) {
final String labelText = '${item.label} $longText\n';
return DropdownMenuEntry<ColorItem>(
value: item,
label: labelText,
labelWidget: Text(
labelText,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
);
}).toList(),
),
),
);
}
}
class DropdownMenuEntryLabelWidgetExampleApp extends StatelessWidget {
const DropdownMenuEntryLabelWidgetExampleApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: DropdownMenuEntryLabelWidgetExample(),
);
}
}
void main() {
runApp(const DropdownMenuEntryLabelWidgetExampleApp());
}
Screenshots or Video
Screenshots / Video demonstration
dropdownmenu.webm
Logs
Logs
Flutter Doctor output
[√] Flutter (Channel stable, 3.22.1, on Microsoft Windows [Version 10.0.22631.3593], locale
de-DE)
• Flutter version 3.22.1 on channel stable at C:\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision a14f74f (2 days ago), 2024-05-22 11:08:21 -0500
• Engine revision 55eae6864b
• Dart version 3.4.1
• DevTools version 2.34.3
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 33.0.0-rc4)
• Android SDK at C:\Users\demo\AppData\Local\Android\Sdk
• Platform android-34, build-tools 33.0.0-rc4
• ANDROID_SDK_ROOT = C:\Users\demo\AppData\Local\Android\Sdk
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.9+0--11185874)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.2.3)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.2.32526.322
• Windows 10 SDK version 10.0.19041.0
[√] Android Studio (version 2023.2)
• 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 17.0.9+0--11185874)
[√] IntelliJ IDEA Ultimate Edition (version 2021.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2021.1.2
• 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
[√] IntelliJ IDEA Ultimate Edition (version 2023.2)
• IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA 2023.2
• 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.89.1)
• VS Code at C:\Users\demo\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.88.0
[√] 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.22631.3593]
• Chrome (web) • chrome • web-javascript • Google Chrome
124.0.6367.210
• Edge (web) • edge • web-javascript • Microsoft Edge
125.0.2535.51
[√] Network resources
• All expected network resources are available.
• No issues found!