Flutter textfield how to position floating label and error label - flutter

Question

I have a flutter design
when user selects textfield should fill with blue color then floating label padding above the border and textfield content padding should change.
When the textfield has an error both floating label and error label change the color and I have to position them.
Can someone help me how to achieve this as Reusable TextField
Please refer to the image.
Image with Animation

Answer 1

Rather then using label text I would consider using Text() above your TextFormField(). You can try this code below to get your result
FocusNode _focus = FocusNode();
bool _isValidate = true;
GlobalKey<FormState> _key = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: EdgeInsets.only(bottom: 5, left: 11),
child: Text("Field Value",
style: TextStyle(
color:
_focus.hasFocus ? Colors.blue : Colors.white))),
TextFormField(
focusNode: _focus,
onTap: () {
FocusScope.of(context).requestFocus();
},
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50)),
filled: true,
fillColor:
_focus.hasFocus ? Colors.blue : Colors.transparent),
),
Divider(),
Padding(
padding: EdgeInsets.only(bottom: 5, left: 11),
child: Text("Field Value",
style: TextStyle(
color: _isValidate ? Colors.white : Colors.red))),
Form(
key: _key,
child: TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50)),
errorStyle:
TextStyle(fontSize: 14, fontWeight: FontWeight.w400)),
validator: (val) {
if (val!.length >= 5) {
setState(() {
_isValidate = false;
});
return "Field Value";
} else {
setState(() {
_isValidate = true;
});
return null;
}
},
),
),
Divider(),
ElevatedButton(
onPressed: () {
final form = _key.currentState;
form!.validate();
},
child: Text("Submit"))
],
)),
);
}