how to make the border of a text field change color differently only when the cursor is inside flutt-CodePudding

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: "[email protected]",
                  ),
                ),
              ),

CodePudding user response：

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: "[email protected]",), ),),,
  onTap: () {
    //Leave it empty, like that.
  }
  onHover: (isHovering) {
      _setState(() {_isHovering = isHovering;});
    }
  }
)

CodePudding user response：

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)),
          ),
        ),