how to change TextField cursor color in flutter

Question

I'm using TextField widget in AppBar()

there is one problem , as you can see I cannot set cursor color when textfield focused

usually, textfield cursor blinks when it focused.

I set cursor color property , every color property in appbar, textfield but it doesn't work even textfield hint text doens't work too.

            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(),
                  ),

                ),

can you tell me how to fix this ??

check this out https://stackoverflow.com/questions/55991901/how-to-change-cursor-color-in-flutter — fajar ainul, Jan 26 '21 at 07:46
you must change all text field colors to what you want and change single color not working. — alireza daryani, Jan 26 '21 at 08:58

score 29 · Answer 1 · answered Jan 26 '21 at 09:13

29

You can change specific textfield cursor color for your solution:

TextField(cursorColor: Colors.white)

but if you want to change it for all out you project then you can check this here

answered Jan 26 '21 at 09:13

shorol

790
5
11

it works when I typing but if there is no text I cannot see the cursor – SILENMUS Jan 27 '21 at 06:57
bro change cursor color as your need. – shorol Jan 27 '21 at 08:11

score 19 · Answer 2 · answered Jul 18 '21 at 10:03

There are two ways to do that

First Approach

Assign color directly to individual TextField or TextFormField

TextFormField(
  cursorColor: Colors.green,)

Second Approach

Assign cursor color throughout the application using TextSelectionThemeData

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

Output:

score 0 · Answer 3 · answered Jan 26 '21 at 08:53

0

Can you add it in the materialapp on the main.dart page. and would you stop the application and run it again.

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

answered Jan 26 '21 at 08:53

hasan karaman

1,260
6
12

it doesn't work ~~ usually it'll works I guess , I think it's little bit weird case. – SILENMUS Jan 27 '21 at 06:50

score 0 · Answer 4 · answered Apr 10 '23 at 20:05


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

how to change TextField cursor color in flutter

4 Answers4

Linked