Skip to content

Caret Color

Use caret-{color} utilities to change the color of the text input cursor (caret). The Style widget injects a Theme whose textSelectionTheme.cursorColor is set to the resolved color, so any Material TextField inside picks up the tint automatically.

Use utilities like caret-rose-500 and caret-lime-600 to change the color of the text input cursor (focus the textarea to see it):

Style('caret-pink-500 ...', child: TextField())
ClassDescription
caret-{color}-{shade}Set caret to a palette color (e.g. caret-pink-500).
caret-{color}-{shade}/{N}Set caret with N% opacity (e.g. caret-pink-500/50).
caret-transparentTransparent caret.
caret-blackSolid black.
caret-whiteSolid white.