Flutter input text field with custom label position

Question

I would like to create below input in Flutter

TextFormField(
      decoration: InputDecoration(
        labelText: "Label",
        border: OutlineInputBorder(
          borderRadius: BorderRadius.all(
            Radius.circular(getPt(4)),
          ),
        ),
      ),
    );

But when using default behaviour Label goes to the top of border. Setting height for label breaks the whole input, so input text goes down, so this not helping.

I think I can put this to stack and position Label on my required position, but it want be part of input anymore, and will require watch value change on all fields, but maybe there is some other option?

Answer 1

You can wrap it using Container,

Container(
    padding: EdgeInsets.symmetric(horizontal: 8),
    decoration: BoxDecoration(
      border: Border.all(color: Colors.grey),
      borderRadius: BorderRadius.all(
        Radius.circular(10),
      ),
    ),
    child: TextFormField(
      decoration:
          InputDecoration(labelText: "Label", border: InputBorder.none),
    ),
  );