Блог

Мое требование состоит в том, что у меня есть 2 виджета текстового поля, когда я нажимаю на первый виджет текстового поля, мне нужно изменить цвет текста метки, соответствующий цвету курсора и границы. Точно так же, когда я нажимаю на 2-е текстовое поле, ожидается то же поведение. Как этого добиться.

Ниже приведен мой код, который я пробовал до сих пор:

 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 amp;amp; !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 amp;amp; !password.isEmpty) {  isTextFiledFocus = true;  } else {  isTextFiledFocus = false;  }  });  }),  ),   

Вы можете использовать FocusNode со слушателем, чтобы изменить цвет метки. Нам просто нужно обновить пользовательский интерфейс при изменении фокуса. Вы также можете изменить текст метки таким же образом.

 final FocusNode focusNode1 = FocusNode();  final FocusNode focusNode2 = FocusNode();   @override  void initState() {  super.initState();  focusNode1.addListener(() {  setState(() {});  });   focusNode2.addListener(() {  setState(() {});  });  }  

И назначьте узел фокусировки на TextFiled

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

Сделайте то же самое для следующего TextFiled .