как добавить разрыв между текстом метки и вводом пользователя в TextFormField?

Question

как вы можете видеть на изображении выше, я хочу добавить пробел между текстом метки «электронная почта» и фактическим вводом электронной почты ([e-mail]). как это сделать ?

это мой текущий код

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

Answer 1

В вашем текстовом поле есть UnderlineInputBorderпо умолчанию. Указание contentPadding только не помогло бы, разрыв между текстом и меткой все равно был бы тот же.

Чтобы добавить немного места, вы можете использовать OutlineInputBorder вместе с contentPadding. Если вы не хотите добавлять стиль границы контура, просто используйте borderSide: BorderSide.none. Вот код:

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

Если вы все еще хотите видеть подчеркивание, вам следует использовать виджет «Стек» выше и добавить его вручную.

Answer 2

Вы можете решить свою проблему, добавив contentPaddingв оформлении TextField. Замените свой код этим,

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

Сообщите мне, если это сработает для вас.