Flutter TextFormField验证错误文本填充

Question

I have a TextFormField. This widget validation is empty show error text. However, the error text fill looks like the picture. How can i solve it.

 SizedBox(
            height: 50,
            child: TextFormField(
              validator: (val) {
                if (val!.isEmpty) {
                  return "Boş Geçilemez";
                }
                if (val.length > 100) {
                  return "Karakter Sınırı Hatası";
                }
                return null;
              },
              obscureText: true,
              decoration: InputDecoration(
                 
                  suffixIcon: const Icon(
                    Icons.lock_outline_rounded,
                    color: Color(0xffBDBDBD),
                  ),
                  hintText: AppLocalizations.getString("sifre"),
                  contentPadding:
                      const EdgeInsets.only(top: 14, left: 10, bottom: 10)),
              controller: passwordController,
            ),
          ),

Answer 1

It would be better if you use same content padding for top and bottom, and try increasing the height of TextFiled like 64.

And use autovalidateMode: AutovalidateMode.onUserInteraction,

SizedBox(
  height: 64,
  child: TextFormField(
    autovalidateMode: AutovalidateMode.onUserInteraction,
    validator: (val) {
      if (val != null && val.isEmpty) {
        return "Boş Geçilemez";
      }
      if (val!.length > 10) {
        return "Karakter Sınırı Hatası";
      }
      return null;
    },
    decoration: InputDecoration(
        suffixIcon: const Icon(
          Icons.lock_outline_rounded,
          color: Color(0xffBDBDBD),
        ),
        hintText: "sifre",
        contentPadding: const EdgeInsets.only(
          top: 14,
          left: 10,
          bottom: 14,
        )),
  ),
),