How to change textfield background color on focus

Question

I need to change textfield background color grey to white when user tap on textfiled. Focused textfield's background color should change grey to white and other un focused textfield background color stay remain grey.

i tried this

inputDecorationTheme: InputDecorationTheme(
        filled: true,
        fillColor: AppColors.textFieldBG,
        focusColor: AppColors.white,
        hintStyle: const TextStyle(color: AppColors.labelText, fontSize: 16),
        contentPadding:
            const EdgeInsets.symmetric(horizontal: 10, vertical: 20),

        focusedBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.black26),
            borderRadius: BorderRadius.circular(10)),
        disabledBorder: OutlineInputBorder(
            borderSide: const BorderSide(color: Colors.transparent),
            borderRadius: BorderRadius.circular(10)),
        enabledBorder: UnderlineInputBorder(
          borderSide: const BorderSide(color: Colors.transparent),
          borderRadius: BorderRadius.circular(10),
        ),

Here is text-filed code:

    TextField(
              focusNode: focusNode,
              onChanged: onChanged,
              controller: controller,
              maxLines: maxLines,
              onTap: onTap,
              enabled: isEnable,
              decoration: InputDecoration(
                  filled: true,
                  fillColor: AppColors.textFieldBG,
                  focusColor: AppColors.white,
                  hintText: hintText,
                  suffixIcon: isShowSuffixIcon
                      ? InkWell(
                          onTap: onTapIcon,
                          child: const Icon(
                            Icons.date_range_outlined,
                            color: AppColors.labelText,
                          ),
                        )
                      : null),
            ),

can you please add your text field complete code – nagendra nag Mar 10 '22 at 05:01 — nagendra nag, Mar 10 '22 at 05:01
hey @nagendranag i added textfield code.Thank You. – Harsh Sureja Mar 10 '22 at 05:07 — Harsh Sureja, Mar 10 '22 at 05:07

score 1 · Answer 1 · answered Mar 10 '22 at 05:07

1

You can do something like this:

FocusNode _focusNode = FocusNode();
Color _color = Colors.grey;

@override
void initState() {
  _focusNode.addListener(() {
    if(_focusNode.hasFocus){
      setState(() {
        _color = Colors.white;
      });
    }
    else{
      setState(() {
        _color = Colors.grey;
      });
    }
  });
}

TextField(
  decoration: InputDecoration(
    fillColor: _color,
    filled: true
  ),
  focusNode: _focusNode,
),

answered Mar 10 '22 at 05:07

Heck Codes

141
1
7

I tried this. it show _focusNode.hasFocus false every time even after requesting this focus scope. – Harsh Sureja Mar 10 '22 at 05:26

score 0 · Answer 2 · answered Mar 10 '22 at 05:19

0

You just need to use a Focus node for the TextField

Just follow along this documentation you will get to know more about the possibilities you can get with using the Focus Node for textFormField or textField.

answered Mar 10 '22 at 05:19

Ankit Kumar Maurya

991
7
20

How to change textfield background color on focus

2 Answers2