如何在文本框中添加图标

Question

我使用 icon: Icon(Icons.mail) 将图标添加到文本字段中，但是它出现在文本字段外面。

如何更改图标的位置，以便它显示在文本字段内部。

TextField：

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.mail),
  ),
),

- cool_stuff_coming

Answer 1

你需要使用 prefixIcon 属性而不是 icon，例如：

TextField(
  decoration: InputDecoration(prefixIcon: Icon(Icons.mail)),
)

- Chenna Reddy

Answer 2

前缀图标：

出现在文本字段的前缀文本和可编辑部分之前，装饰容器内的图标。

下面的代码适用于问题：

TextField(
  decoration: InputDecoration(
    prefixIcon: Icon(Icons.mail),
  ),
);

如果我们想要在图标周围添加一些填充，可以这样做：

最初的回答：

 prefixIcon: Padding(
          padding: const EdgeInsetsDirectional.only(start: 30.0),
          child: Icon(Icons.access_alarm), // Change this icon as per your requirement
        )

- Jitesh Mohite

---

如果您想将其放置在文本字段的末尾而不是文本之前，那么可以吗？ - user3808307