PopupMenuButton is broken after upgrade to Flutter `2.2.0`

[slavap]

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

[TahaTesser]

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]

cc: @HansMuller

[HansMuller]

CC @xu-baolin @Piinks

[slavap]

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

[slavap]

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.