Flutter WebMedium30 XP4 min read
How do you handle mouse hover and keyboard shortcuts in Flutter Web?
TL;DR: Use MouseRegion for hover effects and cursor changes. CallbackShortcuts + Focus for keyboard shortcuts (Ctrl+K, Escape, arrow keys). GestureDetector.onSecondaryTap for right-click. Desktop web users expect these interactions — they don't exist on mobile.
Full Answer
Desktop web users expect hover states, keyboard navigation, right-click, and scroll wheel. None of these exist on mobile. Flutter Web requires explicit handling for desktop-quality UX.
Mouse
- ▸MouseRegion.onEnter/onExit: hover state changes
- ▸MouseRegion.cursor: SystemMouseCursors.click for clickable elements
- ▸GestureDetector.onSecondaryTap: right-click context menu
- ▸Listener.onPointerSignal: scroll wheel (PointerScrollEvent)
Keyboard
- ▸CallbackShortcuts: define key combos for specific actions
- ▸Shortcuts + Actions: app-wide intent-based shortcuts
- ▸Focus + autofocus: ensure a widget receives key events
Code Examples
dartMouse hover and keyboard shortcuts
Output
// Hover: card elevates + changes color // Escape: closes modal // Ctrl+K: opens search // Arrow keys: navigate questions
Common Mistakes
- ✗Not setting SystemMouseCursors.click on custom clickable widgets — cursor stays as text/arrow
- ✗CallbackShortcuts without a focused ancestor — shortcuts only work within a focused widget subtree
Interview Tip
💡
Ctrl+K for command palette, Escape for modals, arrow keys for navigation — these are table stakes for professional desktop web apps. Showing awareness of desktop UX patterns impresses interviewers.
#mouse#keyboard#hover#shortcuts#desktop-web