Skip to content

PopupMenuButton uses color property for icon color #127802

Closed
#132054
Closed
PopupMenuButton uses color property for icon color#127802
#132054
Assignees
TahaTesser
Labels
found in release: 3.10Found to occur in 3.10found in release: 3.11Found to occur in 3.11frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages teamworkaround availableThere is a workaround available to overcome the issue

Description

@James1345
James1345
opened on May 29, 2023

Is there an existing issue for this?

Steps to reproduce

Create app with PopumMenuButton
Set icon using icon property e.g. icon: Icon(Icons.more_horiz
Set color using color property e.g. color: Colors.white

Expected results

Documentation for the color property:

If provided, the background color used for the menu.

If this property is null, then [PopupMenuThemeData.color] is used.
If [PopupMenuThemeData.color] is also null, then Theme.of(context).cardColor is used.

Expect that the color of the popup card change

Actual results

The color of the icon changes.

Code sample

Code sample 
PopupMenuButton(
  icon: Icon(Icons.more_horiz),
  color: Colors.white,
  itemBuilder: (context) => [...]
)

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs 
[Paste your logs here]

Flutter Doctor output

Doctor output 
[Paste your output here]

Activity

  1. dam-ease
    added
    in triagePresently being triaged by the triage team
    on May 30, 2023

  2. dam-ease commented on May 30, 2023

    @dam-ease
    dam-ease
    on May 30, 2023

    I am able to reproduce this issue on the latest master and stable channels. Adding color to the PopupMenuButton changes the color of both the Icon and the popup card in which case the documentation states otherwise. Although, adding color to the Icon is a possible workaround to having separate colors for the Icon and Popup card.

    Code Sample 

    import 'package:flutter/material.dart';

void main() {
  return runApp(const MaterialApp(
    home: MenuDemo(),
  ));
}

class MenuDemo extends StatefulWidget {
  const MenuDemo({Key? key}) : super(key: key);

  @override
  MenuDemoState createState() => MenuDemoState();
}

class MenuDemoState extends State<MenuDemo> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  final String _checkedValue1 = 'One';
  final String _checkedValue2 = 'Two';
  final String _checkedValue3 = 'Free';
  final String _checkedValue4 = 'Four';
  late List<String> _checkedValues;

  @override
  void initState() {
    super.initState();
    _checkedValues = <String>[_checkedValue3];
  }

  void showCheckedMenuSelections(String value) {
    if (_checkedValues.contains(value))
      _checkedValues.remove(value);
    else
      _checkedValues.add(value);
  }

  bool isChecked(String value) => _checkedValues.contains(value);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _scaffoldKey,
        body: Center(
          child: Container(
            width: 250.0,
            child: ListTile(
                title: const Text(
                  'checklist menu',
                  textAlign: TextAlign.center,
                ),
                trailing: PopupMenuButton<String>(
                    padding: EdgeInsets.zero,
                    icon: const Icon(
                      Icons.more_horiz,
                    ),
                    color: Colors.yellow,
                    onSelected: showCheckedMenuSelections,
                    itemBuilder: (BuildContext context) =>
                        <PopupMenuItem<String>>[
                          CheckedPopupMenuItem<String>(
                              value: _checkedValue1,
                              checked: isChecked(_checkedValue1),
                              child: Text(_checkedValue1)),
                          CheckedPopupMenuItem<String>(
                              value: _checkedValue2,
                              //enabled: false,
                              checked: isChecked(_checkedValue2),
                              child: Text(_checkedValue2)),
                          CheckedPopupMenuItem<String>(
                              value: _checkedValue3,
                              checked: isChecked(_checkedValue3),
                              child: Text(_checkedValue3)),
                          CheckedPopupMenuItem<String>(
                              value: _checkedValue4,
                              checked: isChecked(_checkedValue4),
                              child: Text(_checkedValue4))
                        ])),
          ),
        ));
  }
}

    flutter doctor -v 
    [✓] Flutter (Channel master, 3.11.0-2.0.pre.55, on macOS 13.3 22E252 darwin-arm64, locale en-NG)
    • Flutter version 3.11.0-2.0.pre.55 on channel master at /Users/dammya/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 835b892d7f (3 weeks ago), 2023-05-07 01:30:22 +0530
    • Engine revision 23f730efbf
    • Dart version 3.1.0 (build 3.1.0-83.0.dev)
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • 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 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] VS Code (version 1.78.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] VS Code (version 1.78.0)
    • VS Code at /Users/dammya/.Trash/Visual Studio Code 20.07.05.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (4 available)
    • sdk gphone arm64 (mobile) • emulator-5554                        • android-arm64  • Android 11 (API 30) (emulator)
    • iPhone 14 Pro (mobile)    • DCF2031A-7EA9-42FF-8CD4-D4584F3E7A6D • ios            • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)           • macos                                • darwin-arm64   • macOS 13.3 22E252 darwin-arm64
    • Chrome (web)              • chrome                               • web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

