Как показано на изображении ниже, первое изображение отображает мое текстовое поле до того, как я нажму на него. второе изображение показывает, как оно отображается после начала ввода и нажатия на него. Я хочу удалить отображение текста метки при наборе текста. Как мне это сделать?
TextFormField(
controller: usernameEditingController,
decoration: InputDecoration(
fillColor: textWhite,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
labelText: "User Name",
labelStyle: TextStyle(
fontSize: 15,
color: textdarkBlue,
),
hintText: "ex: James",
hintStyle: TextStyle(
color: textdarkBlue,
fontFamily: "Paralucent",
fontSize: 14)),
style: TextStyle(
color: textdarkBlue,
),
validator: (text) {
if (text!.isEmpty) {
return "Username can't be empty";
} else {
return null;
}
},
onChanged: (String? text) {
userName = text!;
//print(userName);
},
),
Это поведение свойства labelText
, если оно вам не нужно, просто удалите его и используйте вместо него hintText.
TextFormField(
controller: usernameEditingController,
decoration: InputDecoration(
fillColor: textWhite,
filled: true,
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(
color: textdarkBlue,
),
),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
focusedErrorBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.red),
),
isDense: true,
contentPadding: EdgeInsets.fromLTRB(10, 30, 10, 0),
hintText: "ex: James",
hintStyle: TextStyle(
color: textdarkBlue,
fontFamily: "Paralucent",
fontSize: 14)),
style: TextStyle(
color: textdarkBlue,
),
validator: (text) {
if (text!.isEmpty) {
return "Username can't be empty";
} else {
return null;
}
},
onChanged: (String? text) {
userName = text!;
//print(userName);
},
),
Это отображается как поведение OutlineInputBorder
.
Есть несколько разных способов. Один из них использует FocusNode
, цель состоит в том, чтобы предоставить labelText:null
при смене фокуса.
String userName = "";
late FocusNode focusNode = FocusNode()
..addListener(() {
setState(() {});
});
.....
TextFormField(
// controller: usernameEditingController,
focusNode: focusNode,
decoration: InputDecoration(
labelText: focusNode.hasFocus ? null : "User Name",