Flutter: Outline input border
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', ), ),
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, ), ), )