Search code examples
flutterdartuser-interfacecursortextfield

How to change TextField cursor color to black in Flutter?

I want to change the default blue cursor color in a Flutter TextField to black when it's focused. Here's an image of what I'm referring to:

enter image description here

Code:

import 'package:flutter/material.dart';

class test extends StatefulWidget {
  const test({Key? key}) : super(key: key);

  @override
  State<test> createState() => _testState();
}

class _testState extends State<test> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF6F6F6),
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: const [
             
              Center(
                child: SizedBox(
                  width: 350,
                  child: TextField(
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 20,
                      decoration: TextDecoration.none,
                      decorationStyle: TextDecorationStyle.dotted,
                      decorationColor: Color(0xffF6F6F6),
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
              ),
     
              Center(
                child: SizedBox(
                  width: 350,
                  child: TextField(
                    decoration: InputDecoration(
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Color(0xffD7D7D7)),
                      ),
                    ),
                    style: TextStyle(
                      fontSize: 20,
                      decoration: TextDecoration.none,
                      decorationStyle: TextDecorationStyle.dotted,
                      decorationColor: Color(0xffF6F6F6),
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.normal,
                      color: Color(0xff3B3B3B),
                    ),
                  ),
                ),
              ),
             
            ],
          ),
        ),
      ),
    );
  }
}

I understand how to change the underline color, but I'm specifically having trouble changing the color of the blinking cursor (the "|" character). How can I achieve this?

Solution

  • Use cursorColor to change color for cursor of TextField

    TextField(
   cursorColor: Colors.black, //add this line
)