Cannot remove underside padding from TextField and TextFormField in Flutter

Question

I have this widget:

TextFormField(
  controller: _activityName,
  autocorrect: true,
  textAlign: TextAlign.start,
  decoration: InputDecoration(
      contentPadding = EdgeInsets.zero,



      border: UnderlineInputBorder(

      ),

      hintText: ""),
  maxLines: 1,
  cursorColor: Colors.white,
),

As you can see I explicitly set the padding to be 0, as this answer said: How do I remove content padding from TextField?

But the result I get is this:

As you can see under the Text MyActivity there is a lot of padding, but I can't get rid of it. It looks like a bug, but I'm not sure:

This is the flutter doctor:

Flutter (Channel stable, v1.12.13+hotfix.5, on Microsoft Windows [Version 10.0.18362.295], locale en-US)
    • Flutter version 1.12.13+hotfix.5 %Flutter path%
    • Framework revision 27321ebbad (3 weeks ago), 2019-12-10 18:15:01 -0800
    • Engine revision 2994f7e1e6
    • Dart version 2.7.0

The padding is said to be intentional. Source: [flutter issue](https://github.com/flutter/flutter/issues/15483#issuecomment-372864415). — Harshvardhan Joshi, Dec 28 '19 at 16:17
I don't think so. because I have tried and every possible padding value in TextField to zero and it still has the same padding. — Harshvardhan Joshi, Dec 28 '19 at 17:24
@HarshvardhanJoshi Ah ok, Thank you for taking your time to help me! Let's hope for a fix soon! — fabriziog, Dec 28 '19 at 17:26
if you saw the issue, they said it's intended. so maybe we can ask for an optional "compensation" parameter to remove extra padding. — Harshvardhan Joshi, Dec 28 '19 at 17:28
This is marked as `severe: regression` in this [issue](https://github.com/flutter/flutter/issues/46160), It might take few months for this fix... — Tokenyet, Jan 06 '20 at 06:35

score 14 · Answer 1 · answered Jan 05 '20 at 19:19

14

From https://stackoverflow.com/a/59295394/4465386 - check it out for a demo too.

This is how to get 0 padding textFields:

TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.all(0),
    isDense: true,
  ),
);

answered Jan 05 '20 at 19:19

Zvi Karp

3,621
3
25
40

score 2 · Answer 2 · answered Dec 28 '19 at 18:40

2

You can remove a little bit of space by using collapsed:

TextField(
  decoration: InputDecoration.collapsed(hintText: null),
),

answered Dec 28 '19 at 18:40

Yster

3,147
5
32
48

score 0 · Answer 3 · edited Mar 12 '22 at 14:33

0

Please try this.

TextField(
  decoration: InputDecoration(
    contentPadding: EdgeInsets.zero,
    isDense: true,
  ),
);

edited Mar 12 '22 at 14:33

cigien

57,834
11
73
112

answered Mar 12 '22 at 06:08

Chintan StackApp

53
5

Cannot remove underside padding from TextField and TextFormField in Flutter

3 Answers3