Flutter:使用Hover Widget不能在Touch Input设备上工作

Question

我做了一个小部件，它由一个图像(头像)组成，当你把鼠标悬停在它上面时，你可以选择一个文件作为新的头像。由于一个奇怪的原因，一些PNG文件无法工作。因此，在显示它之前，我将PNG转换为JPG。它在桌面平台和桌面Web上运行良好。当使用触摸时，它不会工作，并且试图用手势控制来包装它也不会工作。这就给了我们一个在网络上的触控设备上无法使用的小部件。我使用不同的网页和桌面平台，因为文件选择器不能在网络上工作。

桌面:

HoverWidget(
hoverChild: Container(
height: sy(68),
width: sy(68),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 0.1,
),
),
child: CircleAvatar(
radius: sy(68),
backgroundColor: Colors.white,
backgroundImage: Img.FileImage(filee),
child: ClipRRect(
borderRadius:
BorderRadius.all(Radius.circular(sy(68))),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 4, sigmaY: 4),
child: Container(
alignment: Alignment.center,
color: Colors.grey.withOpacity(0.1),
child: Center(
child: Material(
elevation: 5.0,
borderRadius: BorderRadius.circular(30.0),
color: const Color(0xff1f59b6),
child: ElevatedButton(
child: Container(
height: sy(16),
width: sy(42),
child: Center(
child: Text(
"Choose Image",
style: TextStyle(
fontSize: sy(6),
fontWeight: FontWeight.bold),
))),
onPressed: () {
_selectFile(context);
},
),
)),
),
),
),
),
),
onHover: (event) {
setState(() {
hovered = true;
});
},
child: Container(
height: sy(68),
width: sy(68),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 0.1,
),
),
child: CircleAvatar(
radius: sy(68),
backgroundColor: Colors.white,
backgroundImage: Img.FileImage(filee),
),
),
),

在Web:

HoverWidget(
hoverChild: Container(
height: sy(68),
width: sy(68),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 0.1,
),
),
child: CircleAvatar(
radius: sy(68),
backgroundColor: Colors.white,
backgroundImage:
Image.network(img).image,
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(sy(68))),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 4, sigmaY: 4),
child: Container(
alignment: Alignment.center,
color:
Colors.grey.withOpacity(0.1),
child: Center(
child: Material(
elevation: 5.0,
borderRadius:
BorderRadius.circular(30.0),
color: const Color(0xff1f59b6),
child: ElevatedButton(
child: Container(
height: sy(16),
width: sy(42),
child: Center(
child: Text(
"Choose Image",
style: TextStyle(
fontSize: sy(6),
fontWeight:
FontWeight
.bold),
))),
onPressed: () async {
var image =
await ImagePicker()
.pickImage(
source:
ImageSource
  .gallery);
provider.setImage(image);
img = provider.image.path;
},
),
)),
),
),
),
),
),
onHover: (event) {
setState(() {
hovered  = true;
});
},
child: Container(
height: sy(68),
width: sy(68),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 0.1,
),
),
child: CircleAvatar(
radius: sy(68),
backgroundColor: Colors.white,
backgroundImage:
Image.network(img).image,
),
),
),

Answer 1

将悬停小部件替换为手势检测器，将悬停值默认设置为false。现在它可以点击了。您可以使用https://pub.dev/packages/platform_detect来检测平台和浏览器，以决定何时使用悬停，何时使用单击。我遇到了这个问题，所以我想和大家分享一下，希望能有所帮助!

GestureDetector(
onTap: () {
setState(() {
hoverd = true;
});
Timer(Duration(seconds: 10), () {
setState(() {
hoverd = false;
});
});
},
child: hoverd == true
? Container(
height: sy(68),
width: sy(68),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 0.1,
),
),
child: CircleAvatar(
radius: sy(68),
backgroundColor: Colors.white,
backgroundImage:
Image.network(img).image,
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(sy(68))),
child: BackdropFilter(
filter: ImageFilter.blur(
sigmaX: 4, sigmaY: 4),
child: Container(
alignment: Alignment.center,
color: Colors.grey
.withOpacity(0.1),
child: Center(
child: Material(
elevation: 5.0,
borderRadius:
BorderRadius.circular(
30.0),
color:
const Color(0xff1f59b6),
child: ElevatedButton(
child: Container(
height: sy(16),
width: sy(42),
child: Center(
child: Text(
"Choose Image",
style: TextStyle(
fontSize: sy(6),
fontWeight:
FontWeight
  .bold),
))),
onPressed: () async {
var image = await ImagePicker()
.pickImage(
source:
ImageSource
  .gallery);
provider
.setImage(image);
img =
provider.image.path;
setState(() {
hoverd = false;
});
},
),
)),
),
),
),
),
)
: Container(
height: sy(68),
width: sy(68),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(
color: Colors.white,
width: 0.1,
),
),
child: CircleAvatar(
radius: sy(68),
backgroundColor: Colors.white,
backgroundImage:
Image.network(img).image,
),
),
)