how to change TextField cursor color in flutter

6,284

Solution 1

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

Solution 2

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:

enter image description here

Solution 3

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(),
 ),
);
Share:
6,284
SILENMUS
Author by

SILENMUS

Updated on December 27, 2022

Comments

  • SILENMUS
    SILENMUS over 1 year

    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.

    enter image description here

    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 ??