TextInput in TextFormField Get Bottom Padded If suffixIcon or prefixIcon Property of InputDecoration is Used

问题

Top picture: Normal good looking TextFormField without supplying any Widget for suffixIcon

Bottom picture: Suppyling Icon Widget for suffixIcon makes the Text input floating unnecessarily

Any idea what's causing this?

Code: It's a plain TextFormField with suffixIcon

   TextFormField(
      decoration: InputDecoration(
        suffixIcon: Icon(Icons.search),
      )
    )

回答1:

This may not the best approach, but it works. You can wrap TextFormField with a Container. This can make the text and icon in same row.

  Padding(
       padding: EdgeInsets.all(15),
          child: Container(
              height: 25,
              child: TextFormField(
                  decoration: InputDecoration(
                suffixIcon: Icon(Icons.search),
              ))))

Output

回答2:

Current solution:

TextFormField(
   textAlignVertical: TextAlignVertical.bottom,
   decoration: InputDecoration(
      prefixIcon: Padding(
         padding: const EdgeInsets.only(top: 12.0, right: 12.0),
         child: Icon(Icons.search)
      ),
   ),
)

The documentation:

prefixIcon: Padding(
  padding: const EdgeInsetsDirectional.only(start: 12.0),
  child: myIcon, // myIcon is a 48px-wide widget.
)

Because apparently according to the documentation, the prefixIcon and suffixIcon are wrapped in Padding Widget with value of 12. So to make it back to the original position, we can just wrap it in opposite direction Padding, in this case top and right because I'm using prefixIcon. If you use suffixIcon, wrap it with top and left. And the last thing, to make the Text input not floating (get bottom padded), I add this textAlignVertical: TextAlignVertical.bottom

来源：https://stackoverflow.com/questions/60017356/textinput-in-textformfield-get-bottom-padded-if-suffixicon-or-prefixicon-propert