如何减少 Flutter 中 TextformField 中 label 文本和底线之间的填充？

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?

Answer 1

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

Answer 2

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.

Answer 3

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