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.

Solution 1

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.

Solution 2

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