How to remove popup when I move the cursor away from the button in Flutter?

Question

I build this code below that makes possible to show my Popupmenubuttons Items when I put the cursor over the button without clicking the button. But there is a problem. I can show my items with this method but I can not make possible to close my items in the moment I move my cursor from the button. Please look carefully my code and tell me if you have any idea how to solve this.

openPopUpItem2() {
    GestureDetector? detector;
    searchForGestureDetector(BuildContext element) {
      element.visitChildElements((element) {
        if (element.widget != null && element.widget is GestureDetector) {
          detector = element.widget as GestureDetector;
        } else {
          searchForGestureDetector(element);
        }
      });
    }

    searchForGestureDetector(keyList[2].currentContext!);
    detector!.onTap!();
  }

The code below shows how I have used the function to show my popupItems.

 InkWell(
                  onHover: (value) {
                    if (value) openPopUpItem2();
                  },
                  onTap: () {},
                  child: PopupMenuButton(
                      key: keyList[2],
                      tooltip: '',
                      color: Color(0xFF262533),
                      position: PopupMenuPosition.under,
                      child: MouseRegion(
                        onEnter: (details) =>
                            setState(() => ishovering2 = true),
                        onExit: (details) => setState(() {
                          ishovering2 = false;
                        }),
                        child: Text(
                          'Blog',
                          style: TextStyle(
                            color: ishovering2 ? Colors.pink : Colors.white,
                            fontSize: 24,
                            fontFamily: 'Poppins',
                          ),
                        ),
                      ),
                      itemBuilder: (BuildContext context) => <PopupMenuEntry>[
                            PopupMenuItem(
                              child: OnHover(
                                builder: (isHovered) {
                                  final color = isHovered
                                      ? Colors.pink
                                      : const Color(0xFF262533);
                                  return ListTile(
                                    title: const Text(
                                      'Archiv',
                                      style: TextStyle(color: Colors.white),
                                    ),
                                    enabled: true,
                                    hoverColor: color,
                                    onTap: () {},
                                  );
                                },
                              ),
                            ),
                          ]),
                ),

score 0 · Answer 1 · answered Oct 20 '22 at 07:32

0

This is tricky indeed. What comes to my mind is if you would wrap your button on another InkWell and add some padding to it. And on onHover method you would dismiss your items.

Here is how I think it should look like:

InkWell(
   onHiver: (){
      dismissItems();
   },
   child:  
      Padding(
         padding: //some padding
         child: // your button
      )
)

answered Oct 20 '22 at 07:32

Ovidiu Uşvat

701
1
6
29

But how can i do that when i already have an Inkwell. I tried it but it didn't accepted another one @OvidiuUsvat – James James Oct 20 '22 at 07:47
you can use `mouseCursor` property if you want to have only one `InkWell` widget. But I can't tell you exactly how it works. – Ovidiu Uşvat Oct 20 '22 at 14:11
Maybe this will help: https://stackoverflow.com/questions/56211844/flutter-web-mouse-hover-change-cursor-to-pointer – Ovidiu Uşvat Oct 20 '22 at 14:15

How to remove popup when I move the cursor away from the button in Flutter?

1 Answers1