僅當 cursor 位於 flutter 內時，如何使文本字段的邊框以不同方式更改顏色

Question

我想更改邊框的顏色，但僅當 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",
                  ),
                ),
              ),

Answer 1

您可以使用 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;});
    }
  }
)

Answer 2

當您單擊文本字段時，此示例將更改邊框 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)),
          ),
        ),