Flutter PopupMenuButton - 如何有条件地禁用它

Question

I have a simple PopupMenuButton implementation on appTitle . Here it is:

PopupMenuItem<int> _buildMenuItem(int size) {
  return PopupMenuItem<int>(
    value: size,
    child: Text('${size}x$size'),
  );
}

return Scaffold(
  appBar: AppBar(
    title: Text('Some title'),
    actions: <Widget>[
      PopupMenuButton<int>(
        icon: Icon(Icons.refresh),
        onSelected: _canReplay()
            ? (int size) {
                // do something with the size
              }
            : null,
        itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
              _buildMenuItem(3),
              _buildMenuItem(4),
              _buildMenuItem(5),
            ],
      ),
    ],
  ),
  body: ...
);

UPDATED - I have realized my initial question might not be quite clear, so I rephrased it below:

What I would like to achieve is to disable PopupMenuButton based on app condition. Using the above code, I can enable / disable onSelected method invocation, however, icon appearance does not change.

To summarize - I would like the entire PopupMenuButton along with its icon to become disabled in the same fashion IconButton is disabled with you pass null to its onPressed method. That way, the user won't be able to even press the button and to invoke the menu.

Is that achievable?

Answer 1

You can use the enabled property of the PopupMenuItem widget.

  PopupMenuItem<int> _buildMenuItem(int size, bool enabled) {
    return PopupMenuItem<int>(
      value: size,
      child: Text('${size}x$size'),
      enabled: enabled,
    );
  }


      itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
        _buildMenuItem(3, true),
        _buildMenuItem(4, false),
        _buildMenuItem(5, true),
      ],

More info: https://docs.flutter.io/flutter/material/PopupMenuItem/enabled.html

UPDATE

Based on the new information you give us about your question, it's not possible to disable the button using the PopupMenuButton button, but this is Flutter, so you can create your own Widget.

I created a custom PopupMenuButton where you can use the enabled property, take a look :

https://gist.github.com/diegoveloper/a388dd42a01ffff04cd51ec026381fe3

Usage:

    MyOwnPopupMenuButton<int>(
          enabled: _canReplay(),
          icon: Icon(
            Icons.refresh,
            color: _canReplay() ? Colors.black : Colors.black.withOpacity(0.4),
          ),
          onSelected: _canReplay()
              ? (int size) {
                  // do something with the size
                }
              : null,
          itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
                _buildMenuItem(3),
                _buildMenuItem(4),
                _buildMenuItem(5),
              ],
        )

Answer 2

After few hours, I ended up with a following solution, which fits my requirements and it is implemented w/o any complex custom widgets. Here it is:

return Scaffold(
  appBar: AppBar(
    title: Text(allTranslations.text('Some title')),
    actions: <Widget>[
      _canReplay()
          ? PopupMenuButton<int>(
              icon: Icon(Icons.refresh),
              onSelected: (int size) {
                // do something with size
              },
              itemBuilder: (BuildContext context) => <PopupMenuItem<int>>[
                    _buildMenuItem(3),
                    _buildMenuItem(4),
                    _buildMenuItem(5),
                  ],
            )
          : IconButton(
              icon: Icon(Icons.refresh),
        onPressed: null,
            ),
    ],
  ),
  body: ...
);