如何在 Flutter 中将 TextField 光标颜色更改为黑色？

Question

我想将 Flutter TextField 中默认的蓝色光标颜色在聚焦时更改为黑色。这是我所指的图像：

代码：

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),
                    ),
                  ),
                ),
              ),
             
            ],
          ),
        ),
      ),
    );
  }
}

我了解如何更改下划线颜色，但我在更改闪烁光标（“|”字符）的颜色时遇到了麻烦。我怎样才能实现这个目标？

Answer 1

使用

cursorColor

更改

TextField

光标的颜色

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