如何更改showMenu下PopupMenuItem的背景颜色？

Question

I don't use PopupMenuButton.

Because in my case, showMenu would be more appropriate.

onLongPress: () => _onRoomLongPressed(context, _tappedPosition, model, room),

void _onRoomLongPressed(BuildContext context, Offset tappedPosition,
    RoomsModel model, Room room) {
  final RenderBox overlay = Overlay.of(context).context.findRenderObject();

  showMenu(
    context: context,
    position: RelativeRect.fromRect(
        tappedPosition & Size.zero, Offset.zero & overlay.size),
    items: [
      PopupMenuItem(
        value: 'delete',
        child: Text('delete'),
      ),
    ],
  ).then((String value) {
    switch (value) {
      case 'delete':
        model.remove(room);
        break;
    }
  });
}

Don't change the theme of MaterialApp() .

I expect that the background color of PopupMenuItem to be white and the Text color black.

Answer 1

You need to wrap your widget that opens up the menu in a Builder and have Theme as the parent of this Builder . Here is the code that will get you going.

@override
Widget build(BuildContext context) {
  return Theme(
    data: Theme.of(context).copyWith(
      cardColor: Colors.white,
      textTheme: Theme.of(context).textTheme.apply(bodyColor: Colors.black),
    ),
    child: Builder(
      builder: (context) {
        return RaisedButton(
          child: Text("Show menu"),
          onPressed: () {
            showMenu(
              context: context,
              position: RelativeRect.fromLTRB(0, 100, 0, 0),
              items: [
                PopupMenuItem(child: Text("Item 0"), value: 0),
                PopupMenuItem(child: Text("Item 1"), value: 1),
                PopupMenuItem(child: Text("Item 2"), value: 2),
              ],
            );
          },
        );
      },
    ),
  );
}