How to reduce padding between label text and bottom line in TextformField in Flutter?

Question

This is what I have:

This is what I want:

I want to remove the space between label text and bottom line, how to do that?

Both images are the same. – Scott Godfrey Dec 15 '20 at 12:27 — Scott Godfrey, Dec 15 '20 at 12:27

score 3 · Accepted Answer · answered Dec 15 '20 at 12:29

With InputDecorationTheme you can style TextformField like you want. Also the padding.

Check this out: https://api.flutter.dev/flutter/material/InputDecorationTheme-class.html

MaterialApp(
        theme: ThemeData(
          inputDecorationTheme: InputDecorationTheme(
            border: OutlineInputBorder(),
            contentPadding: EdgeInsets.symmetric(
              vertical: 22,
              horizontal: 26,
            ),
            labelStyle: TextStyle(
              fontSize: 35,
              decorationColor: Colors.red,
            ),
        ),
)

score 1 · Answer 2 · answered Jan 13 '22 at 17:47

1

Another useful prop in InputDecoration is alignLableWithHint. This will lower the starting position to the same level as the text/hint text.

Normally the label sits higher, even with contentPadding set to 0

    TextField(
       decoration:InputDecoration(
         hintText:"some label",
         alignLabelWithHint: true,
       ),
     ),

answered Jan 13 '22 at 17:47

Dan James

546
4
9

I would give you more upvotes if I could, I've been wrestling with this for a while and this works a treat. – Matt Booth Oct 07 '22 at 12:32

score 0 · Answer 3 · answered Dec 15 '20 at 12:30

0

You should use contentPadding parameter inside TextField's decoration.For example:

    TextField(
        decoration:InputDecoration(
          hintText:"LABEL",
          contentPadding: EdgeInsets.only(top:0.0,bottom:0.0)
        ),
       ),

You can set content Padding as you like to achieve desired results.

answered Dec 15 '20 at 12:30

Vinay Jain

398
2
6

This only adds additional space, it doesn't remove the spacing that's already there. But the OP's request can sort of be achieved by adding top padding to push the text down. – Tim Aug 28 '23 at 05:42

How to reduce padding between label text and bottom line in TextformField in Flutter?

3 Answers3