flutterdarttabs

Flutter - How to change the background color of selected popup menu item?


I am trying to create PopupMenu. How can I change the background color of a selected popup menu item? Thanks in advance!

Like this: enter image description here

Code sample:

PopupMenuButton(
                  icon: const Icon(
                    Icons.swap_vert,
                    size: 26,
                    color: Color(0xffffffff),
                  ),
                  itemBuilder: (context) {
                    return [
                      PopupMenuItem(
                        value: 0,
                        child: 
                          Text("Date",
                              style: GoogleFonts.poppins(
                                color: const Color(0xff000000),
                                fontSize: 14,
                                fontWeight: FontWeight.w500,
                                letterSpacing: 0.3,
                             
                      ),
                      PopupMenuItem<int>(
                        value: 1,
                        child: Text("Settings"),
                      ),
                      PopupMenuItem<int>(
                        value: 2,
                        child: Text("Logout"),
                      ),
                    ];
                  },
                  onSelected: (value) {},
                ),

Solution

  • Here's an example. Wrap the PopupMenuButton with Theme.

    class PopupMenuExample extends StatefulWidget {
      const PopupMenuExample({super.key});
    
      @override
      State<PopupMenuExample> createState() => _PopupMenuExampleState();
    }
    
    class _PopupMenuExampleState extends State<PopupMenuExample> {
      int? selectedMenu;
    
      @override
      Widget build(BuildContext context) {
        return Theme(
          data: Theme.of(context).copyWith(
            highlightColor: Colors.lightBlueAccent,
          ),
          child: PopupMenuButton<int>(
            icon: const Icon(
              Icons.swap_vert,
              size: 26,
              color: Color(0xffffffff),
            ),
            initialValue: selectedMenu,
            // Callback that sets the selected popup menu item.
            onSelected: (int item) {
              setState(() {
                selectedMenu = item;
              });
            },
            itemBuilder: (BuildContext context) => <PopupMenuEntry<int>>[
              const PopupMenuItem<int>(
                value: 0,
                child: Text('Example 1'),
              ),
              const PopupMenuItem<int>(
                value: 1,
                child: Text('Example 2'),
              ),
              const PopupMenuItem<int>(
                value: 2,
                child: Text('Example 3'),
              ),
            ],
          ),
        );
      }
    

    }