Flutter Image Hovering Overlay Effect

Question

I am working on a flutter web project and I want to the following overlay effect over my image that whenever the cursor hovers over the image, a few buttons should show up, and the opacity of the image gets reduced (or blurred out) while hovering.

I have tried InkWell and GestureDectector but nothing seems to work.

This is basically what I am trying to achieve : Preview.

score 2 · Answer 1 · answered Mar 26 '21 at 11:17

Try using hovering package to achieve the hovering effect on flutter_web.

First, import the package:

import 'package:hovering/hovering.dart';

Add a GlobalKey within your StatelessWidget:

final _key = GlobalKey<ScaffoldState>();

And then, use the HoverWidget:

              HoverWidget(
                hoverChild: Container(
                  height: 200,
                  width: 200,
                  color: Colors.green,
                  child: Center(child: Text('Hover Me..')),
                ),
                onHover: (event) {
                  _key.currentState.showSnackBar(SnackBar(
                    content: Text('Yaay! I am Hovered'),
                  ));
                },
                child: Container(
                  height: 200,
                  width: 200,
                  color: Colors.red,
                  child: Center(child: Text('Hover Me..')),
                ),
              )

Check the example use case here

score 0 · Answer 2 · answered Mar 26 '21 at 11:17

0

Hi Raj this is pretty simple

You just need to use Listener Widget which detects onPointerHover and update you app's state

Here is the api link follow it

Listener in Flutter

If any difficulties comment down below

answered Mar 26 '21 at 11:17

Manav Sarkar

89
1
9

score 0 · Accepted Answer · answered Apr 18 '21 at 09:34

Okay, over time I have tried many ways and would like to share my insight in case somebody else is looking for the same solution too.

So, the basic way to achieve this is to use the Hovering package. Another way would be to use MouseRegion.

You can use the onEnter and onExit property of MouseRegion to detect when did the cursor entered and left the region/container you are trying to add a hove effect to. You can use that to switch between your different app states. Or it has onHover property as well, that basically tells that if the cursor is currently hovering that region or not you can use that too.

Note: I tried the Listener widget as well, but either I didn't understood it well, or it was too complicated to work with. Anyways, I couldn't achieve what I wanted.

Flutter Image Hovering Overlay Effect

3 Answers3