How to align suffixIcon to top of multi line TextField?

user_13391282 0
Viewed 1873

enter image description here

code:

TextField(
  maxLines:null,
  decoration: InputDecoration(
  suffixIcon: Icon(Icons.delete),
  ),
)

Everytime a new line is inserted, the icon centers itself.

flutter-layout flutter
2 Answers

I found a work-around. Just use suffix property of TextField instead of suffixIcon

code:

TextField(
  maxLines:null,
  decoration: InputDecoration(
  suffix: Icon(Icons.delete),
  ),
)

output:

enter image description here

Note: This solution may affect the design of your TextField and the Icon is not visible when TextField is not focused or when it has no data

user_133912820

Here is what I achieved using Padding around Icon:

enter image description here

Container(
    height: 100,
    child: TextField(
      expands: true,
      maxLines: null,
      decoration: InputDecoration(
          suffixIcon: Padding(
        padding:
            const EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 100),
        child: Icon(Icons.add),
      )),
    ),
  )
user_52048330
Related