I'm trying to customize a TextFormField in Flutter. I would like to style this Widget to achieve this look:
I can get this style just when the field is focused with the following code:
TextFormField(
decoration: InputDecoration(
enabled: true,
border: OutlineInputBorder(),
labelText: 'Name:',
),
I wish that style above all time, even if the field is not focused.
I tried other alternatives, but I could get What I need. I tried this code:
Container(
child: Text(
"Name", style: TextStyle(
fontSize: 18,
backgroundColor: Colors.amber,
height: 0.5)
),
),
TextField(
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(width: 3, color: Colors.blue)
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(width: 3, color: Colors.blue)
)
),
)
And I put it inside a Stack Widget. But the result was that:
Is there any way to solve this?
CodePudding user response:
Just add floatingLabelBehavior: FloatingLabelBehavior.always
to your decoration. Please accept if it solve your problem.
TextFormField(
decoration: InputDecoration(
enabled: true,
border: OutlineInputBorder(),
labelText: 'Name:',
floatingLabelBehavior: FloatingLabelBehavior.always,
),
)