Flutter 图像悬停叠加效果

如何解决Flutter 图像悬停叠加效果

我正在做一个 flutter web 项目，我想在我的图像上添加以下叠加效果，每当光标悬停在图像上时，应该会出现几个按钮，并且图像的不透明度会降低（或模糊） ) 悬停。

我尝试了 InkWell 和 GestureDectector，但似乎没有任何效果。

解决方法

尝试使用 hovering 包实现 flutter_web 上的悬停效果。

首先导入包：

import 'package:hovering/hovering.dart';

在您的 GlobalKey 中添加一个 StatelessWidget：

final _key = GlobalKey<ScaffoldState>();

然后，使用 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,color: Colors.red,)

检查示例用例 here

,

嗨，拉吉，这很简单

您只需要使用 Listener Widget 来检测 onPointerHover 并更新您的应用程序状态

下面是api链接

Listener in Flutter

如有任何困难请在下方评论

,

好的，随着时间的推移，我尝试了很多方法，并希望分享我的见解，以防其他人也在寻找相同的解决方案。

因此，实现此目的的基本方法是使用 Hovering 包。 另一种方法是使用 MouseRegion。

您可以使用 MouseRegion 的 onEnter 和 onExit 属性来检测光标何时进入并离开您尝试添加悬停效果的区域/容器。 您可以使用它在不同的应用程序状态之间切换。 或者它也有 onHover 属性，这基本上表明光标当前是否悬停在该区域上，您也可以使用它。

注意：我也尝试了 Listener 小部件，但是我不太理解它，或者它太复杂而无法使用。无论如何，我无法实现我想要的。