Flutter图像悬停叠加效果

Question

我正在开发一个 flutter web 项目，我想要在我的图像上实现以下叠加效果，每当光标悬停在图像上时，就会出现一些按钮，并且图像的不透明度会降低(或模糊) )悬停时。

我尝试过 InkWell 和 GestureDetector，但似乎没有效果。

这基本上就是我想要实现的目标:Preview .

Answer 1

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

首先，导入包:

import 'package:hovering/hovering.dart';

在您的 StatelessWidget 中添加一个 GlobalKey:

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,
                  width: 200,
                  color: Colors.red,
                  child: Center(child: Text('Hover Me..')),
                ),
              )

检查示例用例 here