Flutter TextField label is outside of background when focused-CodePudding

Title should say everything. Nevertheless, here are some pictures for better understanding.

How it should look like (Google Material Components):

How it actually looks like:

But please ignore the bottom border of the pic "how it should look like". The problem is just that the label is outside of the background.

And also the Text and LabelText is not vertically centered. Another picture:

I also tried playing around with the paddings (top and bottom) but either it didn't change anything or I got an error.

And here is the source code:

return TextField(
  onChanged: (String? value) {
    print(value);
    onChanged(value);
  },
  textAlignVertical: TextAlignVertical.center,
  decoration: InputDecoration(
    prefixIcon: prefixIcon,
    labelText: labelText,
    labelStyle: TextStyle(
      fontWeight: FontWeight.w700,
      color: kInputColor,
      fontSize: 14.0,
    ),
    filled: true,
    fillColor: kInputFillColor,
    contentPadding: EdgeInsets.only(
      top: 14.0,
      bottom: 14.0,
      left: 14.0,
      right: 14.0,
    ),
    border: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(6.0),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.circular(6.0),
    ),
  ),
  cursorWidth: 1.5,
  style: TextStyle(
    fontWeight: FontWeight.w600,
    color: Colors.black,
    fontSize: 14.0,
  ),
);

CodePudding user response：

You can get it InputDecoration Property

TextFormField(
      decoration: InputDecoration(
        labelText: "Label",
        filled: true),
    )

CodePudding user response：

The problem was the type of border I used. Through the answer of @Diwyansh, I found out that the default border a TextField uses is the UnderlineInputBorder. I found out that this type of border also has the properties to set borderRadius and borderSide. So when I use UnderlineInputBorder instead of OutlineInputBorder (which for me sounded more meaningful than UnderlineInputBorder), the label is drawn within the background of the TextField. This is how my source code looks now:

return TextField(
  onChanged: (String? value) {
    print(value);
    onChanged(value);
  },
  decoration: InputDecoration(
    prefixIcon: prefixIcon,
    labelText: labelText,
    labelStyle: TextStyle(
      fontWeight: FontWeight.w700,
      color: kInputColor,
      fontSize: 14.0,
    ),
    filled: true,
    fillColor: kInputFillColor,
    contentPadding: EdgeInsets.only(
      top: 14.0,
      bottom: 12.0,
      left: 14.0,
      right: 14.0,
    ),
    border: UnderlineInputBorder(
      borderRadius: BorderRadius.circular(6.0),
      borderSide: BorderSide.none,
    ),
  ),
  cursorWidth: 1.5,
  style: TextStyle(
    fontWeight: FontWeight.w600,
    color: Colors.black,
    fontSize: 14.0,
  ),
);

CodePudding user response：

According to The Official Flutter Documentation of OutlineInputBorder https://api.flutter.dev/flutter/material/OutlineInputBorder/OutlineInputBorder.html

InputDecoration.floatingLabelBehavior, which should be set to FloatingLabelBehavior.never when the borderSide is BorderSide.none. If let as FloatingLabelBehavior.auto, the label will extend beyond the container as if the border were still being drawn.

Which means if BorderSide is set to BorderSide.none, just like you did, the label would look outside the background container when focused.

so you just need to set floatingLabelBehavior to FloatingLabelBehavior.never. which would make it work like hintText