Repository: flutter
Issue: PopupMenuItems are drawn before the background is shown when there are a lot of items
Labels: framework,f: material design,has reproducible steps,P3,found in release: 3.0,found in release: 3.1,team-design,triaged-design

```dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

/// Shows a popup menu with provided buttons and provided position.
Future<int?> showPopupMenu({
  required RelativeRect position,
  required List<String> items,
  required BuildContext ctx,
  List<IconData>? icons,
  bool useAppLocaleOnItems = false,
  double? fontSize,
  Color? backgroundColor,
}) {
  return showMenu(
    color: backgroundColor,
    constraints: const BoxConstraints(
      minWidth: (2.0 * 56.0),
      maxWidth: (6.0 * 56.0),
      maxHeight: 200.0,
    ),
    context: ctx,
    position: position,
    shape: const RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(6.0)),
    ),
    items: [
      ...items
          .map(
            (item) => PopupMenuItem(
              padding: const EdgeInsets.symmetric(
                horizontal: 16.0,
                vertical: 8.0,
              ),
              value: items.indexWhere((element) => element == item),
              height: 34.0,
              child: Row(
                children: [
                  if (icons != null)
                    Padding(
                      padding: const EdgeInsets.only(
                        right: 8.0,
                        top: 2.0,
                      ),
                      child: Icon(
                        icons.elementAt(
                          items.indexWhere((element) => element == item),
                        ),
                        size: 16.0,
                        color: Colors.blue,
                      ),
                    ),
                  Expanded(
                    child: Text(
                      useAppLocaleOnItems ? item : item,
                      style: const TextStyle(
                        fontSize: 14.0,
                        color: Colors.white,
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                ],
              ),
            ),
          )
          .toList(),
    ],
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: Scaffold(
        backgroundColor: Colors.lightGreen,
        appBar: AppBar(
          title: const Text('Material App Bar'),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              JustToGetTheContext(),
              Padding(
                padding: EdgeInsets.only(left: 10.0),
                child: JustToGetTheContext2(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class JustToGetTheContext extends StatelessWidget {
  const JustToGetTheContext({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) {
        showPopupMenu(
          position: RelativeRect.fromRect(
            details.globalPosition & const Size(100.0, 100.0),
            Offset.zero & const Size(1280.0, 720.0),
          ),
          items: [
            '1970',
            '1971',
            '1972',
            '1973',
            '1974',
            '1975',
            '1976',
            '1977',
            '1978',
            '1979',
            '1980',
            '1981',
            '1982',
            '1983',
            '1984',
            '1985',
            '1986',
            '1987',
            '1988',
            '1989',
            '1990',
          ],
          ctx: context,
          backgroundColor: Colors.black.withOpacity(0.75),
        );
      },
      child: Container(
        color: Colors.redAccent,
        child: const Text('tap me with issue'),
      ),
    );
  }
}

class JustToGetTheContext2 extends StatelessWidget {
  const JustToGetTheContext2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (details) {
        showPopupMenu(
          position: RelativeRect.fromRect(
            details.globalPosition & const Size(100.0, 100.0),
            Offset.zero & const Size(1280.0, 720.0),
          ),
          items: [
            '1970',
            '1971',
            '1972',
          ],
          ctx: context,
          backgroundColor: Colors.black.withOpacity(0.75),
        );
      },
      child: Container(
        color: Colors.redAccent,
        child: const Text('tap me no issue'),
      ),
    );
  }
}
```

When there are a lot of items in showMenu, they are drawn before background menu appears and hidden after it disappears. **(Or maybe it misses clipBehaviour, do not know how to describe this issue correctly).**
![zPkcvVVjIj](https://user-images.githubusercontent.com/63228361/186381362-4247c67b-3d24-404b-8e9f-5e7add742da9.gif)

Flutter version: 3.0.5, the latest from stable channel