I want to change the color of the border but only when the cursor is in the text field but I used a container widget to edit the borders of the text field. I also want to put a padding to the right in the text field to make the hint text in the text field look better. But when I try to make all those changes, the padding affects the outline input border. This is what I have presently: This is exactly how I want it to look, but only with the cursor inside
This is my code:
// 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",
),
),
),
You can wrap your textfield widget with InkWell and pass setState() into onHover method, which will be updating yours textfield borders, when users mouse entering in textField space
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;});
}
}
)
This example will change border colors when you click on text field
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)),
),
),
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.