如何在文本框内添加图标

Question

我已经使用 icon: Icon(Icons.mail), 向文本字段添加了图标，但是它出现在文本字段之外。

如何改变图标的位置，使其显示在文本框内。

文本字段：

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

Answer 1

您需要使用 prefixIcon 属性而不是像

这样的 icon

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

Answer 2

PrefixIcon:

An icon that appears before the prefixText and before the editable part of the text field, within the decoration's container.

下面的代码可以解决问题

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
        )

如何在文本框内添加图标

How to add icon inside textfield

textfield

flutter