[英]how to make the border of a text field change color when the cursor is inside flutter
[英]how to make the border of a text field change color differently only when the cursor is inside flutter
我想更改边框的颜色,但仅当 cursor 在文本字段中但我使用容器小部件来编辑文本字段的边框时。 我还想在文本字段的右侧放置一个填充,以使文本字段中的提示文本看起来更好。 但是当我尝试进行所有这些更改时,填充会影响轮廓输入边框。 这就是我目前所拥有的:这正是我想要的外观,但仅限于 cursor 内部
这是我的代码:
// email adress text field
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade600),
borderRadius: BorderRadius.circular(7)),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "youremail@example.com",
),
),
),
您可以使用 InkWell 包装您的文本字段小部件并将 setState() 传递给 onHover 方法,当用户鼠标进入文本字段空间时,该方法将更新您的文本字段边框
late bool _isHovering;
@override
void initState()
{
_isHovering = false;
}
InkWell(
child: Container(
decoration: BoxDecoration(
border: Border.all(color: _isHovering ? Colors.green : Colors.grey.shade600),
borderRadius: BorderRadius.circular(7)),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: "youremail@example.com",), ),),,
onTap: () {
//Leave it empty, like that.
}
onHover: (isHovering) {
_setState(() {_isHovering = isHovering;});
}
}
)
当您单击文本字段时,此示例将更改边框 colors
TextField(
controller: messageTextFieldController,
obscureText: false,
maxLines: null,
keyboardType: TextInputType.multiline,
decoration: InputDecoration(
border: const OutlineInputBorder(),
labelText: 'Write a message...',
isDense: true,
enabledBorder: OutlineInputBorder(
borderSide: const BorderSide(width: 2.0, color: Colors.amber),
borderRadius: BorderRadius.circular(32),
),
focusedBorder: OutlineInputBorder(
borderSide: const BorderSide(color: Colors.red, width: 2.0),
borderRadius: BorderRadius.circular(32.0)),
),
),
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.