I have a form with multiple textfields of which two are of inputtype text and emailAddress when i click the email address from the text Textfield the focus does not switch. I am using the focusNode to apply styling to the border of the contain. Any ideas what's causing this behavior?

Container(
  decoration: BoxDecoration(
      border: Border(
          bottom: BorderSide(
              width: 1,
              color: nameFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
          )
      )
  ),
  child: Row(
    children: [
      const Text('Name |  ', style: TextStyle(color: Colors.grey)),
      Expanded(
          child: TextField(
            keyboardType: TextInputType.text,
            onChanged: (value){
              name = value;
            },
            autofocus: true,
            focusNode: nameFocusNode,
            style: const TextStyle(color: Colors.white),
            decoration: InputDecoration(
                hintText: 'john Smith',
                hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
                border: InputBorder.none,
                enabledBorder: InputBorder.none,
                focusedBorder: InputBorder.none
            ),
          )
      ),
    ],
  ),
),
const SizedBox(height: 15.0,),
Container(
  decoration: BoxDecoration(
      border: Border(
          bottom: BorderSide(
              width: 1,
              color: phoneFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
          )
      )
  ),
  child: Row(
    children: [
      const Text('Phone |   ', style: TextStyle(color: Colors.grey)),
      Expanded(
          child: TextField(
            keyboardType: TextInputType.phone,
            onChanged: (value){
              phone = PhoneNumber.check(value);
            },
            focusNode: phoneFocusNode,
            style: const TextStyle(color: Colors.white),
            decoration: InputDecoration(
                hintText: '2609xxx',
                hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
                border: InputBorder.none,
                enabledBorder: InputBorder.none,
                focusedBorder: InputBorder.none
            ),
          )
      ),
    ],
  ),
),
const SizedBox(height: 15.0,),
Container(
  decoration: BoxDecoration(
      border: Border(
          bottom: BorderSide(
              width: 1,
              color: emailFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
          )
      )
  ),
  child: Row(
    children: [
      const Text('Email |  ', style: TextStyle(color: Colors.grey)),
      Expanded(
          child: TextField(
            keyboardType: TextInputType.emailAddress,
            focusNode: emailFocusNode,
            onChanged: (value){
              email = value;
            },
            style: const TextStyle(color: Colors.white),
            decoration: InputDecoration(
                hintText: '[email protected]',
                hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
                border: InputBorder.none,
                enabledBorder: InputBorder.none,
                focusedBorder: InputBorder.none
            ),
          )
      ),
    ],
  ),
),
const SizedBox(height: 15.0,),
Container(
  decoration: BoxDecoration(
      border: Border(
          bottom: BorderSide(
              width: 1,
              color: passwordFocusNode.hasFocus?Colors.white.withOpacity(0.2):greyBackground
          )
      )
  ),
  child: Row(
    children: [
      const Text('Password |  ', style: TextStyle(color: Colors.grey)),
      Expanded(
          child: TextField(
            obscureText: true,
            keyboardType: TextInputType.visiblePassword,
            maxLength: 14,
            enableSuggestions: false,
            focusNode: passwordFocusNode,
            autocorrect: false,
            onChanged: (value) {
              password = value;
            },
            style: const TextStyle(color: Colors.white),
            decoration: InputDecoration(
                hintText: '*****',
                hintStyle: TextStyle(color: Colors.grey.withOpacity(0.4),),
                border: InputBorder.none,
                counterText: "",
                enabledBorder: InputBorder.none,
                focusedBorder: InputBorder.none
            ),
          )
      ),
    ],
  ),
),

I have tried wraping the textfields in a gestureDetector and forcing unfocus but it doesnt work either.

CodePudding user response：

When select Textfield, focusNode has changed, but widget not rebuild

Create listener function to listen focusNode when clicked to rebuild UI:

Add this code:

  @override
  void initState() {
    super.initState();
    passwordFocusNode.addListener(_handleListener);
    nameFocusNode.addListener(_handleListener);
    phoneFocusNode.addListener(_handleListener);
    emailFocusNode.addListener(_handleListener);
  }

  void _handleListener(){
    setState(() {

    });
  }