flutterhovergesturedrag

How do I detect if a GestureDetector is hovered in Flutter?


So I have a widget GestureDetector in Flutter and I want it to do something on "hover", like this (dragged in any direction):

example

Is it possible to do it with GestureDetector? Any help appreciated.


Solution

  • The MouseRegion

    The MouseRegion Widget MouseRegion exposes a few events related to, you guessed it, your mouse. These events are:

    OnEnter, which will trigger when your mouse enters the Widget.
    OnExit, which will trigger when your mouse leaves the Widget.
    OnHover, which will trigger both when your mouse enters the Widget and on every subsequent move inside the Widget.
    

    All of these actually are PointerEvents which return all sorts of informations regarding the user’s pointer. Here, we’re going to be looking at the current position of the user’s mouse inside the containing Widget which is stored under the guise of an Offset.

     class _MyHoverableWidgetState extends State<MyHoverableWidget>{
            // Our state
            bool amIHovering = false;
            Offset exitFrom = Offset(0,0);
        
            return MouseRegion(
                onEnter: (PointerDetails details) => setState(() => amIHovering = true),
                onExit: (PointerDetails details) => setState(() { 
                    amIHovering = false;
                    exitFrom = details.localPosition; // You can use details.position if you are interested in the global position of your pointer.
                }),
                child: Container(
                    width: 200,
                    height: 200,
                    child: Center(
                        child:Text(amIHovering ? "Look mom, I'm hovering" : "I exited from: $exitFrom"),
                    ), 
                ),
            );
    
        }