Как добавить значок внутри текстового поля

Question

Я добавил значок в текстовое поле, используя icon: Icon(Icons.mail),, однако он появляется за пределами текстового поля.

Как изменить положение значка, чтобы оно отображалось внутри текстового поля.

TextField:

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

Answer 1

PrefixIcon:

Значок, который отображается перед текстом prefixText и перед редактируемой частью текстового поля внутри контейнера украшения.

Ниже код будет работать для вопроса

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
        )

Answer 2

Вам нужно использовать атрибут prefixIcon вместо icon, как

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