how to change the three dot colour of popup menu button in flutter

userzLcd1 0
Viewed 39

Hello flutter family I stucked in changing the color of the three-dot button of the popup menu button in my flutter project please anyone help me to clear this error how to achieve this my code

 PopupMenuButton<Menumodels>(color: Colors.grey,
            onSelected: (item)=>onSelected(context,item),
          itemBuilder: (context)=>[...MenuItems.items.map(buildItem).toList(
            
          )])
          ],

PopupMenuItem<Menumodels>buildItem(
    Menumodels item)=>PopupMenuItem<Menumodels>(value: item,
    child: Row(
    children: [
      Icon(item.icon,color: Colors.black,size: 20),
      SizedBox(width: 11),
      Text(item.text),
    ],
  ));
dart flutter
3 Answers
import 'package:flutter/material.dart';

// This is the type used by the popup menu below.
enum Menu { itemOne, itemTwo, itemThree, itemFour }

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String _selectedMenu = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          // This button presents popup menu items.
          PopupMenuButton<Menu>(
icon: Icon(Icons.more_vert,color: Colors.white), //add this 
              // Callback that sets the selected popup menu item.
              onSelected: (Menu item) {
                setState(() {
                  _selectedMenu = item.name;
                });
              },
              itemBuilder: (BuildContext context) => <PopupMenuEntry<Menu>>[
                    const PopupMenuItem<Menu>(
                      value: Menu.itemOne,
                      child: Text('Item 1'),
                    ),
                    const PopupMenuItem<Menu>(
                      value: Menu.itemTwo,
                      child: Text('Item 2'),
                    ),
                    const PopupMenuItem<Menu>(
                      value: Menu.itemThree,
                      child: Text('Item 3'),
                    ),
                    const PopupMenuItem<Menu>(
                      value: Menu.itemFour,
                      child: Text('Item 4'),
                    ),
                  ]),
        ],
      ),
      body: Center(
        child: Text('_selectedMenu: $_selectedMenu'),
      ),
    );
  }
}
MR Shubham vyas0

You can use icon param

PopupMenuButton(
          icon: Icon(Icons.more_vert,color: Colors.white), // add this line
          itemBuilder: (_) =>  ......,
          onSelected:....
)

Hope this will work for you.

Rohan Jariwala0

The easy way of doing this overriding the icon as @Rohan Jariwala shown on his post. The icon color comes from iconTheme's color. You can override it on theme level like

Theme(
  data: Theme.of(context).copyWith(
      iconTheme: IconTheme.of(context).copyWith(
    color: Colors.amber,
  )),
  child: PopupMenuButton(
Yeasin Sheikh0
Related