how to add gap between label text and user input in TextFormField?

Question

as you can see from the image above, I want to add the gap/space between 'email' label text and the actual email input (abcd@gmail.com). how to do that ?

this is my current code

Form(
      child: Column(
        children: [
          TextFormField(
            autocorrect: false,
            decoration: InputDecoration(labelText: "Email"),
            keyboardType: TextInputType.emailAddress,
            textInputAction: TextInputAction.next,
          ),
        ],
      ),
    );

score 4 · Accepted Answer · answered May 21 '21 at 07:25

Your text field has UnderlineInputBorder by default. Specifying contentPadding only would not help for it, gap between text and label would be the same anyway.

To add some space you can use OutlineInputBorder along with contentPadding. If you don't want to add outline border style just use borderSide: BorderSide.none. Here is the code:

TextFormField(
  autocorrect: false,
  decoration: InputDecoration(
    labelText: "Email",
    border: OutlineInputBorder(borderSide: BorderSide.none),
    contentPadding: const EdgeInsets.fromLTRB(12, 24, 12, 24),
  ),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
),

If you still want to see underline you should use Stack widget above and add it manualy.

score 0 · Answer 2 · answered May 21 '21 at 07:10

You can solve your problem by adding contentPadding in TextField decoration. Replace your code with this,

Form(
      child: Column(
        children: [
          TextFormField(
            autocorrect: false,
            decoration: InputDecoration(labelText: "Email",
                        contentPadding: const EdgeInsets.only(top: 1)),
            keyboardType: TextInputType.emailAddress,
            textInputAction: TextInputAction.next,
          ),
        ],
      ),
    );

Let me know if it work for you.

how to add gap between label text and user input in TextFormField?

2 Answers2