flutter - How to change PopupMenuButton items icon color

Flutter - PopupMenuButton Items Icon Color

The PopupMenuButton class allows us to display a menu when pressed and calls onSelected when the menu is dismissed because an item was selected. The value passed to onSelected is the value of the selected menu item. The flutter developers can provide one of a child or an icon but not both. If developers provide an icon then PopupMenuButton behaves like an IconButton. If both child and icon are null, then a standard overflow icon is created depending on the platform.

The following flutter app development tutorial will demonstrate how to display both a text and an icon on each item in a PopupMenuButton widget. And how to change the icon color of menu items in a PopupMenuButton widget by a single setting. Here we used the PopupMenuButton class’s itemBuilder property to add items to the PupupMenuButton widgets. And we wrapped the PopupMenuButton widget with a Theme widget to set or change a common color for the menu items icon color.

The PopupMenuButton class’s itemBuilder property value is a PopupMenuItemBuilder instance. The PopupMenuItemBuilder is called when the button is pressed to create the items to show in the menu. The PopupMenuItemBuilder is used by PopupMenuButton to construct the items shown when the button is pressed lazily.

The flutter PopupMenuItem class represents an item in a material design popup menu. Normally the child of a PopupMenuItem is a Text widget. But in this flutter tutorial, we will display both a text and an icon on each item of the PopupMenuButton widget. And we also put the PopupMenuButton widget as a child of the Theme element so that we can set a common color for the menu items icon.

The PopupMenuItem class’s child property value is a widget below this widget in the tree. We will put a Row widget for this child property value. Then we will put an Icon widget and a Text widget in the Row widget.

Flutter developers can share colors and font styles throughout a flutter app by using the themes. Here we used the Theme widgets that define the colors and font styles for a particular part of the application.

The Theme class applies a theme to descendant widgets. A theme describes the colors and typographic choices of an application. The Theme class’s data property specifies the color and typography values for descendant widgets. The IconThemeData class defines the size, font variations, color, opacity, and shadows of icons.

Flutter developers used IconTheme to control those properties in a widget subtree. To obtain the current icon theme, use IconTheme.of. The IconThemeData class’s color property set or change the icon color of the child widget’s icon.

So finally, the flutter app developers can set or change the PopupMenuButton widget’s icon color by putting the PopupMenuButton inside a Theme widget. They also have to set the IconThemeData class color property value to define the PupupMenuButton’s items icon color.

main.dart

import 'package:flutter/material.dart';

void main() {runApp(const MyApp());}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const MyHomePage()
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: const Text("PopupMenuButton Icon Color"),
            actions: [
              Theme(
                  data: Theme.of(context).copyWith(
                      iconTheme: IconThemeData(
                          color: Colors.pink.shade800
                      )
                  ),
                  child: PopupMenuButton<int>(
                    //color: Colors.green.shade50,
                      offset: const Offset(0, 56),
                      itemBuilder: (context) => [
                        PopupMenuItem<int>(
                            child: Row(
                                children: const [
                                  Icon(Icons.shopping_cart),
                                  SizedBox(width: 8),
                                  Text("Add To Cart")
                                ]
                            )
                        ),
                        PopupMenuItem<int>(
                            child: Row(
                                children: const [
                                  Icon(Icons.upload),
                                  SizedBox(width: 8),
                                  Text("Upload")
                                ]
                            )
                        ),
                      ]
                  )
              )
            ]
        )
    );
  }
}