Styling PopupMenuItem with Flutter themes

In my previous post I looked at creating a reusable popup menu in flutter and applying a flexible theme from ThemeData. After a bit of testing I’ve uncovered two minor wrinkles.

The first is that the icons in my PopupMenuItem don’t take their style from iconTheme as I had anticipated. Instead, for some unknown reason they seem to inherit their colour from the foregroundColor attribute of AppBarTheme. I don’t know if this is a bug or an intentional decision – but it is slightly frustrating. Fortunately it is easy enough to fix by forcing the icons to use the iconTheme as follows.

Icon(item.icon, color: Theme.of(context).iconTheme.color,)

The second is that I had overlooked the effect of surfaceTintColor on the overall look of my app. In the dark theme, it is not noticeable. This is probably why I missed it because except for testing I spend most of my time in dark theme. However, what I discovered was that in the light theme despite my background colour being set to grey, it had a slightly blueish tinge. It illustrates one of the pitfalls of working with a framework. You are extending a pattern developed by someone else without always knowing how they have applied things. Fortunately this one is also extremely easy to fix by declaring the tint to be transparent

popupMenuTheme: PopupMenuThemeData(
  color: (_isDark) ? Color(0xffffff77) : Color(0xfff5f5f5),
  surfaceTintColor: Colors.transparent,,

You can see this in action in our lightweight text editing app, Tiger Text.