Flutter PopupMenu change icon color

7,831

Solution 1

Just do this

 appBar: AppBar(
          iconTheme: IconThemeData(color: Colors.white, size: 10.0),
          elevation: 4.0,
          backgroundColor: Colors.black,
)

Solution 2

You can wrap the Icon widget inside IconButton which provides color property to change the icon color. Sample code below:

value: 'Get Link',
    child: ListTile(
    leading: IconButton(
      icon: Icon(Icons.phonelink,
      color: Colors.blue,),
      onPressed: () {},
    ),
    title: Text('Get link', style: Theme.of(context).textTheme.body1),
    ),

enter image description here

Share:
7,831
willy wijaya
Author by

willy wijaya

Updated on December 10, 2022

Comments

  • willy wijaya
    willy wijaya over 1 year

    how to change icon colour on PopupMenuButton, I have used Theme with iconTheme but it doesn't affect the icon on CheckedPopupMenuItem nor PopupMenuItem.

    Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0.0,
            backgroundColor: Colors.transparent,
            actions: <Widget>[
              Theme(
                data: Theme.of(context).copyWith(
                  cardColor: Colors.indigo,
                  iconTheme: IconThemeData(color: Colors.white),
                ),
                child: ListTileTheme(
                  iconColor: Colors.white,
                  child: PopupMenuButton<String>(
                    onSelected: _showCheckedMenuSelections,
                    itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
                      CheckedPopupMenuItem<String>(
                        value: _checkedValue1,
                        checked: _showRoles,
                        child: Text(_checkedValue1, style: Theme.of(context).textTheme.body1),
                      ),
                      const PopupMenuDivider(),
                      PopupMenuItem<String>(
                        value: 'Get Link',
                        child: ListTile(
                          leading: Icon(Icons.phonelink),
                          title: Text('Get link', style: Theme.of(context).textTheme.body1),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
    

    The result is look like this : enter image description here

  • willy wijaya
    willy wijaya about 5 years
    yes, i am using it on PopupMenuItem, but the CheckedPopupMenu's icon can't be changes.
  • willy wijaya
    willy wijaya about 5 years
    it is just a string and bool value, you can refer here