Skip to content

DropdownButton Menu Does Not Close or Reposition on Screen Resize in Web and desktop platforms #156980

@NaderMohamedMusa

Description

@NaderMohamedMusa

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.
    123
    234

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: desktopRunning on desktopf: material designflutter/packages/flutter/material repository.found in release: 3.24Found to occur in 3.24found in release: 3.27Found to occur in 3.27frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions