Hovering stylus #148810
Description
Use case
Hovering with a stylus should produce the same visual effect as hovering with a mouse. The gif below shows what hovering some buttons looks like on native Android. By hovering I mean not actually making contact with the screen.
Proposal
Flutter should also show hover effects for a hovering stylus.
The code that handles this for most Material widgets is here in ink_well.dart. However, MouseRegion seems to not call onEnter or onExit for a hovering stylus, though it does call onHover, interestingly!
If MouseRegion called onEnter and onExit for stylus input, then this issue would be solved. @dkwingsmt Do you know why this is, or if there is another way to listen for a hovering stylus's exit? I saw a related comment from you: #36085 (comment)
If that can't be solved, then we could work around it. We could use onHover and a timeout, for example. Or maybe we could use PointerRouter, as suggested on StackOverflow.
Repro app showing only onHover works
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Demo'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 74.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Works for hover, not for enter/exit.
Listener(
onPointerHover: (PointerHoverEvent event) {
print('justin Listener onPointerHover ${event.kind}');
},
child: Container(width: 100, height: 100, color: Colors.red),
),
// Also works for hover but not for enter/exit.
MouseRegion(
onEnter: (PointerEnterEvent event) {
print('justin MouseRegion onEnter ${event.kind}');
},
onExit: (PointerExitEvent event) {
print('justin MouseRegion oneEit ${event.kind}');
},
onHover: (PointerHoverEvent event) {
print('justin MouseRegion hover ${event.kind}');
},
child: Container(width: 100, height: 100, color: Colors.blue),
),
],
),
),
),
);
}
}