How to customize the textfield cursor in Flutter

How to customize the textfield cursor in Flutter:

Flutter TextField widget provides a couple of properties to customize the cursor. Using these properties, we can easily customize the color, width, height etc. of a textfield cursor. In this post, we will check these different properties with examples for each.

Changing the color of a cursor:

The cursorColor property is used to change the color of a cursor. For example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
            appBar: AppBar(
              title: Text('Example'),
            ),
            body: Container(
                margin: EdgeInsets.all(30),
                child: TextField(
                  cursorColor: Colors.red,
                  decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      labelText: "Enter your Text"),
                ))));
  }
}

This example will change the cursor color to red.

Width, Height and corner radius of a TextField cursor:

The width, height and corner radius of a cursor can be changed by cursorWidth, cursorHeight and cursorRadius props. For example,

TextField(
        cursorColor: Colors.blue,
        cursorWidth: 10.0,
        cursorRadius: Radius.elliptical(10, 10),
        decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: "Enter your Text"),
                )

The above change will create one round corner cursor as like below:

show/hide the TextField cursor:

We can also show/hide the textfield cursor by using the showCursor property. It takes a boolean value. For example:

TextField(
        cursorColor: Colors.blue,
        cursorWidth: 10.0,
        showCursor: false,
        cursorRadius: Radius.elliptical(10, 10),
        decoration: InputDecoration(
        border: OutlineInputBorder(),
        labelText: "Enter your Text"),
                )

It will hide the cursor of the text field.

CodeVsColor

How to customize the textfield cursor in Flutter