custom_cursor_with_icon #

A Flutter TextField widget with an animated cursor that displays a customizable icon below the caret. Replace Flutter's default cursor with a fully configurable cursor line and any widget as the cursor icon -- perfect for branded text fields, creative UIs, or playful input experiences.

Demo #

https://github.com/user-attachments/assets/8cf6ea62-67de-4bef-bffc-514674e64fd1

https://github.com/lakshya1goel/custom_cursor_with_icon/raw/main/assets/preview_video.mp4

Features #

• Custom cursor icon -- use any widget (icons, images, Lottie animations, custom shapes) below the caret
• Animated blinking -- configurable blink duration and behavior (always, only when focused, or static)
• Cursor styling -- color, width, height ratio, and glow/shadow effects
• Overflow handling -- smart fade effect at the left edge when text scrolls
• Hint text -- with custom styling and horizontal offset
• Focus control -- showCursorWhenUnfocused to keep the cursor visible without focus
• Full TextField API -- input formatters, keyboard types, obscure text, max length, read-only, and more
• Zero config -- works out of the box with sensible defaults, no required parameters

Installation #

Add to your pubspec.yaml:

dependencies:
  custom_cursor_with_icon: ^1.0.0

Then run:

flutter pub get

Quick Start #

import 'package:custom_cursor_with_icon/custom_cursor_with_icon.dart';

Minimal -- zero configuration #

const CustomCursorTextField()

With hint and custom icon #

CustomCursorTextField(
  hint: 'Type something...',
  icon: Icon(Icons.edit, size: 12, color: Colors.blue),
  cursorColor: Colors.blue,
  onChanged: (value) => print(value),
)

Examples #

Glow cursor with shadow #

CustomCursorTextField(
  cursorColor: Colors.blue,
  cursorWidth: 2.0,
  cursorBoxShadow: [
    BoxShadow(
      color: Colors.blue.withValues(alpha: 0.6),
      blurRadius: 8,
      spreadRadius: 2,
    ),
  ],
  icon: Icon(Icons.auto_awesome, size: 12, color: Colors.blue),
)

Always-visible cursor (even when unfocused) #

CustomCursorTextField(
  showCursorWhenUnfocused: true,
  cursorColor: Colors.green,
  icon: Icon(Icons.fiber_manual_record, size: 8, color: Colors.green),
)

Blink only when focused #

CustomCursorTextField(
  shouldBlinkAlways: false,
  unfocusOnTapOutside: true,
)

With input formatting #

CustomCursorTextField(
  inputFormatters: [FilteringTextInputFormatter.digitsOnly],
  keyboardType: TextInputType.number,
  suffixIcon: Icon(Icons.pin),
)

Any widget as cursor icon #

CustomCursorTextField(
  iconSize: 18,
  icon: ClipRRect(
    borderRadius: BorderRadius.circular(9),
    child: Image.network('https://i.pravatar.cc/100', width: 18, height: 18),
  ),
)

Full InputDecoration override #

CustomCursorTextField(
  decoration: InputDecoration(
    border: OutlineInputBorder(),
    labelText: 'Email',
    prefixIcon: Icon(Icons.email),
    contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
  ),
)

API Reference #

Cursor Appearance #

Icon #

Blink Behavior #

Text & Input #

Layout & Decoration #

Focus & Interaction #

Callbacks #

Migration from 0.1.0 #

The cursor is now hidden when unfocused by default. If you relied on the cursor being visible at all times, add:

CustomCursorTextField(
  showCursorWhenUnfocused: true,
)

Running the Example #

The example app includes 6 demos: @ symbol icon, network image, Lottie animation, borderless input, glassmorphism with suffix, and always-visible cursor.

cd example
flutter create .    # generate platform folders if needed
flutter run

Contributing #

Contributions are welcome! Please open an issue or submit a pull request on GitHub.

License #

MIT License. See LICENSE for details.