Flutter：如何修改PopupMenuButton图标颜色？Theme配置无效

Let’s break down why your current setup isn’t working and walk through a solution that will get those icons looking the way you want:

Key Issues in Your Current Code #

• CheckedPopupMenuItem: Its checkmark doesn’t use the iconTheme directly. The checked state relies on the theme’s toggleableActiveColor, while the unchecked state needs explicit configuration.
• ListTile Leading Icon: The ListTile inside your PopupMenuItem might not inherit the parent ListTileTheme correctly because PopupMenu items render in an overlay context, which can break theme inheritance.

Corrected Code Solution #

Here’s the adjusted code that properly applies white colors to both the checkmark and the phone link icon:

Scaffold(
  backgroundColor: Colors.transparent,
  appBar: AppBar(
    elevation: 0.0,
    backgroundColor: Colors.transparent,
    actions: <Widget>[
      Theme(
        data: Theme.of(context).copyWith(
          cardColor: Colors.indigo,
          // Controls the checked state color of CheckedPopupMenuItem
          toggleableActiveColor: Colors.white,
          // Applies to general icons in the popup
          iconTheme: const IconThemeData(color: Colors.white),
          // Ensures ListTile leading icons pick up the white color
          listTileTheme: const ListTileThemeData(iconColor: Colors.white),
          // Optional: Unify text color for consistency
          textTheme: Theme.of(context).textTheme.copyWith(
                bodyLarge: const TextStyle(color: Colors.white),
              ),
        ),
        child: PopupMenuButton<String>(
          onSelected: _showCheckedMenuSelections,
          itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
            CheckedPopupMenuItem<String>(
              value: _checkedValue1,
              checked: _showRoles,
              // Match unchecked checkmark to theme's icon color
              uncheckedColor: Theme.of(context).iconTheme.color,
              child: Text(_checkedValue1),
            ),
            const PopupMenuDivider(),
            PopupMenuItem<String>(
              value: 'Get Link',
              child: ListTile(
                leading: const Icon(Icons.phonelink),
                title: const Text('Get link'),
              ),
            ),
          ],
        ),
      ),
    ],
  ),
)

What Changed & Why #

1. Added toggleableActiveColor: This directly sets the color of the checkmark when the CheckedPopupMenuItem is selected.
2. Added listTileTheme: Ensures the ListTile’s leading icon inherits the white color without needing to set it explicitly on the Icon widget.
3. Set uncheckedColor: Makes the unchecked checkmark match your theme’s icon color for a consistent look.
4. Updated Text Theme: Removes redundant explicit text styles by unifying the text color in the theme, keeping your code clean.

This setup will make both the CheckedPopupMenuItem’s checkmark (in both checked/unchecked states) and the PopupMenuItem’s phone link icon appear white, contrasting nicely with your indigo card background.

内容的提问来源于stack exchange，提问作者willy wijaya