Here's a minimal repro:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: const ColorScheme.light(),
        popupMenuTheme: PopupMenuThemeData(
          color: const ColorScheme.light().surface,
        ),
      ),
      darkTheme: ThemeData(
        colorScheme: const ColorScheme.dark(),
        popupMenuTheme: PopupMenuThemeData(
          color: const ColorScheme.dark().surface,
        ),
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hello Flutter'),
        actions: [
          PopupMenuButton<int>(
            itemBuilder: (context) => <PopupMenuEntry<int>>[
              const PopupMenuItem<int>(value: 1, child: Text('Item 1')),
              const PopupMenuItem<int>(value: 2, child: Text('Item 2')),
              const PopupMenuItem<int>(value: 3, child: Text('Item 3')),
            ],
          )
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [Text('Nothing here')],
        ),
      ),
    );
  }
}

Steps to reproduce:

Open the popup menu
While the menu is opened, toggle system theme (e.g. using Android's Quick Settings)
Observe the popup menu's background color

Current behavior:
https://user-images.githubusercontent.com/3948279/162324895-08f0a810-ef49-4d21-9433-e1d53d8deb5f.mp4

Interesting scenario to try: if we remove these lines,

        popupMenuTheme: PopupMenuThemeData(
          color: const ColorScheme.light().surface,
        ),

        popupMenuTheme: PopupMenuThemeData(
          color: const ColorScheme.dark().surface,
        ),

the popup menu will now respond to the system theme changes:
https://user-images.githubusercontent.com/3948279/162324916-3783e1cd-125a-49d7-b8d4-ac0202384d66.mp4

Flutter material popup menu doesn't consume the latest context #43824

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions