Flutter TextField 后缀添加奇怪的填充

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

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

Answer 2

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