How to animate images on mouse hover using Flutter for Web?

Question

I am a JavaScript developer and I am new to Flutter. I just want to animate a set of images on mouse hover like this using Flutter for Web. It includes Scaling, Opacity and Grayscale transformations. How to accomplish this in Flutter? Thanks in advance.

Answer 1

Other than the animation part of your question. The onHover argument of the InkWell only works if you specify the onTap argument first.

InkWell(
  child: SomeWidget(),
  onTap: () {
    //You can leave it empty, like that.
  }
  onHover: (isHovering) {
    if (isHovering) {
      //The mouse is hovering.
    } else {
      //The mouse is no longer hovering.
    }
  }
)

From the documentation, here's the benefit of the boolean, which is passed to the onHover callback:

The value passed to the callback is true if a pointer has entered this part of the material and false if a pointer has exited this part of the material.