The PopupMenu color cannot be set correctly

Question

In this simple code example, I want to change the background color of the menu by setting the color parameter of PopupMenuButton. However, I found that its color is not displayed correctly.

my code:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          title: Text('PopupMenuButton Example'),
        ),
        body: Center(
          child: PopupMenuButton<String>(
            color: Colors.white,
            onSelected: (String result) {
              print('You selected: $result');
            },
            elevation: 8,
            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
              const PopupMenuItem<String>(
                value: 'option1',
                child: Text('Option 1'),
              ),
              const PopupMenuItem<String>(
                value: 'option2',
                child: Text('Option 2'),
              ),
              const PopupMenuItem<String>(
                value: 'option3',
                child: Text('Option 3'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

When I set the color to white(https://i.sstatic.net/82cJ0dPT.png)

When I set the color to white(https://i.sstatic.net/19VtZLs3.png)

I found that the problem was not in the color setting. When I set the elevation parameter to 0, the problem disappeared. So I set the color parameter to transparent to observe the problem.

I found that the elevation parameter not only produces a shadow, but also generates a gray mask for the background. I am a beginner, and I did not solve the problem by consulting the information and modifying the theme color parameters.

I hope to be able to remove this mask and show the correct colors.

Thanks for your attention.

Answer 1

... I found that the elevation parameter not only produces a shadow, but also generates a gray mask for the background.

That's intended if you use elevation. In addition to the PopupMenu's color, you are looking to set the surfaceTintColor:

The color used as an overlay on color to indicate elevation.

PopupMenuButton<String>(
            surfaceTintColor: Colors.white, // --> Set this to white
            color: Colors.white,
            onSelected: (String result) {
              print('You selected: $result');
            },
            elevation: 8,
            itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
              const PopupMenuItem<String>(
                value: 'option1',
                child: Text('Option 1'),
              ),
              const PopupMenuItem<String>(
                value: 'option2',
                child: Text('Option 2'),
              ),
              const PopupMenuItem<String>(
                value: 'option3',
                child: Text('Option 3'),
              ),
            ],
          )