I want to build a menu bar in Flutter for my web app. I want to show my popupmenuitems as a popup when I hover the button. Is this possible?

PopupMenuButton(
  tooltip: '',
  color: const Color(0xFF262533),
  position: PopupMenuPosition.under,
  child: const Text(
    'Agenturen & Clubs',
    style: TextStyle(
      color: Colors.white,
      fontSize: 24,
      fontFamily: 'Poppins',
    ),
  ),
  itemBuilder: (BuildContext context) =>
      <PopupMenuEntry>[
        const PopupMenuItem(
          child: ListTile(
            title: Text(
              'Escortagenturen',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        const PopupMenuItem(
          child: ListTile(
            title: Text(
              'Bordelle',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        const PopupMenuItem(
          child: ListTile(
            title: Text(
              'Laufhauser',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        const PopupMenuItem(
          child: ListTile(
            title: Text(
              'Saunaclubs',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        const PopupMenuItem(
          child: ListTile(
            title: Text(
              'Domina & BDSM-Studios',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
        const PopupMenuItem(
          child: ListTile(
            title: Text(
              'Tantra & Massaage-Studios',
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ]),

CodePudding user response：

you can use HandCursor to detect when the mouse hover upon a widget

class HandCursor extends Listener {
 HandCursor({Widget child}) : super(
  onPointerHover: (PointerHoverEvent evt) {
   // show your popup here or setState with you update
  },
  onPointerExit: (PointerExitEvent evt) {
   // show your popup here or setState with you update
  },
  child: child
 );
}

then you can use it as a widget

HandCursor(
  child:  Icon(Icons.star)
),

CodePudding user response：

  InkWell(
                      onHover: (value) {
                        // show your dialog
                      },
                      child: Text(
                        'Agenturen & Clubs',
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24,
                          fontFamily: 'Poppins',
                        ),
                      ),
                    ),