Flutter TextField suffix adds weird padding

Question

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,
    ),

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,
    ),

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?

Answer 1

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,
          ),
        ),
      ),
    ),
  ],
)