Cursor
Utilities for controlling the mouse cursor shown when the pointer is over an element on web and desktop targets.
On this page
Basic Usage#
cursor-* maps a Tailwind cursor name to the matching native cursor and applies it through a MouseRegion. A plain WDiv can show a pointer cursor without being wrapped in WAnchor or a manual MouseRegion.
interactivity/cursor_basic
A live demo of this example follows.
cursor_basic.dart
View source
Open demo
// A clickable-feeling row without WAnchor
WDiv(
className: 'cursor-pointer px-4 py-3 rounded-lg bg-blue-500 dark:bg-blue-600',
child: WText('Click me', className: 'text-white'),
)
The cursor is a hover affordance only; it changes how the pointer looks, not how taps are handled. Wire taps through WAnchor / WButton as usual.
Quick Reference#
| Class | Flutter cursor |
|---|---|
cursor-auto / cursor-default |
SystemMouseCursors.basic |
cursor-pointer |
SystemMouseCursors.click |
cursor-wait |
SystemMouseCursors.wait |
cursor-progress |
SystemMouseCursors.progress |
cursor-text |
SystemMouseCursors.text |
cursor-vertical-text |
SystemMouseCursors.verticalText |
cursor-move |
SystemMouseCursors.move |
cursor-help |
SystemMouseCursors.help |
cursor-not-allowed |
SystemMouseCursors.forbidden |
cursor-none |
SystemMouseCursors.none |
cursor-context-menu |
SystemMouseCursors.contextMenu |
cursor-cell |
SystemMouseCursors.cell |
cursor-crosshair |
SystemMouseCursors.precise |
cursor-alias |
SystemMouseCursors.alias |
cursor-copy |
SystemMouseCursors.copy |
cursor-no-drop |
SystemMouseCursors.noDrop |
cursor-grab |
SystemMouseCursors.grab |
cursor-grabbing |
SystemMouseCursors.grabbing |
cursor-all-scroll |
SystemMouseCursors.allScroll |
cursor-col-resize |
SystemMouseCursors.resizeColumn |
cursor-row-resize |
SystemMouseCursors.resizeRow |
cursor-n-resize / cursor-e-resize / cursor-s-resize / cursor-w-resize |
resizeUp / resizeRight / resizeDown / resizeLeft |
cursor-ne-resize / cursor-nw-resize / cursor-se-resize / cursor-sw-resize |
resizeUpRight / resizeUpLeft / resizeDownRight / resizeDownLeft |
cursor-ew-resize / cursor-ns-resize |
resizeLeftRight / resizeUpDown |
cursor-nesw-resize / cursor-nwse-resize |
resizeUpRightDownLeft / resizeUpLeftDownRight |
cursor-zoom-in / cursor-zoom-out |
zoomIn / zoomOut |
Flutter has no "auto" cursor, so cursor-auto resolves to the same basic arrow as cursor-default.
How It Works#
WDiv wraps its content in a MouseRegion when a cursor-* token is present. When the WDiv also carries hover: / focus: / active: classes it is already wrapped in WAnchor (whose MouseRegion uses click when the anchor has gesture callbacks, basic when it is disabled, and with neither it defers to the next applicable cursor, which can be the click cursor of an enclosing control such as a clickable WAnchor around the WDiv); the cursor-* MouseRegion sits deeper in the tree, so its cursor wins for the area it covers regardless of the anchor's default. Last token wins: cursor-pointer cursor-text resolves to text.
Cursors are a no-op on touch platforms (there is no pointer to style); the token is simply inert there.
Responsive Design#
Combine cursor-* with breakpoint prefixes to change the affordance per viewport.
WDiv(className: 'cursor-default md:cursor-pointer')
Dark Mode#
The cursor itself is theme-independent, but pair the surrounding colour tokens with their dark: peers as usual.
WDiv(className: 'cursor-pointer bg-white dark:bg-gray-800')
Related Documentation#
- WAnchor: exposes a
mouseCursorconstructor prop for fully imperative control. - Transitions: smooth state changes on hover.