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

Issue

enter image description here

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

Solution

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.

Answered By – Mol0ko

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.