CODEWITHSUNDEEP
flutterflutter-layouttextformfield
Abhishek Kumar
Abhishek Kumar

Reputation: 331

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

This is what I have:

enter image description here

This is what I want:

enter image description here

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

enter image description here

Upvotes: 5

Views: 3764

Answers (3)

Dan James
Dan James

Reputation: 579

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

Upvotes: 1

Vinay Jain
Vinay Jain

Reputation: 428

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.

Upvotes: 1

Marcel Dz
Marcel Dz

Reputation: 2714

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

Upvotes: 4

Related Questions