如何在Flutter中的textField中在可编辑文本和前缀图标之间添加空格

发布于06月23日

我还是个初学者，正在学习文本字段.我有一个文本字段，如下所示:

我想在前缀图标和可编辑文本之间添加一些填充.以下是我的代码:

TextField(
  style: const TextStyle(
    color: Color.fromARGB(125, 0, 0, 0),
  ),
  decoration: InputDecoration(
    border: const OutlineInputBorder(),
    hintText: 'Full Name',
    hintStyle: TextStyle(color: Colors.grey[300]),
    fillColor: Colors.white,
    filled: true,
    prefixIcon: Container(
      decoration: BoxDecoration(
        border: Border(
          right: BorderSide(
            color: Colors.grey[300]!,
          ),
        ),
      ),
      child: const Icon(
        Icons.person_outline,
        color: kPurple,
      ),
    ),
  ),
  cursorColor: kPurple,
)

推荐答案

您可以使用填充来包装图标小工具.或者可替换地将填充物添加到容器，

--试试下面的代码，在我这边运行得很好

   TextField(
          style: const TextStyle(
            color: Color.fromARGB(125, 0, 0, 0),
          ),
          decoration: InputDecoration(
            border: const OutlineInputBorder(),
            hintText: 'Full Name',
            hintStyle: TextStyle(color: Colors.grey[300]),
            fillColor: Colors.white,
            filled: true,
            prefixIcon: Container(
            margin: const EdgeInsets.only(
                  right: 40, top: 20, bottom: 20, left: 40),
              decoration: BoxDecoration(
                border: Border(
                  right: BorderSide(
                    color: Colors.grey[300]!,
                  ),
                ),
              ),
              child: const Icon(
                Icons.person_outline,
                color: Colors.purpleAccent,
              ),
            ),
          ),
          cursorColor: Colors.purple,
        ),