[英]Flutter - TextField hint text padding is different than input text when focused vs unfocused
[英]How to change the label text color when text filed is focused when more than one textfield used in flutter
我的要求是我有 2 個文本字段小部件,當我單擊第一個文本字段小部件時,我需要將 label 文本顏色匹配更改為 cursor 和邊框顏色。 當我單擊第二個文本字段時,以同樣的方式,預期相同的行為。 如何實現這一點。
以下是我迄今為止嘗試過的代碼:
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;
}
});
}),
),
您可以將FocusNode
與偵聽器一起使用來更改 label 顏色。 我們只需要在焦點改變時更新 UI。 您也可以用同樣的方法更改 label 文本。
final FocusNode focusNode1 = FocusNode();
final FocusNode focusNode2 = FocusNode();
@override
void initState() {
super.initState();
focusNode1.addListener(() {
setState(() {});
});
focusNode2.addListener(() {
setState(() {});
});
}
並在TextFiled
上分配 focuse 節點
TextField(
cursorColor: Color(0xFFD9A506),
focusNode: focusNode1,
decoration: InputDecoration(
labelStyle: TextStyle(
color: focusNode1.hasFocus
? Color(0xFFD9A506)
: Color(0xFF919191)),
labelText: "UserName",
對下一個TextFiled
執行相同的操作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.