Question 377672 in Flutter Question posted in
The official Flutter documentation can be found here.

How can I detect cursor hover location on 2 stacked up widgets in Flutter

Currently, I am trying to work on a project that requires me to pass cursor hover behavior from the top stacked widget to its lower widget. While also performing operations needed on that widget itself. This is my current attempt on it:

        Stack(
          children: [
            Center(
              child: MouseRegion(
                onHover: (event) {
                  debugPrint('Red: ${event.position}');
                },
                child: Container(
                  height: 300,
                  width: 300,
                  color: Colors.red,
                ),
              ),
            ),
            Center(
              child: MouseRegion(
                hitTestBehavior: HitTestBehavior.translucent,
                onHover: (event) {
                  debugPrint('Green: ${event.position}');
                },
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.green,
                ),
              ),
            ),
          ],
        )

Here, on hovering over the green container, the debugPrint statement of red container, does not get invoked.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    It turned out it is quite easy for the MouseRegion widget specifically. We can simply set the opaque property to false, like this:

    Stack(
    children: [
    Center(
        child: MouseRegion(
        onHover: (event) {
            debugPrint('Red: ${event.position}');
        },
        child: Container(
            height: 300,
            width: 300,
            color: Colors.red,
        ),
        ),
    ),
    Center(
        child: MouseRegion(
        opaque: false, //This will let all the mouse events also passed on.
        onHover: (event) {
            debugPrint('Green: ${event.position}');
        },
        child: Container(
            height: 200,
            width: 200,
            color: Colors.green,
        ),
        ),
    ),
    ],
)

  2. 0

    hover will only works on top widget even if you stack 10 widgets each above, first or top widget only get hover effect.

    ex:- if you stack 10 papers each above and then you want to touch last paper from above you could never touch it that’s how stack works.

    so above widget can get hover effect and for lower widget you have to keep them aside to get hover fuctionality. that’s the solution.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search