• No issues found!

    [✓] Flutter (Channel stable, 3.10.2, on macOS 13.3 22E252 darwin-arm64, locale
    en-NG)
    • Flutter version 3.10.2 on channel stable at /Users/dammya/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 9cd3d0d9ff (5 days ago), 2023-05-23 20:57:28 -0700
    • Engine revision 90fa3ae28f
    • Dart version 3.0.2
    • DevTools version 2.23.1

[✓] Android toolchain - develop for Android devices (Android SDK version
    32.1.0-rc1)
    • Android SDK at /Users/dammya/Library/Android/sdk
    • Platform android-33, build-tools 32.1.0-rc1
    • ANDROID_HOME = /Users/dammya/Library/Android/sdk
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build
      11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14E222b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.2)
    • 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
      11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.3.2)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • 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

[✓] VS Code (version 1.78.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.50.0

[✓] VS Code (version 1.78.0)
    • VS Code at /Users/dammya/.Trash/Visual Studio Code 20.07.05.app/Contents
    • Flutter extension version 3.50.0

[✓] Connected device (4 available)
    • sdk gphone arm64 (mobile) • emulator-5554                        •
      android-arm64  • Android 11 (API 30) (emulator)
    • iPhone 14 Pro (mobile)    • DCF2031A-7EA9-42FF-8CD4-D4584F3E7A6D • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator)
    • macOS (desktop)           • macos                                •
      darwin-arm64   • macOS 13.3 22E252 darwin-arm64
    • Chrome (web)              • chrome                               •
      web-javascript • Google Chrome 113.0.5672.126

[✓] Network resources
    • All expected network resources are available.

• No issues found!
  3. dam-ease
    added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    has reproducible stepsThe issue has been confirmed reproducible and is ready to work on
    workaround availableThere is a workaround available to overcome the issue
    found in release: 3.10Found to occur in 3.10
    found in release: 3.11Found to occur in 3.11
    and removed
    in triagePresently being triaged by the triage team
    on May 30, 2023
  4. flutter-triage-bot
    added
    multiteam-retriage-candidate
    team-designOwned by Design Languages team
    triaged-designTriaged by Design Languages team
    on Jul 8, 2023
  5. TahaTesser
    added
    d: api docsIssues with https://api.flutter.dev/
    and removed
    d: api docsIssues with https://api.flutter.dev/
    on Aug 7, 2023
  6. TahaTesser
    self-assigned this
    on Aug 7, 2023
  7. TahaTesser
    added this to Nevercodeon Aug 7, 2023
  8. github-project-automation
    moved this to To do in Nevercodeon Aug 7, 2023
  9. TahaTesser
    moved this from To do to In progress in Nevercodeon Aug 7, 2023
  10. TahaTesser
    moved this from In progress to PR submitted in Nevercodeon Aug 8, 2023
  11. auto-submit
    closed this as completedin #132054on Aug 8, 2023
  12. auto-submit
    added a commit that references this issue on Aug 8, 2023

    Add `PopupMenuButton.iconColor`, `PopupMenuTheme.iconSize` and fix bu…

    b77b149
  13. github-project-automation
    moved this from PR submitted to Done (PR merged) in Nevercodeon Aug 8, 2023

  14. github-actions commented on Aug 22, 2023

    @github-actions
    github-actionsbot
    on Aug 22, 2023

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  15. github-actions
    locked as resolved and limited conversation to collaborators on Aug 22, 2023
  16. dam-ease
    added
    r: fixedIssue is closed as already fixed in a newer version
    on Aug 28, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

found in release: 3.10Found to occur in 3.10found in release: 3.11Found to occur in 3.11frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onp: material_uimaterial_ui package in flutter/packagesr: fixedIssue is closed as already fixed in a newer versionteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages teamworkaround availableThere is a workaround available to overcome the issue

Type

No type

Projects

  • Nevercode
    Status
    Done (PR merged)

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions