PopupMenuButton is broken after upgrade to Flutter `2.2.0` #82874

slavap · 2021-05-19T00:31:04Z

Steps to Reproduce

Run the following code and press popup menu button (three dots on header right).

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'PopupMenuButton misplacement',
        theme: ThemeData(primarySwatch: Colors.blue),
        builder: (BuildContext context, Widget? child) {
          final MediaQueryData m = MediaQuery.of(context);
          var horzOffset = m.size.width / 4;
          var d = m.copyWith(padding: EdgeInsets.fromLTRB(horzOffset, m.padding.top, horzOffset, m.padding.bottom));
          return MediaQuery(
            data: d,
            child: Navigator(
              pages: [
                MaterialPage(
                  key: ValueKey('Page1'),
                  child: SafeArea(
                    child: Scaffold(
                      appBar: AppBar(
                        title: Text('PopupMenuButton misplacement'),
                        actions: [
                          PopupMenuButton<int>(
                              itemBuilder: (context) => [
                                    PopupMenuItem<int>(
                                      value: 0,
                                      child: ListTile(
                                        leading: Icon(Icons.settings),
                                        title: Text('Settings'),
                                        contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
                                        dense: true,
                                      ),
                                    ),
                                  ]),
                        ],
                      ),
                      body: Center(),
                    ),
                  ),
                )
              ],
              onPopPage: (route, result) => route.didPop(result),
            ),
          );
        });
  }
}

On Web (render HTML):

On Web (render CanvasKit):

On Android:

Expected results:
Popup menu with one item named Settings.

flutter doctor -v
[√] Flutter (Channel stable, 2.2.0, on Microsoft Windows [Version 10.0.19042.985], locale en-US)
    • Flutter version 2.2.0 at c:\Programs\flutter
    • Framework revision b22742018b (4 days ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
    • Android SDK at C:\Users\slavap\AppData\Local\Android\Sdk
    • Platform android-30, build-tools 30.0.2
    • ANDROID_HOME = C:\Users\slavap\AppData\Local\Android\Sdk
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • CHROME_EXECUTABLE = c:\Programs\chrome-debug.bat

[√] Android Studio (version 4.1.0)
    • 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 1.8.0_242-release-1644-b01)

[√] VS Code, 64-bit edition (version 1.56.2)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.22.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 90.0.4430.212
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 90.0.818.56

• No issues found!

popmenubtn_bug.zip

The text was updated successfully, but these errors were encountered:

TahaTesser · 2021-05-19T14:39:29Z

Hi @slavap
Thanks for filing the issue, I can reproduce the issue mobile, web, desktop,this looks like Framework only issue,

Reproduced the issue using the following minimal code sample

minimal code sample

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'PopupMenuButton misplacement',
        theme: ThemeData(primarySwatch: Colors.blue),
        builder: (BuildContext context, Widget? child) {
          final MediaQueryData m = MediaQuery.of(context);
          var horzOffset = m.size.width / 4;
          var d = m.copyWith(padding: EdgeInsets.fromLTRB(horzOffset, m.padding.top, horzOffset, m.padding.bottom));
          return MediaQuery(
            data: d,
            child: Navigator(
              pages: [
                MaterialPage(
                  key: ValueKey('Page1'),
                  child: SafeArea(
                    child: Scaffold(
                      appBar: AppBar(
                        title: Text('PopupMenuButton misplacement'),
                        actions: [
                          PopupMenuButton<int>(
                              itemBuilder: (context) => [
                                    PopupMenuItem<int>(
                                      value: 0,
                                      child: ListTile(
                                        leading: Icon(Icons.settings),
                                        title: Text('Settings'),
                                        contentPadding: EdgeInsets.symmetric(horizontal: 0.0),
                                        dense: true,
                                      ),
                                    ),
                                  ]),
                        ],
                      ),
                      body: Center(),
                    ),
                  ),
                )
              ],
              onPopPage: (route, result) => route.didPop(result),
            ),
          );
        });
  }
}

Flutter `2.0.6`

Preview

mobile	web

Flutter `2.2.0` & `2.3.0`

Preview

mobile	web `canvaskit`	web `html`

Reproduced on the following previous stable channel

`stable`
❌

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.0.6, on Microsoft Windows [Version 10.0.19042.964], locale en-US)
    • Flutter version 2.0.6 at C:\Users\Taha\Code\flutter
    • Framework revision 1d9032c7e1 (3 weeks ago), 2021-04-29 17:37:58 -0700
    • Engine revision 05e680e202
    • Dart version 2.12.3
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java.exe
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • 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 Community 2019 16.9.6)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31313.79
    • Windows 10 SDK version 10.0.19041.0
[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
[✓] VS Code (version 1.56.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.22.0
[✓] Connected device (4 available)
    • RMX2001 (mobile)  • EUYTFEUSQSRGDA6D • android-arm64  • Android 10 (API 29)
    • Windows (desktop) • windows          • windows-x64    • Microsoft Windows [Version 10.0.19042.964]
    • Chrome (web)      • chrome           • web-javascript • Google Chrome 90.0.4430.212
    • Edge (web)        • edge             • web-javascript • Microsoft Edge 89.0.774.63
! Doctor found issues in 1 category.

Reproduced on the following latest channels

`stable`	`master`
✅	✅

Check flutter doctor -v outputs for each channel below

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.0, on Microsoft Windows [Version 10.0.19042.964], locale en-US)
    • Flutter version 2.2.0 at C:\Users\Taha\Code\flutter_stable
    • Framework revision b22742018b (5 days ago), 2021-05-14 19:12:57 -0700
    • Engine revision a9d88a4d18
    • Dart version 2.13.0
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java.exe
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • 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 Community 2019 16.9.6)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31313.79
    • Windows 10 SDK version 10.0.19041.0
[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions).
[✓] VS Code (version 1.56.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.22.0
[✓] Connected device (4 available)
    • RMX2001 (mobile)  • EUYTFEUSQSRGDA6D • android-arm64  • Android 10 (API 29)
    • Windows (desktop) • windows          • windows-x64    • Microsoft Windows [Version 10.0.19042.964]
    • Chrome (web)      • chrome           • web-javascript • Google Chrome 90.0.4430.212
    • Edge (web)        • edge             • web-javascript • Microsoft Edge 89.0.774.63
! Doctor found issues in 1 category.

[✓] Flutter (Channel master, 2.3.0-13.0.pre.33, on Microsoft Windows [Version 10.0.19042.964], locale en-US)
    • Flutter version 2.3.0-13.0.pre.33 at C:\Users\Taha\Code\flutter_master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 84734ecc54 (8 hours ago), 2021-05-18 23:09:03 -0700
    • Engine revision 2398dea918
    • Dart version 2.14.0 (build 2.14.0-119.0.dev)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
    • Android SDK at C:\Users\Taha\Code\SDK
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Users\Taha\Code\android-studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6842174)
    • 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 Community 2019 16.9.6)
    • Visual Studio at C:\Program Files (x86)\Microsoft Visual Studio\2019\Community
    • Visual Studio Community 2019 version 16.9.31313.79
    • Windows 10 SDK version 10.0.19041.0
[✓] Android Studio (version 4.2.0)
    • Android Studio at C:\Users\Taha\Code\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.8+10-b944.6842174)
[✓] VS Code (version 1.56.2)
    • VS Code at C:\Users\Taha\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.22.0
[✓] Connected device (5 available)
    • RMX2001 (mobile)        • EUYTFEUSQSRGDA6D • android-arm64   • Android 10 (API 29)
    • Windows (desktop)       • windows          • windows-x64     • Microsoft Windows [Version 10.0.19042.964]
    • Windows (UWP) (desktop) • winuwp           • windows-uwp-x64 •
    • Chrome (web)            • chrome           • web-javascript  • Google Chrome 90.0.4430.212
    • Edge (web)              • edge             • web-javascript  • Microsoft Edge 89.0.774.63
• No issues found!

✅ : Reproducible ❌: Not Reproducible

TahaTesser · 2021-05-19T15:46:50Z

cc: @HansMuller

HansMuller · 2021-05-19T16:06:52Z

CC @xu-baolin @Piinks

slavap · 2021-05-19T23:49:05Z

@TahaTesser
Looks like the problem is incomplete _PopupMenuRouteLayout implementation. It takes topPadding and bottomPadding parameters, but ignores left and right.

slavap · 2021-05-20T02:36:43Z

I've found partial workaround for this bug, ListTile could be replaced by:

InkWell(
  child: Row(children: [
    Icon(Icons.settings, color: Theme.of(context).textTheme.bodyText2?.color),
    SizedBox(width: 16),
    Text('Settings Settings Settings Settings'),
  ]),
),

Though in case of long menu item text it overflows.

github-actions · 2021-08-01T12:01:52Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

slavap changed the title ~~PopupMenuButton is broken in Flutter Web 2.2.0~~ PopupMenuButton is broken in Flutter 2.2.0 (both web and android). May 19, 2021

TahaTesser added the in triage Presently being triaged by the triage team label May 19, 2021

TahaTesser changed the title ~~PopupMenuButton is broken in Flutter 2.2.0 (both web and android).~~ PopupMenuButton is broken after upgrade to Flutter 2.2.0 May 19, 2021

TahaTesser added the c: regression It was better in the past than it is now label May 19, 2021

xu-baolin self-assigned this May 20, 2021

xu-baolin mentioned this issue May 20, 2021

Re-add the removed MediaQuery.removePadding of PopupMenuButton #82986

Merged

xu-baolin added the waiting for PR to land (fixed) A fix is in flight label May 20, 2021

Piinks added the cp: 2.2 label May 20, 2021

fluttergithubbot closed this as completed in #82986 May 20, 2021

TahaTesser added the r: fixed Issue is closed as already fixed in a newer version label May 20, 2021

christopherfujino mentioned this issue Jun 10, 2021

[flutter_releases] Flutter Stable 2.2.2 Framework Cherrypicks #84364

Merged

github-actions bot locked as resolved and limited conversation to collaborators Aug 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PopupMenuButton is broken after upgrade to Flutter `2.2.0` #82874

PopupMenuButton is broken after upgrade to Flutter `2.2.0` #82874

slavap commented May 19, 2021 •

edited

Loading

TahaTesser commented May 19, 2021 •

edited

Loading

TahaTesser commented May 19, 2021

HansMuller commented May 19, 2021

slavap commented May 19, 2021

slavap commented May 20, 2021

github-actions bot commented Aug 1, 2021

PopupMenuButton is broken after upgrade to Flutter 2.2.0 #82874

PopupMenuButton is broken after upgrade to Flutter 2.2.0 #82874

Comments

slavap commented May 19, 2021 • edited Loading

Steps to Reproduce

TahaTesser commented May 19, 2021 • edited Loading

Flutter 2.0.6

Preview

Flutter 2.2.0 & 2.3.0

Preview

TahaTesser commented May 19, 2021

HansMuller commented May 19, 2021

slavap commented May 19, 2021

slavap commented May 20, 2021

github-actions bot commented Aug 1, 2021

PopupMenuButton is broken after upgrade to Flutter `2.2.0` #82874

PopupMenuButton is broken after upgrade to Flutter `2.2.0` #82874

slavap commented May 19, 2021 •

edited

Loading

TahaTesser commented May 19, 2021 •

edited

Loading

Flutter `2.0.6`

Flutter `2.2.0` & `2.3.0`