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:
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?
Use cursorColor
to change color for cursor of TextField
TextField(
cursorColor: Colors.black, //add this line
)