Flutter TextField suffix adds weird padding

Apri 0
Viewed 41

I want a multiline TextView with a suffix icon in the top right corner. I tried it with the suffixIcon like this, but the icon is vertically centered:

    TextField(
      decoration: InputDecoration(
        suffixIcon: suffixIcon,
      ),
      maxLines: 5,
      minLines: 5,
    ),

enter image description here

When I use suffix like this, it is in the top right corner, as supposed, but it adds a weird padding to the top of the text:

    TextField(
      decoration: InputDecoration(
        suffix: suffix,
      ),
      maxLines: 5,
      minLines: 5,
    ),

enter image description here

It is just a small difference, but when you compare the two images, you can see that at the second image, the text is moved slightly to the bottom.

Any ideas how I can fix this?

textfield flutter
2 Answers

There is an issue with the suffix position in the Flutter. You can read more about here.

However, it is not the best way but you can use Stack and Positioned widget to set the position of the suffix icon inside your TextField widget like this:

Stack(
  children: const [
    Positioned(
      right: 5,
      top: 5,
      child: Icon(Icons.close),
    ),
    Positioned.fill(
      child: TextField(
        minLines: 5,
        maxLines: 5,
        decoration: InputDecoration(
          filled: true,
          contentPadding: EdgeInsets.only(
            top: 10,
            bottom: 10,
            left: 10,
            right: 24,
          ),
        ),
      ),
    ),
  ],
)
Leonardo Rosa0

The text field widget comes with some default padding, as part of it's decoration property. It can be removed like this:

TextField(
          decoration: InputDecoration(
            contentPadding: EdgeInsets.zero
          ),
          ... 
        )
ClineCline930
Related