How to change the label text color when text filed is focused when more than one textfield used in flutter

Question

My requirement is I have 2 textfield widgets, when I click on first text field widget I need to change the label text color matching to cursor & border color. Same way when I click on 2nd text field, same behavior expected. How to achieve this.

Below is my code what I have tried so far:

Padding(
              padding: const EdgeInsets.only(left: 32.0, right: 32.0),
              child: TextField(
                cursorColor: Color(0xFFD9A506),
                decoration: new InputDecoration(
                  labelText: 'Username',
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(
                          color: Color(0xFFD9A506), style: BorderStyle.solid)),
                  enabledBorder: const UnderlineInputBorder(
                    borderSide: BorderSide(color: Color(0xFF919191)),
                  ),
                  labelStyle: new TextStyle(color: Color(0xFF919191)),
                ),
                onChanged: (value) {
                  userName = value;
                  setState(() {
                    if (!userName.isEmpty && !password.isEmpty) {
                      isTextFiledFocus = true;
                    } else {
                      isTextFiledFocus = false;
                    }
                  });
                },
              ),
            ),
            Padding(
              padding:
                  const EdgeInsets.only(top: 38.0, left: 32.0, right: 32.0),
              child: TextField(
                  cursorColor: Color(0xFFD9A506),
                  obscureText: isHidePassword,
                  enableSuggestions: false,
                  autocorrect: false,
                  decoration: new InputDecoration(
                    focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(
                            color: Color(0xFFD9A506),
                            style: BorderStyle.solid)),
                    labelText: 'Password',
                    suffixIcon: IconButton(
                        //eye icon
                        color: Color(0xFF919191),
                        onPressed: () {
                          //for keyboard to hide
                          FocusScopeNode currentFocus = FocusScope.of(context);
                          if (!currentFocus.hasPrimaryFocus) {
                            currentFocus.unfocus();
                          }
                          //for keyboard to hide
                          setState(() {
                            isHidePassword = !isHidePassword;
                          });
                        },
                        icon: Icon(isHidePassword
                            ? Icons.visibility
                            : Icons.visibility_off)), //eye icon
                    enabledBorder: const UnderlineInputBorder(
                      borderSide: BorderSide(color: Color(0xFF919191)),
                    ),
                    labelStyle: new TextStyle(color: Color(0xFF919191)),
                  ),
                  onChanged: (value) {
                    password = value;
                    setState(() {
                      if (!userName.isEmpty && !password.isEmpty) {
                        isTextFiledFocus = true;
                      } else {
                        isTextFiledFocus = false;
                      }
                    });
                  }),
            ),

Answer 1

You can use FocusNode with listener to change the label color. We just need to update the UI when focus is changed. You can also change the label text the same way.

  final FocusNode focusNode1 = FocusNode();
  final FocusNode focusNode2 = FocusNode();

  @override
  void initState() {
    super.initState();
    focusNode1.addListener(() {
      setState(() {});
    });

    focusNode2.addListener(() {
      setState(() {});
    });
  }

And assign focuse node on TextFiled

TextField(
 cursorColor: Color(0xFFD9A506),
 focusNode: focusNode1,
 decoration: InputDecoration(
  labelStyle: TextStyle(
      color: focusNode1.hasFocus
          ? Color(0xFFD9A506)
          : Color(0xFF919191)),
  labelText: "UserName",

Do the same for next TextFiled.