Unable to change the focusColor property of Input Decoration in Flutter-CodePudding

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

CodePudding user response：

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

CodePudding user response：

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