Repository: flutter
Issue: [PopupMenuButton] Delay in Displaying Dropdown Menu Background
Labels: framework,f: material design,has reproducible steps,P3,team-design,triaged-design,found in release: 3.16,found in release: 3.17

### Is there an existing issue for this?

- [X] I have searched the [existing issues](https://github.com/flutter/flutter/issues)
- [X] I have read the [guide to filing a bug](https://flutter.dev/docs/resources/bug-reports)

### Steps to reproduce

When using a `PopupMenuButton` in my Flutter application, I've noticed an unusual behavior in the dropdown menu's animation. Upon clicking the button to open the menu, the text items are displayed first without the menu background. After a brief delay, the background of the menu then appears with a downward sliding animation. This behavior results in an inconsistent and visually disruptive user experience.

1. Add a `PopupMenuButton` to a widget in a Flutter application.
2. Assign a list of `PopupMenuItem` to the `PopupMenuButton`.
3. Run the application and click on the `PopupMenuButton` to open the menu.
4. Observe that the text items appear first, followed by the background of the menu after a short delay.

### Expected results

I would expect the menu background and text items to appear simultaneously, without any delays or visual artifacts during the animation.


### Actual results

The text items are displayed first without a background, followed by the appearance of the menu background after a brief delay.


### Code sample

https://github.com/andgar2010/bug_flutter_popup_menu_button

<details><summary>Code sample</summary>

```dart
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> {
  @override
  Widget build(BuildContext context) {
    final formKey = GlobalKey<FormState>();

    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(24),
              child: Expanded(
                child: Form(
                  key: formKey,
                  child: Column(
                    children: <Widget>[
                      CustomDropdownFormField(
                        itemBuilder: (BuildContext context) {
                          List<DropdownItem> menuItems = List.generate(
                            50,
                            (index) => DropdownItem(
                              text: 'Ítem ${index + 1}',
                              icon: Icons.ac_unit_outlined,
                            ),
                          );

                          return [
                            for (DropdownItem item in menuItems)
                              PopupMenuItem<DropdownItem>(
                                value: item,
                                child: Row(
                                  children: [
                                    Text(item.text),
                                    const SizedBox(width: 8),
                                    Icon(item.icon),
                                  ],
                                ),
                              ),
                          ];
                        },
                        validator: (DropdownItem? value) {
                          if (value == null || value.text.isEmpty) {
                            return 'Por favor selecciona un ítem';
                          }
                          return null;
                        },
                      ),
                      const SizedBox(height: 8),
                      ElevatedButton(
                        onPressed: () {
                          if (formKey.currentState!.validate()) {
                            // Procesar datos del formulario
                          }
                        },
                        child: const Text('Enviar'),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class DropdownItem {
  final String text;
  final IconData icon;

  DropdownItem({required this.text, required this.icon});
}

class CustomDropdownFormField extends FormField<DropdownItem> {
  CustomDropdownFormField({
    super.key,
    super.onSaved,
    super.validator,
    super.initialValue,
    required List<PopupMenuEntry<DropdownItem>> Function(BuildContext)
        itemBuilder,
    AutovalidateMode super.autovalidateMode = AutovalidateMode.disabled,
  }) : super(
          builder: (FormFieldState<DropdownItem> field) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                PopupMenuButton<DropdownItem>(
                  position: PopupMenuPosition.under,
                  onSelected: (DropdownItem value) {
                    field.didChange(value);
                  },
                  itemBuilder: itemBuilder,
                  constraints: const BoxConstraints(maxHeight: 230),
                  child: Container(
                    padding:
                        const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
                    decoration: BoxDecoration(
                      border: Border.all(color: Colors.grey),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(
                          field.value?.text ?? 'Selecciona un ítem',
                          style: const TextStyle(color: Colors.black),
                        ),
                        const Icon(Icons.arrow_drop_down),
                      ],
                    ),
                  ),
                ),
                if (field.hasError)
                  Padding(
                    padding: const EdgeInsets.only(top: 5),
                    child: Text(
                      field.errorText ?? '',
                      style: const TextStyle(
                        color: Colors.redAccent,
                        fontSize: 12,
                      ),
                    ),
                  ),
              ],
            );
          },
        );
}
```

</details>


### Screenshots or Video

<details>
<summary>Screenshots / Video demonstration</summary>

https://github.com/flutter/flutter/assets/19521054/3ee9f5d9-ac51-427c-a658-c53a5eab1765


</details>


### Logs

<details><summary>Logs</summary>

```console

```
</details>


### Flutter Doctor output

<details><summary>Doctor output</summary>

```console
[✓] Flutter (Channel stable, 3.16.0, on macOS 14.1.1 23B81 darwin-arm64 (Rosetta), locale en-CO)
    • Flutter version 3.16.0 on channel stable at /Users/XXXXXX/.puro/envs/_3_16_0/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision db7ef5bf9f (2 days ago), 2023-11-15 11:25:44 -0800
    • Engine revision 74d16627b9
    • Dart version 3.2.0
    • DevTools version 2.28.2

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/XXXXX/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.0.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15A507
    • CocoaPods version 1.14.2

[✗] Chrome - develop for the web (Cannot find Chrome executable at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.

[✓] Android Studio (version 2022.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • 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.6+0-17.0.6b829.9-10027231)

[✓] Connected device (2 available)
    • iPhone SE (3rd generation) (mobile) • XXXXXXXXXX • ios          • com.apple.CoreSimulator.SimRuntime.iOS-17-0 (simulator)
    • macOS (desktop)                     • macos                                • darwin-arm64 • macOS 14.1.1 23B81 darwin-arm64 (Rosetta)


[✓] Network resources
    • All expected network resources are available.
```

</details>