Border only left top on Flutter TextField

Question

I was wondering if it is possible to have borders only on specific sides on Flutter TextField. In this particular case, I need only top and left, but would like to know in general if this is possible, thank you.

score 3 · Accepted Answer · answered Apr 04 '21 at 04:10

you can wrap the TextField widget with Container and give border:

Container(
 decoration: BoxDecoration(
 color: Colors.white,
 border: Border(
  top: BorderSide(color: Colors.red),
  left: BorderSide(color: Colors.red),
  ),
 ),
 child: TextFormField(
  decoration: InputDecoration(
   labelText: 'Email',
   border: InputBorder.none,
  ),
 ),
),

the result:

score 1 · Answer 2 · answered Apr 04 '21 at 03:59

1

Yes, sure you can, try this (or check DartPad I made for it : https://dartpad.dev/1a28bdd9203250d3226cc25d512579ec?null_safety=true):

Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          padding: EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(width: 4.0, color: Colors.lightBlue.shade900),
              left: BorderSide(width: 4.0, color: Colors.lightBlue.shade900),
            ),
          ),
          child: TextField(),
        ),
      ),

answered Apr 04 '21 at 03:59

AVEbrahimi

17,993
23
107
210

So it cannot be done from the TextField boders, that have different properties for enabled, disabled and error? It needs to be wrapped in a container? – user3808307 Apr 05 '21 at 12:41
1

No, not from the TextField borders. – AVEbrahimi Apr 05 '21 at 14:16

Border only left top on Flutter TextField

2 Answers2

Related