PopupMenuButton not able to change icon when clicked-CodePudding

I'm using the PopupMenuButton in flutter for a web based project and trying to change the popupmenubutton icon when it's clicked. So in its initial state it would show Icons.menu and when opened, it could would Icons.close and once clicked again revert back to Icons.menu.

I have tried onSelected which does not get called at all when clicked in an attempt to change the icon.

I have used an icon or a child IconButton per the docs and used onPressed to setState however that doesn't work either.

Currently the elevated button when clicked, does not show the dropdown menu, nor does it update the icon.

import 'package:flutter/material.dart';
 
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> {
 bool menuClicked = true;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[

        PointerInterceptor(
    intercepting: true,
    child:  PopupMenuButton<String>(
      offset: const Offset(10.0, 50.0),
      color: Colors.black,
 
 child: ElevatedButton(
      onPressed: () {
        setState(() {
          menuClicked = !menuClicked;
        });
      },
      child: Icon((menuClicked = true)
          ? Icons.menu
          : Icons.close),),
         
 
      
      itemBuilder: (BuildContext context) =>
          <PopupMenuEntry<String>>[
        
PopupMenuItem(
                          value: "close",
                          
                            child: ListTile(
                                leading: Icon(Icons.close, color: Colors.white),
                                title: Text('Close',
                                    style: TextStyle(color: Colors.white)),
                                onTap: () {
                                  Navigator.pop(context);
                                }),
                         
                        ),
         
      ],
    ),
        ],
      ),
      ),
      body: Center(
        child: Text('test'),
      ),
    );
  }
}

CodePudding user response：

Equal sign will be ==

Icon((menuClicked == true) ? Icons.menu : Icons.close),

or you can do

Icon(menuClicked ? Icons.menu : Icons.close),

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool menuClicked = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: <Widget>[
          GestureDetector(
            behavior: HitTestBehavior.translucent,
            onPanDown: (details) {
              setState(() {
                menuClicked = true;
              });
            },
            child: PopupMenuButton<String>(
              offset: const Offset(10.0, 50.0),
              color: Colors.black,
              onSelected: (value) {
                setState(() {
                  menuClicked = false;
                });
              },
              padding: EdgeInsets.zero,
              onCanceled: () {
                setState(() {
                  menuClicked = false;
                });
              },
              child: Icon(menuClicked ? Icons.close : Icons.menu),
              itemBuilder: (BuildContext context) => [
                PopupMenuItem(
                  value: "close",
                  child: ListTile(
                    leading: Icon(Icons.close, color: Colors.white),
                    title: Text(
                      'Close',
                      style: TextStyle(color: Colors.white),
                    ),
                    onTap: () {
                      Navigator.pop(context);
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
       
    );
  }
}