'Unable to change the focusColor property of Input Decoration in Flutter

I need to change the color of the TextField on Focus (or whenever user tap on it). I'm using focusColor property of InputDecoration but it is not working as expected. Can you please help me with it . I'm using the code below :

    return Card(
  child: Theme(
    data: Theme.of(context).copyWith(
      primaryColor: CustomColors.grey,
    ),
    child: TextField(
      autofocus: widget.autofocus,
      onSubmitted: (value) => setState(() {
        if (onSearch != null) {
          onSearch(value);
        }
      }),

      controller: searchTextController,
      onChanged: (value) => setState(() {
        if (widget.onChange != null) {
          widget.onChange!(value);
        }
      }),
      decoration: InputDecoration(
        border: InputBorder.none,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(3.0)),
            borderSide: BorderSide(
                width: 0.5,
                color: CustomTheme.searchBarCardBorderColor(context))),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(3.0)),
            borderSide: BorderSide(
                color: CustomTheme.searchBarfocusBorderColor(context))),
        focusColor: CustomTheme.searchBarCursorNFocusColor(context),
      ),
    ),
  ),
);

flutter

Solution 1:^[1]

I met with the same problem before. The bottom line is that you need to change the default theme. So, you can use:

child: new Theme(
          data: new ThemeData(
            primaryColor: Colors.red,
          ),
          child: new TextField(
      controller: searchTextController,
      onChanged: (value) => setState(() {
        if (widget.onChange != null) {
          widget.onChange!(value);
        }
      }),
      decoration: InputDecoration(
        hoverColor: Theme.searchBarhoverColor(context),
        contentPadding: EdgeInsets.only(top: 8, left: 6, bottom: 6),
        border: InputBorder.none,
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(3.0)),
        ),
        ));

Just noticed: you used border: InputBorder.none so your border is turned off

Solution 2:^[2]

Try this code

  TextField(
            controller: searchTextController,
                    onChanged: (value) => setState(() {
                  if (widget.onChange != null) {
                  widget.onChange!(value);
                 }
                       }),
                    decoration: InputDecoration(
                      enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                        borderSide:
                            BorderSide(color: Colors.lightBlueAccent, width: 1),
                      ),
                      disabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                        borderSide: BorderSide(color: Colors.red, width: 1),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(4.0)),
                        borderSide: BorderSide(color: Colors.black),
                      ),
                    ),
                  ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	bl1nk-
Solution 2	Anandh Krishnan

'Unable to change the focusColor property of Input Decoration in Flutter

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]