Flutter: Outline input border Flutter: Outline input border dart dart

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,        ),      ),    )

enter image description here


For others coming here who just want a TextField with a border all around it:

TextField(  decoration: InputDecoration(    border: OutlineInputBorder(),  ),),