How to colour each item of the popup menu in flutter?

Question

I want to give each container colour. I tried wrapping it in a container and then assiging the colour, but it's not colouring the whole item container. I tried every possible way but its not working. enter image description here

PopupMenuButton<String>(
  itemBuilder: (BuildContext context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: 'option1',
        child: ListTile(
          leading: Icon(Icons.delete),
          title: Text('Delete'),
        ),
      ),
      PopupMenuDivider(),
      PopupMenuItem<String>(
        value: 'option2',
        child: ListTile(
          leading: Icon(Icons.edit),
          title: Text('Edit'),
        ),
      ),
      PopupMenuItem<String>(
        value: 'option3',
        child: ListTile(
          leading: Icon(Icons.share),
          title: Text('Share'),
        ),
      ),
    ];
  },
  onSelected: (String value) {
    // Handle the selected option
    switch (value) {
      case 'option1':
        // Perform delete operation
        break;
      case 'option2':
        // Perform edit operation
        break;
      case 'option3':
        // Perform share operation
        break;
    }
  },
)

];

Answer 1

One way to achieve your purpose is to wrap the child of each PopupMenuItem with a Container post which you can setup the color property of that Container. Something like:

PopupMenuButton<String>(
  itemBuilder: (BuildContext context) {
    return <PopupMenuEntry<String>>[
      PopupMenuItem<String>(
        value: 'option1',
        child: Container( // <---- Notice this
          color: Colors.red, // Set the color here as per your need
          child: ListTile(
            leading: Icon(Icons.delete),
            title: Text('Delete'),
          ),
        ),
      ),
      // Similarly for others...

DARTPAD DEMO