-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
Steps to reproduce
1- Run the provided code in a Flutter web project.
2- Open the DropdownButton menu.
3- Resize the browser window.
Expected results
- The DropdownButton menu should automatically close when the screen size changes.
- The dropdown menu should reposition itself directly under the dropdown button.
expect.mov
Actual results
- The dropdown menu remains open after resizing the window and does not reposition itself under the button, leading to usability issues.


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(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String selectedValue = 'Option 1';
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: Center(
child: Column(
children: [
DropdownButton<String>(
value: selectedValue,
items: ['Option 1', 'Option 2', 'Option 3'].map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: (newValue) {
setState(() {
selectedValue = newValue!;
});
},
),
],
)),
);
}
}
Screenshots or Video
Screenshots / Video demonstration
[Upload media here]
Logs
No response
Flutter Doctor output
[√] Flutter (Channel stable, 3.24.3, on Microsoft Windows [Version 10.0.19045.5011], locale ar-EG)
• Flutter version 3.24.3 on channel stable at C:\src\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2663184aa7 (5 weeks ago), 2024-09-11 16:27:48 -0500
• Engine revision 36335019a8
• Dart version 3.5.3
• DevTools version 2.37.3
[√] 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\HP\AppData\Local\Android\sdk
X cmdline-tools component is missing
Run `path/to/sdkmanager --install "cmdline-tools;latest"`
See https://developer.android.com/studio/command-line for more details.
X Android license status unknown.
Run `flutter doctor --android-licenses` to accept the SDK licenses.
See https://flutter.dev/to/windows-android-setup for more details.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[X] Visual Studio - develop Windows apps
X Visual Studio not installed; this is necessary to develop Windows apps.
Download at https://visualstudio.microsoft.com/downloads/.
Please install the "Desktop development with C++" workload, including all of its default components
[√] Android Studio (version 2024.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 17.0.11+0--11852314)
[√] VS Code (version 1.93.1)
• VS Code at C:\Users\HP\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.98.0
[√] Connected device (4 available)
• CPH2203 (mobile) • NBRSTOS4BMIB8DCE • android-arm64 • Android 13 (API 33)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.5011]
• Chrome (web) • chrome • web-javascript • Google Chrome 129.0.6668.100
• Edge (web) • edge • web-javascript • Microsoft Edge 129.0.2792.52
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 2 categories.
The Flutter CLI developer tool uses Google Analytics to report usage and diagnostic
data along with package dependencies, and crash reporting to send basic crash
reports. This data is used to help improve the Dart platform, Flutter framework,
and related tools.
Telemetry is not sent on the very first run. To disable reporting of telemetry,
run this terminal command:
flutter --disable-analytics
If you opt out of telemetry, an opt-out event will be sent, and then no further
information will be sent. This data is collected in accordance with the Google
Privacy Policy (https://policies.google.com/privacy).
Please note that analytics reporting was already disabled, and will continue to be disabled.