How to position the labelText inside a textfield? - flutter

Question

I would like to move the label text to the topLeft position.
From this, to this.
Code:
Container buildPendingPageTextField() {
return Container(
alignment: Alignment.topLeft,
width: MediaQuery.of(context).size.width,
child: TextField(
textAlign: TextAlign.start,
controller: attendanceBloc.refusedReasonController,
textInputAction: TextInputAction.done,
maxLines: 3,
minLines: 3,
scrollPhysics: ScrollPhysics(),
style: TextStyle(
height: 1,
fontSize: 15,
letterSpacing: -0.5,
),
decoration: InputDecoration(
errorText: attendanceBloc.error.value,
floatingLabelBehavior: FloatingLabelBehavior.never,
labelText: "Descreva aqui o motivo",
labelStyle: TextStyle(),
border: const OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 0.3,
),
),
),
),
);
}
I have tried aligment on the container. on the inputDecoration, and even on textStyle, no success.

Answer 1

alignLabelWithHint property
Typically set to true when the InputDecorator contains a multiline TextField (TextField.maxLines is null or > 1) to override the default behavior of aligning the label with the center of the TextField.
You should set alignLabelWithHint to true to override the default behavior of aligning the label with the center:
decoration: InputDecoration(
errorText: attendanceBloc.error.value,
floatingLabelBehavior: FloatingLabelBehavior.never,
labelText: "Descreva aqui o motivo",
labelStyle: TextStyle(),
alignLabelWithHint: true, // Insert this line
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 0.3,
),
),
),

Answer 2

lableText shouldn't be used for such a situation,
instead, use hintText to do it with less code
decoration: InputDecoration(
hintText: 'Descreva aqui o motivo',
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
width: 0.3,
),
),
),