如何在Flutter中更改TextField光标颜色

Question

我正在使用AppBar()中的TextField小部件。

有一个问题，正如您所看到的，当文本字段获取焦点时，我无法设置光标颜色。

通常，textfield光标在获取焦点时会闪烁。

我设置了光标颜色属性，以及AppBar、textfield中的每个颜色属性，但它不起作用，甚至textfield提示文本也无效。

            appBar: AppBar(
              title: Card(
                margin: EdgeInsets.only(
                    top: common_gap * 1.5, bottom: common_gap * 1.5),
                child: TextField(
                  cursorColor: Constants.kPrimaryOrange,
                  controller: _controller,
                  focusNode: _focusNode,
                  onChanged: (value) {
                    setState(() {
                      _searchText = value;
                    });
                  },
                  decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.search,
                      size: 20,
                    ),
                    suffixIcon: _controller.text.length != 0
                        ? IconButton(
                            icon: Icon(
                              Icons.cancel,
                              size: 20,
                              color: _searchText == ''
                                  ? Colors.transparent
                                  : Colors.black87,
                            ),
                            onPressed: () {
                              setState(() {
                                _controller.clear();
                                _searchText = '';
                                _focusNode.unfocus();
                              });
                            },
                          )
                        : Container(),
                  ),

                ),

你能告诉我如何解决这个问题吗？

- SILENMUS

---

看一下这个链接： https://dev59.com/81MI5IYBdhLWcg3wir6J - fajar ainul

你需要将所有文本字段的颜色更改为你想要的颜色，并修复无法工作的单一颜色。 - alireza daryani

Answer 1

您可以为您的解决方案更改特定文本字段的光标颜色：

TextField(cursorColor: Colors.white)

但是如果您希望为项目中的所有内容更改它，则可以在此处检查此处

- shorol

---

当我输入文本时，它可以工作，但如果没有文本，我就看不到光标。 - SILENMUS

兄弟，根据你的需要更改光标颜色。 - shorol

Answer 2

有两种方法可以做到这一点

第一种方法

将颜色直接分配给单个TextField或TextFormField

TextFormField(
  cursorColor: Colors.green,)

---

第二个方法

使用TextSelectionThemeData在整个应用程序中分配光标颜色

MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        textSelectionTheme: TextSelectionThemeData(
          cursorColor: Colors.green
        ),
      ),
      home: LoginScreen(),
    )

输出：

- Jitesh Mohite

Answer 3

您能否在main.dart页面的materialapp中添加它。然后停止应用程序并再次运行。

MaterialApp(
 title: "App Name",
 theme: ThemeData(
  // for iOS
  cupertinoOverrideTheme: CupertinoThemeData(
    primaryColor: Constants.kPrimaryOrange,
  ),
   // for others Android
  cursorColor: Constants.kPrimaryOrange,
home: HomePage(),
 ),
);

- hasan karaman

---

它不起作用了~~ 通常它应该是可以工作的，我猜， 我认为这是一个有点奇怪的情况。 - SILENMUS

Answer 4

  @override
  ThemeData appBarTheme(BuildContext context) {
    return Theme.of(context).copyWith(
      primaryColor: Colors.white,
      hintColor: Colors.white,
      textSelectionTheme: Theme.of(context).textSelectionTheme.copyWith(
            cursorColor: Colors.white, /// <--- THIS IS THE COLOR
          ),
      iconTheme: const IconThemeData(
        color: Colors.white,
      ),
      textTheme: const TextTheme(
        headline6: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
      ),
    );
  }

- Carlos Luis Jordán