CODEWITHSUNDEEP
fluttertextfield
Apri
Apri

Reputation: 1515

Flutter TextField suffix adds weird padding

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?

Upvotes: 0

Views: 1593

Answers (2)

Leonardo Rosa
Leonardo Rosa

Reputation: 168

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

Upvotes: 1

ClineCline93
ClineCline93

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

Upvotes: 0

Related Questions