Flutter: Outline input border
I was trying to build a border for my text field like:
return TextField(
...
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.red,
width: 5.0),
)
)
)
But it always return a black border with 1.0 as width. The only way that I found to change the color was to create a ThemeData where I specify the hint color, but I could not find a way to change my width.
What your looking for is - enabledBorder
property of InputDecoration
.
If you want to Change Border on focus use - focusedBorder
TextField(
decoration: new InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.greenAccent, width: 5.0),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.red, width: 5.0),
),
hintText: 'Mobile Number',
),
),
For others coming here who just want a TextField
with a border all around it:
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
),
),
You can use Container to give border your text field. add the TextField
as a child to a Container
that has a BoxDecoration
with border property:
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.red,// set border color
width: 3.0), // set border width
borderRadius: BorderRadius.all(
Radius.circular(10.0)), // set rounded corner radius
),
child: TextField(
decoration: InputDecoration(
hintText: 'Label text',
border: InputBorder.none,
),
),
)