Text inside textform field is padded up

Issue

I am observing that the text for the below form field somehow padded up. Also the cursor has become very small like a dot. Any ideas ?

I want the text field height same as the right side round button

  final border = OutlineInputBorder(
  borderSide: BorderSide(
    color: Colors.transparent,
  ),
  borderRadius: const BorderRadius.all(
    const Radius.circular(
      10.0,
    ),
  ),
);

return TextFormField(
  controller: controller,
  onChanged: onChanged,
  validator: validator,
  autovalidateMode: AutovalidateMode.onUserInteraction,
  cursorColor: Theme.of(context).highlightColor,
  style: GoogleFonts.poppins(
    color: Theme.of(context).highlightColor,
    fontSize: 16,
    fontWeight: FontWeight.w300,
    height: 0.1,
  ),
  textInputAction: TextInputAction.done,
  decoration: InputDecoration(
    fillColor: Theme.of(context).primaryColorLight,
    filled: true,
    enabledBorder: border,
    focusedBorder: border,
    border: border,
    labelText: labelText,

    // remove label while in focus
    floatingLabelBehavior: FloatingLabelBehavior.never,
    labelStyle: GoogleFonts.poppins(
      color: Theme.of(context).highlightColor,
      fontSize: 15,
      fontWeight: FontWeight.w300,
    ),
  ),
);

Solution

The reason for for the additional padding and the small cursor is the font height which you are setting to 0.1 (keep the default 1.0 if you don’t want the additional padding).

You can fix the cursor issue by setting cursorHeight to match your original font size

Note: use cursorHeight only if you want to keep the height as 0.1

Answered By – Raouf Rahiche

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)